스프레드 연산자는 배열, 객체, 문자열과 같은 이터러블 객체들을 개별 요소로 펼칠 수 있다.
배열에서의 활용
배열 병합
concat 메소드를 사용하지 않고 간결하게 배열을 병합할 수 있다.
var part = [2, 3, 4];
var arr= [1, ...part, 5, 6, 7];
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]배열 복사
slice나 map 메소드를 사용하지 않고 배열을 복사할 수 있다.
var arr1 = [1, 2, 3];
var arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]복사한 배열을 수정해도 기존 배열을 유지된다.
Shallow Copy vs Deep Copy
얕은 복사
참조형 데이터 타입인 배열과 객체가 새로운 변수에 할당할 경우 값이 아닌 참조 주소를 공유하기 때문에 동일한 결과를 보여준다. 이를 얕은 복사라 한다.
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]깊은 복사
참조 주소를 공유하지 않고 새로운 주소을 갖게 되는 것을 말한다.
스프레드 연산자는 깊은 복사를 하는 것일까?
var arr1 = [[1], [2], [3]];
var arr2 = [...arr1];
arr2[0][0] = 10;
console.log(arr1); // [[10], [2], [1]]
console.log(arr2); // [[10], [2], [1]]1차원까지만 깊은 복사를 수행한다. 다차원에서는 적합하지 않다.
진짜 깊은 복사를 하기 위해서는
- 전체 깊이까지 복사하는 재귀 함수를 구현하거나
JSON.stringify함수를 이용해서 참조를 끊었다가 다시 Object로 변환하거나- 라이브러리를 이용해야 한다.
객체에서의 활용
객체 복사
배열과 마찬가지로 복사가 가능하다.
var obj1 = { name: 'sloth', age: 23 };
var obj2 = { ...obj1 };
console.log(obj2); // { name: 'sloth', age: 23 }프로퍼티를 덮어쓰게 하여 객체를 업데이트 할 수 있다.
var obj1 = { name: 'sloth', age: 23, gender: 'male'};
var obj2 = { name: 'pig', age: 22 };
var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // {name: 'pig', age: 22, gender: 'male'} 새로운 객체를 만들지 않고 기존 객체에 덮어쓰고 싶다면 Object.assign 메소드를 사용하면 된다.
Object.assign 메소드
Object.assign(target, sources)- source object는 target object에 병합된다.
- target object가 리턴된다.
var obj1 = { name: 'sloth', age: 23, gender: 'male'};
var obj2 = { name: 'pig', age: 22 };
Object.assign(obj1, obj2)
console.log(obj1); // {name: 'pig', age: 22, gender: 'male'}obj1에 덮어쓰인 것을 볼 수 있다.
함수에서의 활용
인자로 배열을 넣어줄 때
apply 메소드를 사용하지 않고 배열을 바로 인자로 넣어줄 수 있다.
var numbers = [5, 3, 2, 7];
Math.min(...numbers); // 2나머지 매개변수 ≠ 스프레드 연산자
함수의 마지막 매개변수 앞에 ... 를 붙이면 모든 후속 매개변수를 배열로 만들어준다.
function Func(a, b, ...moreArgs) {
console.log(a); // 1
console.log(b); // 2
console.log(moreArgs); // [3, 4, 5, 6]
}
Func(1, 2, 3, 4, 5, 6);나머지 매개변수 vs arguments
- arguments는 유사배열인 반면 나머지 매개변수는 Array 인스턴스이므로 배열 메소드를 사용할 수 있다.
- 나머지 매개변수는 후속 매개변수만 배열에 포함한다. → 직접 정의한 매개변수는 포함하지 않는다.
