Top
for문 연산자

01. 변수 : 데이터 저장

{
    var x = 100;            
    var y = 200;
    var 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]);
    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]);
        document.write(i); // 01234
    }
}

결과보기

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( let i=0; i<num.length; i++) { 
        document.write(num[i], "<br>");
    } // 100 200 300 400 500

    //.forEach
    num.forEach(function(el){
        document.write(el);
    });  // 100 200 300 400 500

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

결과보기

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

//for문
100 200 300 400 500

//.forEach
100 200 300 400 500

//forEach( element, index, array)
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);
    });
}

결과보기

//map() 100 200 300 400 500

//map(element, index, array){}
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); // ... : 데이터값을 나열 해 불러 올 수 있다.
    
}

결과보기

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

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

{
    let a, b, c; 

    [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: "jajvascript"}

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
    
    //거의 안 쓰는 문법
    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)); 
    document.write(Object.values(obj)); 
    document.write(Object.entries(obj)); 
}

결과보기

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

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

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

    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 i in obj ){
        document.write(obj[i]);
    }
}

결과보기

100
200
javascript

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

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

    obj.map(function(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"}

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

    //해석: obj 안에 ()가 있는 지
    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", 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(name1);
    document.write(name2);
    document.write(name3);
}

결과보기

100
200
javascript