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

변수에 값을 불러옵니다.

let x = 100, 
         y = 200, 
         z = "javascript";
    
    document.write(x);
    document.write(y);
    document.write(z);
결과보기
100
200
javascript

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

상수에 값을 불러옵니다. 상수는 const라고 표기합니다.

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차 배열

배열 속에 배열이 있는 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.length);
결과보기
3

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(초기값, 조건식, 증감식)
    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];
    
    document.write(num[0]);
    document.write(num[1]);
    document.write(num[2]);
    document.write(num[3]);
    document.write(num[4]);
    
    //for문
    for( 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(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    });
결과보기
100 200 300 400 500
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 num = [100, 200, 300, 400, 500];
    
    for( let i of num ){
        document.write(i);
    }
결과보기
100 200 300 400 500

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

배열 데이터 값을 반복문을 사용하여 가져옵니다.

const num = [100, 200, 300, 400, 500];
    
    //map()
    num.map(function(el){
        document.write(el);
    });
    
    //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)
        document.write(num[0],num[1],num[2],num[3],num[4]);
        document.write(...num);
    }
결과보기
100200300400500
100,200,300,400,500
100200300400500

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

{
    let a, b, c;
    [a, b, c] = [100, 200, "j"];
    document.write(a);
    document.write(b);
    document.write(c);
    }
결과보기
100
200
j

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

{
     const obj = {
     a: 100,
     b: 200,
     c: "j",
     }
     document.write(obj.a);
     document.write(obj.b);
     document.write(obj.c);
     }
결과보기
100
200
j

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

{
    const obj = {
    a: 100,
    b: 200,
    c: "j"
    }
    document.write(Object.keys(obj));
    document.write(Object.values(obj));
    document.write(Object.entries(obj)); //[key, value] 쌍의 배열을 반환
    }
결과보기
a, b, c
100, 200, j
a, 100, b, 200, c, j

const obj = { foo: 'bar', baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

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

{
    const obj = {
    a: 100,
    b: 200,
    c: "j"
    }
    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;
    
    document.write(name1);
    document.write(name2);
    document.write(name3);
    
    }
결과보기
100
200
j

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

const obj = {
    a: 100,
    b: 200,
    c: "j"
    }
    for (let key in obj) {
    document.write(obj[key]);
    }
결과보기
100
200
j

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

{
const obj = [
{ a: 100, b: 200, c: "j" }
];
obj.map((el)) => {
document.write(el.a) //el객체의 a키값
document.write(el.b);
document.write(el.c);
}
}
결과보기
100
200
j

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

hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값(true,false)을 반환한다. 

{
    const obj = {
    a: 100,
    b: 200,
    c: "j"
    }
    document.write(obj.hasOwnproperty("a"));//true
    document.write(obj.hasOwnproperty("b"));//true
    document.write(obj.hasOwnproperty("c"));//true
    document.write(obj.hasOwnproperty("d"));//false
    
    document.write("a" in obj);//true
    document.write("b" in obj);//true
    document.write("c" in obj);//true
    document.write("d" in obj);//false
    
    }
결과보기
truetruetruefalse
truetruetruefalse

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

{const obj = {
   a: 100,
   b: 200,
   c: "javascript"
   // document.write(obj.b);
 }
 const spread = {...obj}
 document.spread(obj.a);
 document.spread(obj.b);
 document.spread(obj.c);
}
결과보기
100
200
javascript

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

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

const spread = { ...obj, d: "jquery" } 

document.write(spread.d)
}
결과보기
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);
}
결과보기
100
200
javascript

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:"c"
}
const{a:name1, b:name2, c:name3} = obj;
document.write(name1);
document.write(name2);
document.write(name3);

}
결과보기
100
200
c