제가 공부한 내용을 나름의 해석을 곁들여 서술하였습니다.
완벽한 내용이 아니니 오류가 있을수도 있습니다.
틀린 사항에 대한 지적은 환영입니다. 🙂
왜 쓰는가
배열이나 객체를 변수에 복사하려고 한다면 보통 직관적으로 생각했을때는 이렇게 하는게 정상적으로 보이는데요.
var 배열 = [1, 2, 3,];
var 객체 = { a: 1, b: 2 };
var 배열복사 = 배열;
var 객체복사 = 객체;그런데 이 방법에는 한가지 단점이 있는데 원본 배열과 객체만 수정해도 복사한 배열과 객체의 값까지도 수정됩니다.
왜 그렇게 동작하냐면 배열(Array)과 객체(Object)는 레퍼런스 데이터 타입(Reference data type)입니다.
레퍼런스 데이터 타입은 변수에 할당될 때 값이 직접 변수에 저장되는 것이 아니라 값이 저장된 메모리 주소(참조)가 변수에 할당되는 데이터 타입이에요.
저 경우에는 [1, 2, 3]과 { a: 1, b: 2 }라는 데이터가 저장된 메모리 주소가 각각 배열, 객체 에 할당되어 있고 배열복사, 객체복사는 그 할당된 값을 공유하게 되는 것이죠.
그래서 복사를 하더라도 각각 독립적인 값을 가지도록 복사하려면 스프레드 오퍼레이터(Spread Operator)를 사용해서 복사하면 되는데 이런 경우 Deep copy한다고 표현하죠.
사용법
스프레드 오퍼레이터를 사용 할 때는 앞에 ...을 붙이면 됩니다.
var 배열 = [1, 2, 3];
var 배열복사 = [...배열];
배열[3] = 4;
console.log(배열);
// [1, 2, 3, 4]
console.log(배열복사);
// [1, 2, 3]
var 객체 = { a: 1, b: 2 };
var 객체복사 = { ...객체};
객체.c = 3;
console.log(객체);
// { a: 1, b: 2, c: 3 }
console.log(객체복사);
// { a: 1, b: 2 }스프레드 오퍼레이터는 자바스크립트에서 iterable한(반복,순회 가능한) 객체를 펼쳐서 개별 요소로 분리하거나, 여러 요소를 하나의 배열이나 객체로 결합할 때 사용됩니다.
반복가능한 경우는 문자열도 포함됩니다.
var 문자 = 'hello';
console.log(문자);
// hello
console.log(...문자);
// h e l l o 단순한 복사뿐만 아니라 여러가지 배열을 합칠 때도 유용하게 사용 가능합니다.
var a = [1, 2, 3];
var b = [4, 5]
var c = [...a, ...b];
console.log(c)
// [1, 2, 3, 4, 5]객체도 마찬가지
var 객체 = { a: 1, b: 2 };
var 객체복사 = { ...객체, c: 3 };
console.log(객체복사);
// { a: 1, b: 2, c: 3 }그런데 객체를 복사하다가 값 중복이 일어나면 어떻게 될까요?
var 오브젝트 = { a: 1, b: 2 };
var 오브젝트2 = { a: 2, ...오브젝트 };
var 오브젝트3 = { ...오브젝트, a: 2};
console.log(오브젝트2);
// { a: 1, b: 2 }
console.log(오브젝트3);
// { a: 2, b: 2 }제일 마지막으로 입력된 값이 출력됩니다.
정리
ES6 버전에서 도입된 스프레드 오퍼레이터에 대해서 알아봤습니다.
앞으로 데이터의 괄호를 부수고 싶으실때는 ... 하나로 자유롭게 박살내세요. 😉
