Top
for 문 연산자

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

{
    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]);
    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], "<br>");
}

결과보기

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>");
    };
    //forEach()
    num.forEach(function(el){
        document.write(el, "<br>");
    });
    //forEach(element, index, array)// 매개변수 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 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); // for of는 배열에서 쓰기 편한 방법.
    };
}

결과보기

100 200 300 400 500

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

{
    const num = [100, 200, 300, 400, 500];
    
    for( let i in num ){
        document.write(i); // index를 불러온다. for in은 객체에서 쓰기 편한 방법.
    };
    for( let i in num ){
        document.write(num[i]); //for of 처럼 불러온다.
    };
}

결과보기

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. 배열 : 데이터 불러오기 : 펼침 연산자(Spread Operator)

{
    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]); //쉼표 없이 각자의 데이터로 출력

    document.write(...num); //100200300400500       
}

결과보기

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
javascript

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

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

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
    document.write(['a']); //죽은 문법.
    document.write(['b']);
    document.write(['c']);
    document.write(obj['a']);
    document.write(obj['b']);
    document.write(obj['c']);        
}

결과보기

100
200
javascript
a
b
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: "javascript"
    };

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

결과보기

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'));//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
true
true
false
true

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"};//펼침 연산자에 obj.d를 추가

    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