[TIL] 22.08.03

1. 스프레드 문법
2. 스프레드 프로퍼티

💡 스프레드 문법

• 장점 : ES5의 기존 방식보다 더 간결하고 가독성 좋게 표현할 수 있다.

✨ concat

• 두 개의 배열을 합칠 때

// ES5
let arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

// ES6
let arr = [...[1, 2], ...[3 ,4]];
console.log(arr); // [1, 2, 3, 4]

✨ splice

• 배열의 중간에 다른 배열 요소를 추가하고 싶을 때

// ES5
let arr1 = [1, 4];
let arr2 = [2, 3];

Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));
console.log(arr1); // [1, 2, 3, 4]

// ES6
let arr1 = [1, 4];
let arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

✨ slice

• 배열을 복사할 때

// ES5
let origin = [1, 2];
let copy = origin.slice();

console.log(copy); // [1, 2]
console.log(copy === origin); // false

// ES6
let origin = [1, 2];
let copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy === origin); // false

💡 스프레드 프로퍼티

• 스프레드 프로퍼티는 Object.assign 메서드를 대체할 수 있는 간편한 문법이다.

✨ 기본 사용법

const merged = { x: 1, y: 2, ...{ a: 3, b: 4}};
console.log(merged); // {x: 1, y: 2, a: 3, b: 4}

✨ 객체 병합

• 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.

const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, x: 3 } };
console.log(merged); // { x: 1, y: 10, z: 3 }

✨ 특정 프로퍼티 변경

const changed = { ... { x: 1, y: 2 }, y: 100 };
// changed = { ... { x: 1, y: 2 }, ... { y: 100 } }
console.log(changed); // { x: 1, y: 100 }

✨ 특정 프로퍼티 추가

const added = { ... { x: 1, y: 2 }, z: 0 };
// added = { ... { x: 1, y: 2 }, ...{ z: 0 } }
console.log(added)l // { x: 1, y: 2, z: 0 }

참고

• 스프레드 프로퍼티 이전에는 객체를 병합하거나 특정 프로퍼티를 변경, 추가할 때 Object.assign 메서드를 사용했다.

const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
console.log(merged); // {x: 1, y: 10, x: 3}