Spread operator: unshift보단 전개연산자를 쓰자!

배열에 원소를 추가할 때 unshift를 쓰곤 한다.

arr = [2, 3, 4]
arr.unshift(1)
arr.unshift(0)

console.log(arr) // [0, 1, 2, 3, 4]

그러나 unshift는 다음과 같이 배열의 값을 직접 참조하여 원본 배열에 변형을 일으키는데,

불변성의 이슈에서나 성능 상의 이유에서나 좋지 못하다.

arr = [2, 3, 4]
// 0: 2, 1: 3, 2: 4

arr.unshift(1)
// 0: 1, 1: 2, 2: 3, 3: 4

arr.unshift(0)
// 0: 0, 1: 1, 2: 2, 3: 3, 4: 4

보시다시피 배열의 원소와 인덱스의 연결이 전부 끊어지고 새로운 값이 할당된다.

중간에 새로운 원소가 끼어들거나, 최악의 경우 첫 번째에 새로운 원소가 끼어들 경우 나머지 원소들에 대한 연산도 모두 해줘야하므로

성능에서 문제가 발생할 수 밖에 없다.

 

그러나 전개연산자를 이용하면 불변성, 성능 이슈를 모두 잡을 수 있다.

arr = [2, 3, 4]
new_arr = [0, 1, ...arr]

console.log(new_arr) // [0, 1, 2, 3, 4]

전개연산자는 얕은 복사를 이용하기 때문에

다음과 같이 arr의 메모리를 참조하여 원본배열의 변형없이,

그리고 unshift과 같이 불필요한 연산없이 한 번의 선언으로 원하는 배열을 생성할 수 있다.