[JavaScript] 펼침 연산자: spread operator

펼침 연산자란?

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

const class1 = [1, 2, 3];

const a = ...class2; // X
const a = [...class2]; // O

 

펼침 연산자의 장점

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

 

또한, push(), splice(), concat() 등의 배열 메소드를 외울 필요 없이 간결하게 코드를 작성할 수 있다.

특히 위 메소드들은 원본 배열을 변경하는데, 펼침 연산자는 원본 배열을 변경하지 않는다는 점에서 이점을 가진다.

const class1 = [1, 2, 3];
const class2 = [4, 5, 6];

// concat()
const class3 = [...class1, ...class2];
console.log(class3); //  [ 1, 2, 3, 4, 5, 6 ]

// push()
const class4 = [...class1, 7];
console.log(class4); // [ 1, 2, 3, 7 ]

// splice()
const class5 = [...class1.slice(0, 2)];
console.log(class5); // [ 1, 2 ] 

이 외에도 함수의 매개변수에 값을 전달할 때도 펼침 연산자를 사용하여 코드를 편하게 관리할 수 있다.

아래는 펼침 연산자 대신 인덱싱을 통해 매개변수에 값을 전달하는 경우이다.

const student = ['John', 19, 'A+'];

function introduce(name, age, grade) {
    console.log(`${name}(${age}) - ${grade}`);
}

introduce(student[0], student[1], student[2]); // John(19) - A+

이 경우 원본 배열이 변경되면 코드 또한 함께 고쳐야 한다는 단점이 있다.

이를 펼침 연산자를 사용하면 다음과 같이 코드를 작성할 수 있다.

introduce(...student); // John(19) - A+

 

참고

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

자바스크립트 코딩의 기술(조 모건 저)