데이터 불러오기(배열, 객체, for문, map(), 펼침연산자...)

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

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

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

    console.log(x, y, z);
}

결과값

100 200 javascript

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

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

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

    console.log(x, y, z);
}

결과값

100 200 javascript

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

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

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

    console.log(arr[0], arr[1], arr[2]);
}

결과값

100 200 javascript

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

배열안에 배열이 있는 데이터를 불러오는 방법입니다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}

결과값

100 200 javascript react

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

'length'는 갯수를 구하는 태그입니다.

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

    console.log(arr.length);

}

결과값

3

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

for문의 기본형식은 'for(초기값; 조건식; 증감식)'입니다.

{
    for(let i = 0; i < 9; i++){
        console.log(arr[i]);
     }
     
     for(let i = 0; i < 9; i++){
        console.log(arr[i]);
     }
}

결과값

123456789

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

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

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

결과값

i:1에 j: 1~10
i:2에 j: 1~10
i : 10까지 반복

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

{ 
    //forEach (값, 인덱스, 배열)
    num.forEach(function(element, index, array){
        document.write(element, "<br>");
        document.write(index, "<br>");
        document.write(array, "<br>");
    })
}

결과값

0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500

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

{
    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 num = [100, 200, 300, 400, 500];
            
    num.forEach(function(el, i, a){
        console.log(el);
        console.log(i);
        console.log(a);

    });

    num.map(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });
}

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

자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.

{    
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700,];
    console.log(arr1, "");
    console.log(...arr1);
    console.log(...arr1, ...arr2);
}

결과값

[100,200,300,400,500]
100 200 300 400 500

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

배열구조분해할당은 배열의 요소를 개별 변수에 할당하는 방법 중 하나 입니다 이를통한 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.

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

    console.log(a)
    console.log(b)
    console.log(c)
}

결과값

100 200 jabascript

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

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

결과값

100 200 jabascript

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

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

결과값

[a b c]
[100 200 javascript]
[["a",100]["b",200]["c",jabascript]]

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

배열구조분해할당은 배열의 요소를 개별 변수에 할당하는 방법 중 하나 입니다 이를통한 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.

{    
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }           
    for(let ke in obj){
        console.log(key);
        console.log(obj[key]);
    }

}

결과값

a 100 b 200 c jabascriptt

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

{    
    const obj = [
                {a:100, b:200, c:"javascript"}
            ] 
            obj.map(function(el){
                console.log(el.a)
                console.log(el.b)
                console.log(el.c)
            });

}

결과값

100 200 jabascript

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

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

    //약식
    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);

}

결과값

hasOwnproperty

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

{   
    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 jabascript react
100 200 jabascript react

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

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

결과값

100 200 jabascript
100 200 jabascript