반응형
Spread / Rest Syntax
// 전개 연산자
// 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용합니다.
// spread syntax는 원본배열을 변경하지 않습니다. (immutable)
// 전개 연산자를 이용한 복사에는 1차원에서만 유효합니다.
// 배열을 풀어서 인자로 전달
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers); // 6// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
let arr3 = [...arr1, ...arr2];
console.log(arr1) // [1, 2, 3]
console.log(arr3) // [1, 2, 3, 4, 5]
const fruits = ['apple', 'banana'];
const favorite = ['rice', 'meat', ...fruits, 'bibimbap'];
console.log(favorite); // [ 'rice', 'meat', 'apple', 'banana', 'bibimbap' ]반응형
// 배열 복사
// example 1 // spread syntax는 원본배열을 변경하지 않는다. (immutable)
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]
// example 2 // 2차원 복사
const arr3 = [1, 2, 3];
const arr4 = [4, 5];
let arr5 = arr3.push(arr4);
console.log(arr3) // [1, 2, 3, [4, 5]]
console.log(arr5) // [1, 2, 3, [4, 5]]
// example 3 // push는 원본배열을 변경한다. (mutable)
const arr6 = [1, 2, 3];
const arr7 = [4, 5];
let arr8 = arr6.push(...arr7);
console.log(arr6) // [1, 2, 3, 4, 5]
console.log(arr8) // [1, 2, 3, 4, 5]
// example 4
const arr9 = [4, 5, [6, 7]];
const arr10 = [1, 2, 3, ...arr9];
console.log(arr10); // [1, 2, 3, 4, 5, [6, 7]]// 객체 복사
// 두 객체가 같은 속성(key)을 갖는 경우, 값(value)이 덮어쓰기 된다.
// 겹치지 않는다면 객체에 추가한다.
let obj1 = { alphabet: 'abc', x: 10 };
let obj2 = { alphabet: 'def', y: 20 };
let clonedObj = { ...obj1 }; // { alphabet: 'abc', x: 10 }
let mergedObj = { ...obj1, ...obj2 }; // { alphabet: 'def', x: 10, y: 20 }
Spread / Rest Syntax(1)를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
