TypeScript 전개 연산자(Spread 문법)

전개 구문 (Spread Syntax)

 

전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로, 객체 혹은 배열들을 펼칠 수 있게 해 준다. 문법 자체는 간단하며, 그저 배열 혹은 객체 앞에 점 세 개를 붙여주면 된다.

 

// object
{...obj}
 
// array -1
[...arr]
// array -2
{...arr}

 

 

ES5 vs ES6 배열 문법

 

1. ES5 배열: concat method

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const finArr = arr1.concat(arr2, arr3);
console.log(finArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

2. ES6 배열: spread operator

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const finArr = [...arr1, ...arr2, ...arr3];
console.log(finArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

스프레드 오퍼레이터의 경우, 배열의 아무 곳에나 추가할 수 있다는 장점이 있다.

 

const arr = [3, 4];
const finArr = [1, 2, ...arr, 5, 6];
console.log(finArr); // [1, 2, 3, 4, 5, 6]

 

배열이 대상일 경우

 

const arr1 = ['teacher', 'doctor', 'nurse'];
const arr2 = [...arr1];

console.log(arr1); // ['teacher', 'doctor', 'nurse']
console.log(arr2); // ['teacher', 'doctor', 'nurse']

console.log(arr1 === arr2); // false

 

배열을 펼쳐 새로운 배열을 만들고 이 둘을 비교하면 false가 출력되는데, 이는 서로 다른 독립적인 배열이다.

 

const arr1 = ["teacher", "doctor", "nurse"];
const obj1 = {...arr1};

console.log(obj1); // {0: "teacher", 1: "doctor", 2: "nurse"};

 

또한 전개 연산자는 2차원 형태로 생성되지 않는다.

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(...arr2);

console.log(arr1); // [1, 2, 3, 4, 5]

 

Spread Operator Advantage 1 ) 기존 배열을 보존해야 할 때 유용하다.

 

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();

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

 

Spread Operator Advantage 2 ) 배열의 나머지 요소를 할당하기 수월하다.

 

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.llg(rest); // [3, 4, 5]

 

객체가 대상일 경우

 

const obj1 = {
    computer: 'MacBook',
    tablet: 'iPad'
}

const obj2 = {...obj1};

console.log(obj1); // {computer: "MacBook", tablet: "iPad"}
console.log(obj2); // {computer: "MacBook", tablet: "iPad"}

console.log(obj1 === obj2); // false

 

마찬가지로 복사한 객체는 주소값이 다른 독립적인 객체이다.

 

요컨데, "..."는 전개 연산자 혹은 나머지 매개변수로 사용된다. 함수 호출시 사용되면 배열을 목록으로 확장해주는 것은 전개 연산자, 함수 매개변수의 끝에 있으면 나머지 인수들을 배열로 모아주는 나머지 매개변수라고 요약이 가능할 것이다.