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

변수에 데이터를 불러옵니다. 

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

    let 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 arr = [100, 200, "javascript"];

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}
결과보기
100
200
javascript

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

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2][0]);
    document.write(arr[2][1]);
}
결과보기
100
200
javascript
jquery

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

배열의 갯수를 출력하며 length를 사용합니다. 

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

    document.write(arr.length);
}
결과보기
3

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

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

    // document.write(arr[0]);
    // document.write(arr[1]);
    // document.write(arr[2]);
    // document.write(arr[3]);
    // document.write(arr[4]);
    // document.write(arr[5]);
    // document.write(arr[6]);
    // document.write(arr[7]);
    // document.write(arr[8]);

    // 위처럼 반복하기 귀찮아 탄생한 방법

    //for(초기값, 조건식, 증감식)
    /* 
            
    for(let i = 0; i < 9; i++){
        document.write(arr[i]);
    }

    */

    // 숫자 대신 arr.length를 넣으면 데이터의 갯수가 바뀌어도 따로 변경해줄 필요 X.
    for(let i = 0; i < arr.length; i++){
        document.write(arr[i]);
    }
}
결과보기
100
200
300
400
500
600
700
800
900

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

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

    //for문을 이용해서 출력
    for(let i = 0; i < num.length; i++){
        document.write(num[i]);
    }

    //forEach()를 이용해서 출력
    num.forEach(function(el){
        document.write(el);
    });

    //forEach() 3가지 인자(파라미터)값
    num.forEach(function(element, index, array){
        document.write(element);    // 배열 안의 값 하나 출력
        document.write(index);      // 배열의 번호 출력
        document.write(array);      // 배열 안의 데이터 전부 출력
    });
}
결과보기
100
200
300
400
500

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

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

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

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

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

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

    for(let i in arr){
        // document.write(i);
        document.write(arr[i]);
    }
}
결과보기
100
200
300
400
500

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

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

    //forEach

    arr.forEach(function(el){
        document.write(el);
        console.log(el);    // Chrome에서 검사(F12)에 들어간 후 console 창에서만 확인 가능
    });

    arr.forEach(function(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    });

    //map() , forEach문과 큰 차이 없음

    arr.map(function(el){
        document.write(el);
        console.log(el);
    });

    arr.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);   // num을 한꺼번에 부르면 쉼표有
    // document.write(num[0],num[1],num[2],num[3],num[4]);     // 따로 부르면 쉼표無
    
    // 펼침연산자
    document.write(...num);     // 이렇게 쓰면 num 데이터를 쉼표없이 모두 부를 수 있음.
}
결과보기
100
200
300
400
500

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

{
    let a, b, c;    // 값 없이 변수만 선언 - 이것만으로는 콘솔창에서 undefined라고 뜸
    
    [a, b, c] = [100, 200, "javascript"];   // 개별 변수에 배열을 저장하는 방식

    // 출력 시 개별 변수명 쓸 것
    document.write(a); 
    document.write(b);
    document.write(c);
}
결과보기
100
200
javascript

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

객체를 불러오는 가장 기본이 되는 방법입니다. 

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}
결과보기
100
200
javascript

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

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

    document.write(Object.keys(obj));   // key값 (속성명) 부르기
    document.write(Object.values(obj)); // obj값 전체(쉼표有) 부르기
    document.write(Object.entries(obj)); // key값 values 전부 부르기
}
결과보기
a
b
c

100,200,javascript

a,100,b,200,c,javascript

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

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

    // 객체 a, b, c를 다른 이름을 가진(name1,2,3) 상수 const에 저장
    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    document.write(name1);
    document.write(name2);
    document.write(name3);
}
결과보기
100
200
javascript

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

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

    // for(let 요소값 in obj)
    for(let key in obj){
        document.write(obj[key]);
    }
}
결과보기
100
200
javascript

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

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

    // element, index, array를 e, i ,a로도 쓸 수 있음
    // element = el
    obj.map((el) => {
        document.write(el.a);
        document.write(el.b);
        document.write(el.c);
    });
}
결과보기
100
200
javascript

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

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

    // 데이터 출력이 아닌 true/false를 출력시킴
    // 데이터가 있으면 true, 없으면 false
    // document.write(obj.hasOwnProperty("a"));  // true
    // document.write(obj.hasOwnProperty("b"));  // true
    // document.write(obj.hasOwnProperty("c"));  // true
    // document.write(obj.hasOwnProperty("d"));  // d라는 객체는 없으므로 false

    // 약식(略式)
    document.write("a" in obj);
    document.write("b" in obj);
    document.write("c" in obj);
    document.write("d" in obj);
}
결과보기
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" }

    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",
        b: "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(name1);
    document.write(name2);
    document.write(name3);
}
결과보기
100
200
javascript