데이터 불러오기

변수, 상수, 배열, 객체 → 출력

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

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

    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
}

상수 : 데이터 변경X : 데이터 추가X

17. 상수 (const)

{
    const x = 100, y = 200, z = "javascript"

    document.write(x); //100
    document.write(y); //200
    document.write(z); //javascript
}

19. 배열 : 2차 배열

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

    document.write(arr[0]);    //100
    document.write(arr[1]);    //200
    document.write(arr[2][0]); //javascript
}

20. 배열 : 개수 구하기 (.length)

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

    document.write(arr.length); //3
}

*21. 배열 : for문

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

    for(let i=0; i>arr.length; i++){
        document.write(arr[i]);
    }
    //100
    //200
    //javascript
}

*22. 배열 : forEach문 / each()

{
    const arr = [100, 200, "javascript"];
    
    arr.forEach(finction(element){         //*콜백함수
        document.write(element);
    });

    arr.forEach(finction(element, index, array){
        document.write(element);        //100
                                        //200
                                        //javascript
        document.write(index);          //100
                                        //0
        document.write(array);          //100,200,javascript
                                        //200
                                        //1
                                        //100,200,javascript
                                        //javascript
                                        //2
                                        //100,200,javascript
    });
}

배열 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행

매개변수	의미
element	배열의 요소
index	배열 요소의 인덱스
array	forEach를 호출한 배열

*23. 배열 : for in

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

    for(let i in arr){
        document.write(arr[i]);
    }
    //100
    //200
    //javascript
}

*24. 배열 : for of

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

    for(let i of arr){
        document.write(i);
    }
    //100
    //200
    //javascript
}

*25. 배열 : map();

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

    arr.map((el) => {
        document.write(el);
    });
    //100
    //200
    //javascript
}

map = 배열을 변형시키거나 요소를 재정렬해주는 메서드

ㄴ모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환

*중요 es5,6차이점 es6이 무엇인가 (function생략하고 => 로)

26. 배열 : 펼침 연산자 (...)

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

    document.write(arr);                        //100,200,javascript
    document.write(arr[0], arr[1], arr[2]);     //100200javascript
    document.write(...arr);                     //100200javascript
}

27. 배열 : 배열 구조 분해 할당

{    
    let a,b,c;
    [a,b,c] = [100, 200, "javascript"];

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

28. 객체 : 데이터 불러오기

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    
    document.write(obj.a);    //100
    document.write(obj.b);    //200
    document.write(obj.c);    //javascript
    //죽은문법
    document.write(obj['a']); //100
    document.write(obj['b']); //200
    document.write(obj['c']); //javascript
}

*29. 객체 : 키와 값 : Object.keys/values/entries

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    
    document.write(Object.keys(obj));    //a,b,c
    document.write(Object.values(obj));  //100,200,javascript
    document.write(Object.entries(obj)); //a,100,b,200,c,javascript
}

호출문	의미
Object.keys	객체의 키만 담은 배열을 반환
Object.values	객체의 값만 담은 배열을 반환
Object.entries	[키, 값] 쌍을 담은 배열을 반환

30. 객체 : 변수

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const name1 = obj.a;
    const name1 = obj.b;
    const name1 = obj.c;
    
    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javascript
}

*31. 객체 : for in

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

    for(let i in obj){
        document.write(obj[i]);
    }
    //100
    //200
    //javascript
}

*32. 객체 : map();

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

    obj.map(el => {
        document.write(el.a);
    })
    //100
    //200
    //javascript
}

*33. 객체 : hasOwnProperty()

has 검색기능

{
    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("100"));      //false
    document.write("a" in obj);                     //true
    document.write("b" in obj);                     //true
    document.write("c" in obj);                     //true
    document.write("100" in obj);                   //false
}

34. 객체 : 펼침 연산자 : 복사

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

*35.객체 : 펼침 연산자 : 추가

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d: "jquery"}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
    document.write(spread.d); //jquery
}

*36. 객체 : 펼침 연산자 : 결합

{
    const objA = {
        a: 100,
        b: 200
    }
    const objB = {
        c: "javascript",
        d: "jquery"
    }
    const spread = {...objA, ...objB}

    document.write(spread.a); //100
    document.write(spread.b); //200
    document.write(spread.c); //javascript
    document.write(spread.d); //jquery
}

*37. 객체 : 객체 구조 분해 할당 (=비구조화 할당)

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

    document.write(a); //100
    document.write(b); //200
    document.write(c); //javascript
}

*38. 객체 : 객체 구조 분해 할당 : 별도 이름 저장

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

    document.write(name1); //100
    document.write(name2); //200
    document.write(name3); //javascript
}