Javascript : 데이터 불러오기

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. 배열 : 데이터 불러오기 : 갯수 구하기

배열 안에 있는 데이터의 갯수를 구하는 방법입니다.


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

    console.log(arr.length);

결과확인하기

06. 배열 : 데이터 불러오기 : 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(초기값; 조건식; 증감식)
    // 실행문
    // 1)초기값을 넣었을 때 2)조건에 맞아 true이면 3)for식에 넣어 답이 나오고 4)증감식에 대입하여 다시 계산

    for(let i = 0; i<9; i++){
        console.log(arr[i]);
    }
    //위와 아래의 두 식은 같은 값이 나온다.
    for(let i = 0; i<3; i++){
        console.log(arr[i]);
    }
    for문은 식이 false일 때 까지 계산한다. 
    for(초기값; 조건식; 증감식)
    1) 초기값을 넣었을 때     2) 조건에 맞아 true이면  3) for식에 넣어 답이 나오고       4) 증감식에 대입하여 다시 계산
    1) i=0;                  2) 0<9;                      3) console.log(arr[0]); =< 100          4) i++  =< 0+1 = 1
    1) i=1;                  2) 1<9;                      3) console.log(arr[1]); =< 200          4) i++  =< 1+1 = 2
    1) i=2;                  2) 2<9;                      3) console.log(arr[2]); =< 300          4) i++  =< 2+1 = 3
    1) i=3;                  2) 3<9;                      3) console.log(arr[3]); =< 400          4) i++  =< 3+1 = 4
    1) i=4;                  2) 4<9;                      3) console.log(arr[4]); =< 500          4) i++  =< 4+1 = 5
    1) i=5;                  2) 5<9;                      3) console.log(arr[5]); =< 600          4) i++  =< 5+1 = 6
    1) i=6;                  2) 6<9;                      3) console.log(arr[6]); =< 700          4) i++  =< 6+1 = 7
    1) i=7;                  2) 7<9;                      3) console.log(arr[7]); =< 800          4) i++  =< 7+1 = 8
    1) i=8;                  2) 8<9;                      3) console.log(arr[8]); =< 900          4) i++  =< 8+1 = 9
    1) i=9;                  2) 9<9;               false  END    
    
}

결과확인하기

100
200
300
400

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

for문 안에 for문이 들어가 있는 구조


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

결과확인하기

i : 1 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 2 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 3 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 4 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 5 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 6 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 7 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 8 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 9 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 10 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10

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

배열 안에 있는 데이터의 갯수를 구하는 방법입니다.


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

        document.write(num[0],"<br>");
        document.write(num[1],"<br>");
        document.write(num[2],"<br>");
        document.write(num[3],"<br>");
        document.write(num[4],"<br>");

        //for문
        for(let i=0; i<num.length; i++){
            document.write(num[i],"<br>");
        }
        //forEach문
        // num.forEach(function(){});  얘가 기본 한문장
        num.forEach(function(el){
            document.write(el,"<br>")
        });
        
        //forEach : 화살표함수
        // num.forEach(()=<{}) : 화살표함수로 바꾸는 기본형
        num.forEach((el) =< {
            document.write(el,"<br>")
        });

        //forEach :화살표함수 : 괄호생략
        num.forEach(el =< {
            document.write(el,"<br>")
        });

        //forEach :화살표함수 : 중괄호생략
        num.forEach(el =< document.write(el,"<br>"));
        //forEach (값, 인덱스, 배열) 불러올수 있다
        num.forEach(function(element, index, array){
            document.write(element,"<br>");
            document.write(index,"<br>");
            document.write(array,"<br>");
        })
    }

결과확인하기

100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
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

(참고) forEach문을 화살표 함수로 생략

forEach문은 함수를 사용하기 때문에 화살표 함수를 사용할 수 있다.

                     
        {
            const num = [100, 200, 300, 400, 500];
        
            // forEach문
            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));
        
        }

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


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

    for(let i of arr){
        document.write(i);

    }

결과확인하기

100200300400500

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

for in은 객체를 위한 문법이다.


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

    for(let i in arr){ //in은 자릿수 값을 불러온다
        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)

    });

결과확인하기

100
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

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

배열 펼침 연산자 (Spread Operator)는 JavaScript에서 사용되는 문법 중 하나입니다.
이 연산자는 배열 또는 객체를 펼쳐서 각각의 요소를 개별적인 값으로 나타내는 역할을 합니다.
배열 펼침 연산자는 세 개의 점(...)으로 표시됩니다.
배열 펼침 연산자를 사용하면 배열의 모든 요소를 새로운 배열에 포함시킬 수 있습니다.


    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
100,200,300,400,500,600,700

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

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


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

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

결과확인하기

100
200
javescript

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

객체의 데이터를 불러오는 기본적인 방법이다.


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

결과확인하기

100
200
javescript

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

객체의 데이터를 키 및 값 또는 키와 값 모두를 불러오는 방법이다.


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

결과확인하기

a,b,c
100,200,javascript
a,100,b,200,c,javascript

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

객체의 키와 값을 변수로 설정하고 출력값에 변수를 입력하여 불러오는 방법이다.


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

    console.log(name1)
    console.log(name2)
    console.log(name3)

결과확인하기

100
200
javescript

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
100
b
200
c
javascript

18. 객체 : 데이터 불러오기 : 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()

객체에 특정 속성이 존재하는지 여부를 나타내는 불리언 값을 반환한다.
해당 속성이 객체 자신의 속성으로 존재하면 true, 해당 속성이 존재하지 않으면 false를 반환한다.


    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
        } 
        document.write(obj.hasOwnProperty("a"));//true
        document.write(obj.hasOwnProperty("b"));//true
        document.write(obj.hasOwnProperty("c"));//true
        document.write(obj.hasOwnProperty("d"));//false
//바로 위와 같은 식
        console.log("a" in obj)
        console.log("b" in obj)
        console.log("c" in obj)
        console.log("d" in obj)

결과확인하기

truetruetruefalse
truetruetruefalse

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

펼침 연산자는 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자이며, 데이터를 추가해서 불러오거나 합칠 수도 있다.


    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 spread1 = {...obj1, ...obj2}
    console.log(spread1.a)
    console.log(spread1.b)
    console.log(spread1.c)
    console.log(spread1.d)

결과확인하기

100200javascriptreact
100200javascriptreact

데이터 추가, 합침 예시

                     
    { // 데이터 추가
        const obj = {
            a: 100,
            b: 200,
            c: "javascript"
        }
        const spread = {...obj, d: "react"};    // 데이터를 추가로 입력해서 출력이 가능합니다.
    
        console.log(spread.a);      // 100
        console.log(spread.b);      // 200  
        console.log(spread.c);      // javascript
        console.log(spread.d);      // react
    }

                     
    { // 두 개의 데이터 합침
        const obj1 = {
            a: 100,
            b: 200
        }
    
        const obj2 = {
            c: "javascript",
            d: "react"
        }
    
        const spread = {...obj1, ...obj2};      // 두 개의 데이터를 합쳐서 출력이 가능합니다.
    
        console.log(spread.a);      // 100
        console.log(spread.b);      // 200  
        console.log(spread.c);      // javascript
        console.log(spread.d);      // react
    }

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

객체의 속성들을 변수로 분해하여 할당한다.


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

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

    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);

결과확인하기

100200javascriptreact
100200javascriptreact

활용 예시

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