[Javascript] 스프레드 연산자(spread syntax)

생겨먹은 건 ... 이렇게 생긴 스프레드 연산자???
알아보자.

일단 MDN에서는 뭐라하냐면,

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

? 오.완.전.이.해.가.간.다.

쉬운 예시로 차근차근 뜯어 먹어보자.

const arr = [1, 2, 3, 4, 5];

console.log(...arr); // 1, 2, 3, 4, 5

스프레드 연산자(...)를 배열 arr 앞에 두어 적용시켰더니 배열 안에 있는 요소들이 전개되어 나왔다.
스프레드 연산자 는 spread, 말 그대로 전개와 연관된 연산자, syntax 이다.
그러니까 MDN 문서의 설명처럼 배열, 문자열같이 iterable한 녀석들을 까서 빼낸다(전개)한다는 뜻이지.
즉, 배열의 안으로 접근하지 않고 원소를 사용하게 된다는 뜻.

그럼,

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3, 4, 5]

위의 코드는 왜 배열이 나온 것일까?
찬찬히 흐름을 살펴보자면...
1. 변수 arr1에 담긴 배열이
2. 스프레드 연산자를 통해 전개된 후
3. 대괄호([ ])로 감싸져서 배열이 된 후
4. 변수 arr2에 할당됨.

쉽게 말해 까뒤집고 다시 싸 넣었다.

다음으로 배열 안으로 접근하지 않고 원소를 사용하게 된다는 성질을 활용한다면,
원본 배열에 영향을 주지 않고 배열을 복사할 수 있음.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr1); // [1, 2, 3]
console.log(arr3); // [1, 2, 3, 4, 5, 6]

Array.prototype.concat() 메서드와 같이 배열 복사에 유용하겠다.