데이터 불러오기

  1. 변수 : 데이터 불러오기 : 기본
  2. 상수 : 데이터 불러오기 : 기본
  3. 배열 : 데이터 불러오기 : 기본
  4. 배열 : 데이터 불러오기 : 2차 배열
  5. 배열 : 데이터 불러오기 : 갯수 구하기
  6. 배열 : 데이터 불러오기 : for문
  7. 배열 : 데이터 불러오기 : forEach()
  8. 배열 : 데이터 불러오기 : for of문
  9. 배열 : 데이터 불러오기 : for in문
  10. 배열 : 데이터 불러오기 : map()
  11. 배열 : 데이터 불러오기 : 펼침 연산자
  12. 객체 : 데이터 불러오기 : 기본
  13. 객체 : 데이터 불러오기 : Object
  14. 객체 : 데이터 불러오기 : 변수
  15. 객체 : 데이터 불러오기 : for in문
  16. 객체 : 데이터 불러오기 : map()
  17. 객체 : 데이터 불러오기 : hasOwnProperty
  18. 객체 : 데이터 불러오기 : 펼침연산자 - 복사
  19. 객체 : 데이터 불러오기 : 펼침연산자 - 추가
  20. 객체 : 데이터 불러오기 : 펼침연산자 - 결합
  21. 객체 : 데이터 불러오기 : 비구조화 할당
  22. 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장

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

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

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

    document.write("*** 01. 변수 : 데이터 불러오기 ***");

    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

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

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

    document.write("*** 02. 상수 : 데이터 불러오기 ***");

    document.write(x);
    document.write(y);
    document.write(z);
}

결과보기

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

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

    document.write("*** 03. 배열 : 데이터 불러오기 ***");

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

결과보기

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

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

    document.write("*** 04. 배열 : 데이터 불러오기 : 2차 배열 ***");

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

결과보기

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

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

    document.write("*** 05. 배열 : 데이터 불러오기 : 갯수 구하기***");
    document.write(arr.length);
}

결과보기

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

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

    document.write("*** 06. 배열 : 데이터 불러오기 : for문 ***");

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

결과보기

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

{
    document.write("*** 07.배열 : 데이터 불러오기 : forEach() ***")

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

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

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

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

    //forEach(element, index, array)
    //num.forEach(function(){}); //es5
    //num.forEach(()=>{}); //es6

    num.forEach((element, index, array)=>{
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

결과보기

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

{
    document.write("*** 08. 배열 : 데이터 불러오기 : for of문 ***")

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

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

결과보기

09. 배열 : 데이터 불러오기 : for in문 : 객체에서 사용(배열에서도 가능)

{
    document.write("*** 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]);
    }
}

결과보기

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

{
    document.write("*** 10. 배열 : 데이터 불러오기 : map() ***")

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

    //num.map(function){};
    num.map((el)=>{
        document.write(el);
        console.log(el);
    });

    num.map((element, index, array)=>{
        document.write(element);
        document.write(index);
        document.write(array);
    })
}

결과보기

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

{
    document.write("*** 11. 배열 : 데이터 불러오기 : 펼침 연산자 ***")

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

    document.write(arr);

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

    document.write(...arr);
}

결과보기

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

{
    document.write("*** 12. 객체 : 데이터 불러오기 : 기본 ***")

    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['b']);
    document.write(obj['c']);
}

결과보기

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

{
    document.write("*** 13. 객체 : 데이터 불러오기 : Object ***")

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

    document.write(Object.keys(obj));
    document.write(Object.values(obj));
    document.write(Object.entries(obj));
}

결과보기

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

{
    document.write("*** 14. 객체 : 데이터 불러오기 : 변수 ***")

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

    document.write(name1);
    document.write(name2);
    document.write(name3);
}

결과보기

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

{
    document.write("*** 15. 객체 : 데이터 불러오기 : for in문 ***")

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

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

결과보기

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

{
    document.write("*** 16. 객체 : 데이터 불러오기 : map() ***");

    const obj = [
        {a:100, b:200, c:"javascript1"},
        {a:300, b:400, c:"javascript2"},
        {a:500, b:600, c:"javascript3"},
    ];

    document.write(obj[0].a);
    document.write(obj[0].b);
    document.write(obj[0].c);
    document.write(obj[1].a);
    document.write(obj[1].b);
    document.write(obj[1].c);
    document.write(obj[2].a);
    document.write(obj[2].b);
    document.write(obj[2].c);

    //obj.map(function(el){});
    //obj.map((el)=>{});
    //obj.map(el=>{});

    obj.map(el=>{
        document.write(el.a);
        document.write(el.b);
        document.write(el.c);
    })
}

결과보기

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

{
    document.write("*** 17. 객체 : 데이터 불러오기 : 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('100'));
    document.write('a' in obj);
    document.write('b' in obj);
    document.write('c' in obj);
    document.write('100' in obj);
}

결과보기

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

{
    document.write("*** 18. 객체 : 데이터 불러오기 : 펼침연산자 - 복사 ***");

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

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

결과보기

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

{
    document.write("*** 19. 객체 : 데이터 불러오기 : 펼침연산자 - 추가 ***");

    const obj = {
        a: 100,
        b: 200,
        c:"javascript",
    }
    const spread = {...obj, d:"jquery"};

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

결과보기

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

{
    document.write("*** 20. 객체 : 데이터 불러오기 : 펼침연산자 - 결합 ***");

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

결과보기

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

{
    document.write("*** 21. 객체 : 데이터 불러오기 : 비구조화 할당 ***");

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

    const { a, b, c } = obj;

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

결과보기

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

{
    document.write("*** 22. 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장 ***");

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

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

    document.write(name1);
    document.write(name2);
    document.write(name3);
}

결과보기