[JS] 객체 환산 연산자란? (...)

객체 환산 연산자란? (...)

• 식별자 앞에 붙어서 배열 혹은 문자열 등 iterable 한 객체의 요소를 전개 할 수 있는 연산자

const arr = [1, 2, 3, 4, 5];
const str = 'Hello World!';

console.log(...arr); // 1 2 3 4 5
console.log(...str); // H e l l o   W o r l d !

 

 간단하게 배열의 복사 및 합치기도 가능

 

const arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1;

const sArr1 = [1, 2, 3, 4, 5];
let sArr2 = [...sArr1];

arr2[0] = 0;
sArr2[0] = 0;

console.log(...arr1); // 0 2 3 4 5
console.log(...arr2); // 0 2 3 4 5
console.log(...sArr1); // 1 2 3 4 5
console.log(...sArr2); // 0 2 3 4 5

// apply 함수 대체로도 사용 가능
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

// 이렇게 date 상태로도 만들어 줄 수 있다.
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);
//Thu Jan 01 1970 00:00:00 GMT+0900 (한국 표준시)

// 배열의 복사
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];
arr1 = [...arr2, ...arr1];

console.log(...arr3); // 1 2 3 4 5 6
console.log(...arr1); // 4 5 6 1 2 3

• 배열은 기본적으로 참조형 타입이므로, 단순히 해당 배열을 가리켜서 복사하게되면 얕은 복사를 해서 원본 배열이 조작될 우려가 있다. 하지만 객체확산 연산자를 이용하면 깊은 복사를 하므로 원본 배열이 손상되지 않는다.
• 1차원 배열만 가능하고 다차원 배열에서는 깊은 복사를 보장할 수 없음