JavaScript - 펼침연산자

 

펼침 연산자란

간단히 말해서, 배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다.
마침표 세 개(...)로 표시한다. 펼침 연산자는 단독으로 쓰일 수 없음에 주의해야 합니다.
배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야 합니다.
변수에 담게 되면 에러가 발생합니다.

펼침 연산자의 가장 큰 장점은 조작(mutation)이나 부수 효과(side effect)로 인한 문제를 피할 수 있다는 점이 있습니다.

예시

const class1 = [1, 2, 3];
const a = ...class2; // X
const a = [...class2]; // O

펼침연산자 복사 예제

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

결과 확인하기

펼침연산자 추가 예제

//추가의 의미
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;);

결과 확인하기

펼침연산자 결합 예제

//결합의 의미
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;);

결과 확인하기