펼침연산자 / 비구조화 / 객체구조분해에 대해 araboza

펼침연산자 - 복사

펼침연산자를 사용해 데이터를 복사합니다!

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

    const name1 = obj.a;            //객체의 a키 값을 상수 name1에 저장
    const name2 = obj.b;            //객체의 b키 값을 상수 name2에 저장
    const name3 = obj.c;            //객체의 c키 값을 상수 name3에 저장

    document.write(name1);          //상수 name1 출력
    document.write(name2);          //상수 name2 출력
    document.write(name3);          //상수 name3 출력
}

결과보기

100200javascript

펼침연산자-추가

펼침연산자를 사용해 데이터를 추가합니다!

//추가의 의미
let result = document.querySelector(“.sample20_result”);
const obj = {
    a: 100,
    b: 200,
    c: “javascript”,
};

const spread = { ...obj, d: “jquery” };
result.innerHTML += spread.a;
result.innerHTML += spread.b;
result.innerHTML += spread.c;
result.innerHTML += spread.d;

결과보기

100
200
javascript

21. 펼침연산자 결합

펼침연산자를 사용해 데이터를 결합합니다.

//결합의 의미
let result = document.querySelector(“.sample21_result”);
const objA = {
    a: 100,
    b: 200,
};
const objB = {
    c: “javascript”,
    d: “jquery”,
};
const spread = { ...objA, ...objB };
result.innerHTML += spread.a;
result.innerHTML += spread.b;
result.innerHTML += spread.c;
result.innerHTML += spread.d;

결과보기

100
200
javascript

22. 비구조화 할당

변수에 객체를 비구조화 할당시켜줍니다!

let result = document.querySelector(“.sample22_result”);
const obj = {
    a: 100,
    b: 200,
    c: “javascript”,
};
const { a, b, c } = obj;
result.innerHTML += a;
result.innerHTML += b;
result.innerHTML += 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