JavaScript_ES6_스프레드(Spread) 연산자(...연산자) / 전개 구문

 

 

Spread 문법을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. Iterable 객체에만 적용됨.

//함수 호출
myFunction(...iterableObj);
//배열 리터럴과 문자열
[...iterableObj, '4', 'five', 6];
//객체 리터럴
let objClone = { ...obj };

 

배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 Function.prototype.apply() 를 사용가능 = ... 연산자
단, apply는 new를 사용해 Constructor를 호출 할 때는 사용할 수 없으므로, Spread(...) 연산자를 사용해야 한다.

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

//아래 2개는 같은 의미임
console.log(sum(...numbers));
console.log(sum.apply(null, numbers));
// expected output: 6



var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

 

배열에서 활용

1. 새로운 배열 생성하기 및 복사
- 주의 : Spread 문법은 배열을 복사할 때 1레벨 깊이에서 동작하므로, 다차원 배열을 복사하는 것은 적합하지 않음.

//Example 01
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

//Example 02
var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

//Example 03
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// 이제 배열 a 도 영향을 받음: [[], [2], [3]]

 

객체에서도 활용할 수 있지만...효과적인 건 아직 잘 모르겠음.

객체 복사 정도로 활용 : 겹치는 데이터명은 가장 오른쪽 데이터가 들어감.

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

함수 인자로 활용하기

//ES6 -스프레드 활용 
function a(...data){
  console.log(data); // data : [1,2,3,4,5]
}
//일반적인 function
function b(data){
  //파라미터로 갯수가 부정확한경우 파라미터를 갯수에 맞게 적어줘야됨
  console.log(data); // data: 1
}
//비구조화 처리
function c(firstData,...restData){
  //정해준 firstData 에는 첫번째 값이 들어가고 나머지 값은 배열로 정의됨
  console.log(firstData); // firstData : 1 
  console.log(restData); // restData : [2,3,4,5]
}
a(1,2,3,4,5); // 일반적으로 데이터 넣기(스프레드 활용)
b(1,2,3,4,5); // 일반적으로 데이터 넣기(스프레드 활용 x) -> 데이터를 정확하게 가져오려면 추가작업이 필요함.
c(1,2,3,4,5); // 비구조화 데이터 넣기

 

참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://sheldhe93.tistory.com/13