자바스크립트

01. 변수 : 데이터 불러오기
02. 상수 : 데이터 불러오기
03. 배열 : 데이터 불러오기
04. 배열 : 데이터 불러오기 : 2차 배열
05. 배열 : 데이터 불러오기 : 갯수 구하기
06. 배열 : 데이터 불러오기 : for()문
07. 배열 : 데이터 불러오기 : forEach()
08. 배열 : 데이터 불러오기 : for of
09. 배열 : 데이터 불러오기 : for in
10. 배열 : 데이터 불러오기 : map()
11. 배열 : 데이터 불러오기 : 펼침 연산자
12. 배열 : 데이터 불러오기 : 배열구조분해할당
13. 객체 : 데이터 불러오기 : 기본
14. 객체 : 데이터 불러오기 : Object
15. 객체 : 데이터 불러오기 : 변수
16. 객체 : 데이터 불러오기 : for in
17. 객체 : 데이터 불러오기 : map()
18. 객체 : 데이터 불러오기 : hasOwnProperty()
19. 객체 : 데이터 불러오기 : 펼침 연산자 - 복사
20. 객체 : 데이터 불러오기 : 펼침 연산자 - 추가
21. 객체 : 데이터 불러오기 : 펼침 연산자 - 결합
22. 객체 : 데이터 불러오기 : 비구조화 할당
23. 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장

for()문 연산자

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

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

결과보기

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

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)
    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 of num ){
        document.write(i);
    }

    for( let i in num ){
        documetn.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
    });

    //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]); 
    documenet.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 : "javascript"
    }

    document.write(obj.a, "<br>");
    document.write(obj.b, "<br>");
    document.write(obj.c, "<br>");
    document.write(obj['a'], "<br>");
    document.write(obj['b'], "<br>");
    document.write(obj['c'], "<br>");
}

결과보기

100
200
javascript

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, "<br>")
            document.write(el.b, "<br>")
            document.write(el.c, "<br>")
        });
    } 
}

결과보기

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('x'));
        document.write('a' in obj);
        document.write('b' in obj);
        document.write('c' in obj);
        document.write('y' in obj);
    }
}

결과보기

true
true
true
false
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