자바스크립트

데이터 불러오기

01. 변수 : 데이터 불러오기
02. 상수 : 데이터 불러오기
03. 배열 : 데이터 불러오기
04. 배열 : 데이터 불러오기 : 2차 배열
05. 배열 : 데이터 불러오기 : 갯수 구하기
06. 배열 : 데이터 불러오기 : for()
07. 배열 : 데이터 불러오기 : forEach()
08. 배열 : 데이터 불러오기 : for of
09. 배열 : 데이터 불러오기 : for in
10. 배열 : 데이터 불러오기 : map()
11. 배열 : 데이터 불러오기 : 펼침 연산자
12. 배열 : 데이터 불러오기 : 배열구조분해할당
13. 객체 : 데이터 불러오기 : 기본
14. 객체 : 데이터 불러오기 : Object
15. 객체 : 데이터 불러오기 : 변수
16. 객체 : 데이터 불러오기 : for in
18. 객체 : 데이터 불러오기 : hasOwnProperty()
19. 객체 : 데이터 불러오기 : 펼침 연산자 - 복사
20. 객체 : 데이터 불러오기 : 펼침 연산자 - 추가
21. 객체 : 데이터 불러오기 : 펼침 연산자 - 결합
22. 객체 : 데이터 불러오기 : 객체구조분해할당
23. 객체 : 데이터 불러오기 : 객체구조분해할당

for()문 연산자

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

{
    var x = 100, y = 200, z = "javascript";     
        
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

100
200
javascript

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

{
    const x = 100, y = 200, z = "javascript";  
    
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

100
200
javascript;

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

{
    const x = 100, y = 200, z = "javascript";  
    
    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

100
200
javascript

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

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
    document.write(arr[2][0]);
    document.write(arr[2][1]);

}

결과보기

100
200
javascript,jquery
javascript
jquery

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

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

    document.write("arr 배열 개수 : " + arr.length);
}

결과보기

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

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

    // document.write(arr[0]);
    // document.write(arr[1]);
    // document.write(arr[2]);
    // document.write(arr[3]);
    // document.write(arr[4]);

    // for(초기값, 조건식, 증감식)
    // arr[0] ~ [4]까지 출력할때 for문 하나로 정리할 수 있음

    for(let i = 0; i < arr.length; i++)
    {
        document.write(arr[i]);
    } 
}

결과보기

100
200
300
400
500

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

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

    num.forEach(function(ele)
    {
        document.write(ele);   // 100, 200, 300, 400, 500 출력
    });

    // function(ele{}) : 함수 안에 함수가 실행되는 것(콜백)

    num.forEach(function(x, y, z)
    {
        //let x, y, z = ""; // 자동으로 형성됨

        document.write(x, "
"); // num 배열의 값(100, 200, 300, 400, 500)
        document.write(y, "
"); // 배열 크기(0,1,2,3,4)
        document.write(z, "
"); // num 배열 전체값(100, 200, 300, 400, 500)들을 5번 출력
    })
}

결과보기

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

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

{
// for문을 쓸때보다 간략하게 쓸수 있다
const num = [100, 200, 300, 400, 500];

for(let i of num)
{
    document.write(i);
}
}

결과보기

0, 1, 2, 3, 4

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

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

    for(let i in num)
    {
        document.write(i);
    }

    for(let i in num)
    {
        document.write(num[i]);
    }
}

결과보기

0 1 2 3 4
100 200 300 400 500

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

{
    // map() 메서드는 배열에 대해서만 처리한다
    const num = [100, 200, 300, 400, 500];

    num.map(function(element)
    {
        document.write(element); 
    });

    //map(element, index, array)
    num.map(function(element, index, array)
    {
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

결과보기

100 200 300 400 500

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

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

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

    document.write(num); // 100, 200, 300, 400, 500

    document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다)
    document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다)
}

결과보기

100, 200, 300, 400, 500
100 200 300 400 500
100 200 300 400 500

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

{
    let a, b, c;

    [a, b, c] = [100, 200, "javascript"]; // 구조분해할당 방법
    
    document.write(a);
    document.write(b);
    document.write(c);
}

결과보기

100, 200, 300

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

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);

    // 예전 문법
    document.write(obj['a']);
    document.write(obj['a']);
    document.write(obj['a']);
}

결과보기

100, 200, javascript

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

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

    document.write(Object.keys(obj)); // a, b, c 출력
    document.write(Object.values(obj)); // 100, 200, javascript 출력
    document.write(Object.entries(obj)); // a,100 / b,200 / c,javascript 출력
}

결과보기

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

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

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

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

    document.write(name1); // 100
    document.write(name2); // 200
    document.write(name3); // javascript
}

결과보기

100,200,javascript

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

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

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

    document.write(name1); // 100
    document.write(name2); // 200
    document.write(name3); // javascript
}

결과보기

100,200,javascript

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

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

    for(let i in obj) {
        document.write(obj[i]);
    }                   
}

결과보기

100,200,javascript

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

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

    obj.map(function (ele) {
        document.write(ele.a);
        document.write(ele.b);
        document.write(ele.c);
    });
}

결과보기

100,200,javascript

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

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

    document.write(obj.hasOwnProperty('a'));
    document.write(obj.hasOwnProperty('b'));
    document.write(obj.hasOwnProperty('c'));
    document.write(obj.hasOwnProperty('d'));
    document.write('a' in obj);                 // obj.hasOwnProperty('a')
    document.write('b' in obj);                 // obj.hasOwnProperty('b')
    document.write('c' in obj);                 // obj.hasOwnProperty('c')
}

결과보기

true true true false

19. 객체 : 데이터 불러오기 : 펼침 연산자 - 복사

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

    const spread = {...obj};
    document.write(spread.a);
    document.write(spread.b);
    document.write(spread.c);
}

결과보기

100,200,javascript

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

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

    const spread = {...obj, d: "jquery"}; // jquery 추가
    document.write(spread.a);
    document.write(spread.b);
    document.write(spread.c);
    document.write(spread.d);
}

결과보기

100,200,javascript,jquery

21. 객체 : 데이터 불러오기 : 펼침 연산자 - 결합

{
    const objA = {
        a: 100,
        b: 200,
    };

    const objB = {
        c: "javascript",
        d: "jquery"
    };

    const spread = {...objA, ...objB};
    document.write(spread.a);
    document.write(spread.b);
    document.write(spread.c);
    document.write(spread.d);
}

결과보기

100,200,javascript,jquery

22. 객체 : 데이터 불러오기 : 비구조 할당

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

    const {a, b, c} = obj;

    document.write(a);
    document.write(b);
    document.write(c);
}

결과보기

100,200,javascript

23. 객체 : 데이터 불러오기 : 비구조화 할당 : 별도의 이름 저장

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

    const {a: name1, b: name2, c: name3} = obj;

    document.write(a);
    document.write(b);
    document.write(c);
}

결과보기

100,200,javascript