스프레드 연산자(spread operator)

다들 JavaScript 사용하시면서 스프레드 연산자를 자주 사용하시게 될것이라고 생각합니다. 스프레드 연산자 덕분에 애를 좀 먹었는데, 그 경험을 기반으로 글을 써볼려고 합니다 :)

스프레드 연산자란

JavaScript ES6문법에 추가된 내용입니다. JS를 사용하다 보면 되게 많이 접하게 되는 문법이고 유용하게 쓰고 있습니다. 객체를 복사할 때, 혹은 배열 객체를 합치거나 할때 주로 사용합니다.

const data = {
	dog: "개",
	cat: "고양이",
	bird: "새"
};

const { dog, ...animals } = data;

console.log(animals); // 	{cat: "고양이", bird: "새"}

이런식으로도 사용할 수 있죠.

정말 편하고 좋은 문법이지만 스프레드 연산자가 1depth 깊은 복사인걸 알고 계셨나요?

const testOneObj = {
  a: "안녕하세요",
}

const testOneCopyObj = {
  ...testOneObj,
}

console.log(testOneObj.a === testOneCopyObj.a) // true

console.log(testOneObj === testOneCopyObj) // false

이러면 기존에 있던 얕은 복사에서 일어났던 문제들이 발생할 수 있습니다. 저는 렌더링 관련해서 값이 업데이트가 안되는 이슈가 있었는데, One Depth 복사로 일어난 이슈였습니다.

또한 큰 배열이 있다고 가정했을 때 위에서 말한것처럼 one Depth 복사이기 때문에 큰 배열을 복제할 경우 요소들이 모든 얕은 복사를 이루어 새로운 객체, 혹은 배열이 새로 생성됩니다. 그럼 메모리 사용량이 증가하고 성능에 영향을 줄 가능성도 적지 않습니다. 큰 배열을 복제할 경우 Array.prototype.slice() 혹은 다른 방법을 추천 드립니다.

위 부분을 고려하여 다들 잘 주의해서 사용하시길 !

오늘의 포스팅은 여기서 마치도록 하겠습니다 :)