35.1 함수 호출문의 인수 목록에서 사용하는 경우
스프레드 문법이 제공되기 이전에 배열을 펼쳐서 제공하기 위해서 Function.prototype.apply를 사용했습니다. 하지만 이를 스프레드 문법 사용시 간결ㅎ해지고, 가독성이 좋아집니다.
var arr = [1, 2, 3];
var max = Math.max.apply(null, arr); // 3
const max = Math.max(...arr); // 3
JavaScript
복사
35.2 배열 리터럴 내부에서 사용하는 경우
35.2.1 concat
2개를 하나로 합칠 경우 concat 메서드를 사용해야 합니다.
하지만 스프레드 문법으로도 메서드를 사용하지 않고 합칠 수 있습니다.
var arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]
const arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4];
JavaScript
복사
35.2.2 splice
배열의 중간에 다른 배열 요소들을 추가하거나 제거하려면 splice를 사용하는데, 이때 세번재 인수로 배열을 전달하면 배열 자체가 추가됩니다.
var arr1 = [1, 4];
var arr2 = [2, 3];
arr1.splice(1, 0, arr2);
console.log(arr1); // [1, [2,3], 4]
Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));
console.log(arr1); // [1, 2, 3, 4]
arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]
JavaScript
복사
35.2.3 배열 복사
slice 메서드를 통해서 배열을 복사합니다. 이 스프레드 문법을 통해 간결하게 만들 수 있습니다.
var origin = [1, 2];
var copy = origin.slice();
console.log(copy); // [1,2]
console.log(copy === origin); // false
const copy2 = [...origin];
console.log(copy2); // [1, 2]
console.log(copy2 === origin); // false
JavaScript
복사
이때 얕은 복사를 통해 새로운 복사본을 만듭니다.
35.2.4 이터러블을 배열로 변환
이터러블을 배열로 변환하려면 apply나 call 메서드를 사용하여 slice 메서드를 호출해야합니다.
function sum(){
// 이터러블이면서 유사 배열 객체인 arguments를 배열로 변호나
var args = Array.prototype.slice.call(arguments);
return args.reduce(function (pre, cur) {
return pre + cur;
}, 0);
}
console.log(sum(1, 2, 3)); // 6
function sum(){
return [...arguments].reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3)); // 6
JavaScript
복사
단, 이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없습니다.
const arrayLike = {
0: 1,
1, 2,
2: 3,
length: 3
}
const arr = [...arrayLike];
// TypeError
JavaScript
복사
이터러블이 아닌 유사 배열 객체를 배열로 변경하려면 ES6에서 도입된 Array.from 메서드를 사용해야 합니다.
35.3 객체 리터럴 내부에서 사용하는 경우
스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법 사용을 허가합니다.
const obj = { x: 1, y: 2};
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2 }
console.log(obj === copy); // false
const merged = { x: 1, y: 2, ...{ a: 3, b: 4} };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 };
JavaScript
복사
이전에는 Object.assign 메서드를 사용하여 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경 또는 추가했습니다.
const merged = Object.assign({}, { x: 1, y: 2}, { y: 10, z: 3});
console.log(merged);// { x: 1, y: 10, z: 3 }
const changed = Object.assign({}, { x: 1, y: 2 }, { y: 100 });
console.log(changed); // { x: 1, y: 100 }
const added = Object.assign({}, { x: 1, y: 2}, { z: 0 }
console.log(added); // { x: 1, y: 2, z: 0 }
JavaScript
복사
스프레드 프로퍼티는 Object.,assign 메서드를 대체할 수 있는 간편한 문법입니다.
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3} };
console.log(merged); // { x: 1, y: 10, z: 3 }
const changed = { ...{ x: 1, y: 2 }, y: 100 };
console.log(changed); // { x: 1, y: 100 }
const added = { ...{ x: 1, y: 2 }, z: 0 };
console.log(added); // { x: 1, y: 2, z: 0 }
JavaScript
복사
|