Javascript - Spread 연산자

 

전개 구문

전개 구문 즉 Spread 연산자라고도 많이 말하는 이것은 함수입니다.

반복 가능한 문자를 0개 이상의 인수로 확장하거나 요소로 확장하여 0개 이상의 key: "value"로 확장시킬 수 있습니다.

 

다음은 예제코드입니다.

크롬 개발자도구에서 입력 후 console 탭에서 확인하시면 됩니다. 

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

const numbers2 = [4,5,6];

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

console.log(...numbers , ...numbers2);


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

 

구문

 

함수 호출은 다음과 같이 합니다.

myFunction(...iterableObj);
...iterableObj >> 반복가능한 문자

 

인자로 들어가는 값들

//배열 리터럴과 문자열
[...iterableObj, '4', 'five', 6];


//객체 리터럴
let objClone = { ...obj };

 

배열복사

배열복사는 다음과 같이 진행해도 원본 배열 arr에는 영향을 주지 않습니다.

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

 

배열을 연결하는 더 좋은 방법 >> concat

배열을 연결할 때 더 좋은 방법이 있는데요 다음과 같은 방법이 있습니다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 에 붙임
arr1 = arr1.concat(arr2);

 

전개 구문을 사용해 이는 다음과 같아집니다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]

 

전개 구문으로, 이는 다음과 같아집니다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨