JAVASCRIPT

자바스크립트 데이터 불러오기

ture403 2023. 3. 6. 14:07

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

01. 변수 : 데이터 불러오기

변수안에 저장된 데이터를 불러오는 방법입니다.

{
    let x = 100,  y = 200, z = "javascript";
    
    console.log(x, y, z);
}
결과확인하기
100
200
"javascirpt"

02. 상수 : 데이터 불러오기

상수안에 저장된 데이터를 불러오는 방법입니다.

{
    const x = 100, y =200, z = "javascript";

    console.log(x, y, z);
}
결과확인하기
100
200
"javascirpt"

03. 배열 : 데이터 불러오기

배열안에 저장된 숫자 및 문자를 불러오는 방법입니다.

 {
    const arr = [100, 200, "javasscript"];

    console.log(arr[0], arr[1], arr[2]);
}
결과확인하기
100
200
"javascript"

04. 배열 : 데이터 불러오기 : 2차 배열

2차배열은 출력할대 [][]으로 불러오는 방법입니다.

{
    const arr = [100, 200, ["javasscript","react"]];

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}
결과확인하기
100
200
"javascirpt"
"react"

05. 배열 : 데이터 불러오기 : 갯수 구하기

배열 안에 갯수를 구할떄 length 불러오는 방법입니다.

{
    const arr = [100, 200, "javascript"];

    console.log(arr.length);
}
결과확인하기
3

06. 배열 : 데이터 불러오기 : for( )문

for(초기값; 조건식; 증감식)으로 구성된다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);
    
    for(let i=0; i<9; i++){
        console.log(arr[i]);
    }
    
}
결과확인하기
100
200
300
400
500
600
700
800
900

배열 for문 동작 순서

// i=0; 0<9; ture console.log(arr[0]); i++ //100
// i=1; 1<9; ture console.log(arr[1]); i++ //200
// i=2; 2<9; ture console.log(arr[2]); i++ //300
// i=3; 3<9; ture console.log(arr[3]); i++ //400
// i=4; 4<9; ture console.log(arr[4]); i++ //500
// i=5; 5<9; ture console.log(arr[5]); i++ //600
// i=6; 6<9; ture console.log(arr[6]); i++ //700
// i=7; 7<9; ture console.log(arr[7]); i++ //800
// i=8; 8<9; ture console.log(arr[8]); i++ //900
// i=9; 9<9; flase END

07. 배열 : 데이터 불러오기 : 중첩 for( )문

for문 안에 for문 이 들어가는 형태입니다.

{
    for(let i=1; i<=10; i++){
        console.log("i :" + i)
        for(let j=1; j<=10; j++){
            console.log("j :" + j)
        }
    }

    for(let i =1; i<=9; i++){
            console.log(i +" 단입니다.")
        for(let j=1; j<=9; j++){
            console.log(i*j);
        }
    }
}
결과확인하기
1단부터 9단까지 구구단이 출력됩니다.

08. 배열 : 데이터 불러오기 : forEach( )

배열을 반복하면서 각 요소에 대해 특정한 동작을 수행할 때 사용되는 메서드입니다.

 {
    const num = [100, 200, 300, 400, 500];

    num.forEach(function(el){
            document.write(el);
        });

    // forEach : 화살표 함수
    
    num.forEach((el)=>{
        document.write(el);
    });

    // forEach : 괄호 생략 
    num.forEach( el => {
        document.write(el)
    })

    // forEach : 한줄로 표현
    num.forEach( el => document.write(el));

}
결과확인하기
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500

09. 배열 : 데이터 불러오기 : for of

ES6에서 도입된 새로운 반복문입니다. 이 반복문은 배열, 문자열, 맵(Map), 셋(Set), 제너레이터(Generator) 객체 등과 같은 반복 가능한(iterable) 객체를 순회할 때 사용됩니다.

{
    const arr =[100, 200, 300, 400, 500];

    for(let i of arr){
        document.write(i);
    }
}
결과확인하기
100,200,300,400,500

10. 배열 : 데이터 불러오기 : for in

자바스크립트에서 객체의 속성을 순회할 때 사용되는 반복문입니다. 이 반복문은 객체의 속성을 열거할 수 있습니다.

{
    const arr = [100, 200, 300, 400, 500];

    for(let i in arr){
        document.write(arr[i]);
    }
}
결과확인하기
100,200,300,400,500

11. 배열 : 데이터 불러오기 : map( )

배열의 각 요소에 대해 인자로 전달된 콜백 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환하는 메서드입니다. 즉, 기존 배열의 각 요소를 변경하거나 제거하지 않고 새로운 배열을 생성합니다.

{
    const arr = [100, 200, 300, 400, 500];

    num.map(function(el, index ,arr){
        
        console.log(el);
     
    });
}
결과확인하기
100,200,300,400,500

12. 배열 : 데이터 불러오기 : 배열 펼침연산자 (spread operator)

배열에 포함된 항목을 목록으로 바꿔주는 연산자이다.

{
    let arr = [100, 200, 300, 400, 500];
    let arr2 = [600,700];

    console.log(arr,"<br>");
    console.log(...arr);
    console.log(...arr, ...arr2);
}
결과확인하기
(5) [100, 200, 300, 400, 500]
100 200 300 400 500
100 200 300 400 500 600 700

13. 배열 : 데이터 불러오기 : 배열 구조분해할당 (destructuring assignment)

배열의 요소를 개별 변수로 분리하여 사용할 수 있습니다.

{
    let a, b, c;

    [a, b, c] = [100, 200, "javascript"];

    console.log(a);
    console.log(b);
    console.log(c);
}
결과확인하기
100
200
javascript

14. 객체: 데이터 불러오기 : 기본

객체를 불러오는 기본 방법입니다.

{
    const obj = {
        a: 100,
        b: 200, 
        c: "javscript"
    };

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과확인하기
100
200
javascript

15. 객체 : 데이터 불러오기 : Object

객체를 object를 이용해서 불러오는 기본 입니다.

{
    const obj = {
        a : 100,
        b : 200,
        c : "javascript"
    };

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));
}

결과확인하기
100
200
javascript
a, b, c
100,200,"javascript"
obj 전체값이 나옴
 

16. 객체 : 데이터 불러오기 : 변수

객체를 변수를 이용해서 불러오는 기본 입니다.

{
    const obj ={
        a : 100,
        b : 200,
        c : "javascript"
    };

    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과확인하기
100
200
javascript
 

17. 객체 : 데이터 불러오기 : for in

객체를 for in를 이용해서 불러오는 기본 입니다.

{
    const obj ={
        a : 100,
        b : 200,
        c : "javascript"
    };

    for(let key in obj){

        console.log(key);
        console.log(obj[key]);
    }
}
결과확인하기
a
b
c
100
200
javascript

18. 객체 : 데이터 불러오기 : map()

객체를 map를 이용해서 불러오는 기본 입니다.

{
    const obj =[
        {a:100, b:300, c: "javascript"}
    ];

    obj.map(function(el){

        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}
결과확인하기
100
300
javascript

19. 객체 : 데이터 불러오기 : hasOwnProperty()

객체를 hasOwnProperty 이용해서 참 거짓을 알아내는 방법 입니다.

{
    const obj ={
        a : 100,
        b : 200,
        c : "javascript"
    };
    console.log(obj.hasOwnProperty("a"));
    console.log(obj.hasOwnProperty("b"));
    console.log(obj.hasOwnProperty("c"));
    console.log(obj.hasOwnProperty("d"));

    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}
결과확인하기
ture
ture
ture
flase
ture
ture
ture
flase

20. 객체 : 데이터 불러오기 :객체 펼침연산자

열이나 객체의 요소를 개별적으로 추출하여 전개할 수 있도록 하는 문법입니다.

{
    {
        const obj ={
            a : 100,
            b : 200,
            c : "javascript"
        };

        const spread = {...obj};

        console.log(spread.a);
        console.log(spread.b);
        console.log(spread.c);
    };
    {
        const obj ={
            a : 100,
            b : 200,
            c : "javascript"
        };

        const spread = {...obj, d:"react"};

        console.log(spread.a);
        console.log(spread.b);
        console.log(spread.c);
        console.log(spread.d);
    }
    {
        const obj1 ={
            a : 100,
            b : 200,
        };
        const obj2 ={
            c : "javascript",
            d : "react",
        };

        const spread = {...obj1, ...obj2};

        console.log(spread.a);
        console.log(spread.b);
        console.log(spread.c);
        console.log(spread.d);
    }
}
결과확인하기
100
200
javascript
100
200
javascript
react
100
200
javascript
react

21. 객체 : 데이터 불러오기 : 비구조화 할당(객체구조분해할당)

객체의 속성 값을 변수에 바로 할당하는 방법입니다.

{
    const obj ={
        a : 100,
        b : 200,
        c : "javascript"
    };

    const {a, b, c} = obj;

    const {a:name1, b:name2, c:name3} =obj;
    
    console.log(a);
    console.log(b);
    console.log(c);

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과확인하기
100
200
javascript
100
200
javascript