[Javascript ES6] 4. spread operator (배열의 복사와 활용)

spread operator (배열의 복사와 활용)

-> 펼침 연산자

spread 구문을 사용할 경우 배열이나 문자열과 같이 반복가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 

또는 요소(배열 리터럴의 경우) 로 확장하여, 0개 이상의 key-value 의 쌍으로 객체를 확장할수 있다.

// spread operator
 
let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(pre, newData);

>

• ["apple", "orange", 100]
• ["apple", "orange", 100]

같은 내용이 출력되지만 참조가 같은 것은 아니다. 

// spread operator
 
let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(pre === newData);

> false

위와 같이 pre 와 newData 는 참조가 다르다는 것을 알 수 있다. 

concat 을 이용하여 배열을 합칠 경우처럼 새로운 배열을 복사하여 반환하는 것과 동일하다. 

배열안에 특정 배열을 삽입하고 싶을 경우에는 아래와 같이 활용할 수 있다.

ES6 이전에는 복잡하고 귀찮은 작업들을 요했는데 ES6 부터는 쉽게 해결되었다. 

let pre = [100, 200, "hello", null];
 
let newData = [0, 1, 2, 3, ...pre, 4];
 
console.log(newData);

> [0, 1, 2, 3, 100, 200, "hello", null, 4]

위와 같이 배열 안에 배열이 출력되는 모습을 쉽게 볼 수 있다. 

spread operator 이전에는 일반적으로 배열이 element 함수의 인수를 사용하고자 할 때,

아래와 같이 Function.prototype.apply 를 사용하였다.

function sum(a, b, c) {
  return a+b+c;
}
let pre = [100, 200, 300];
 
console.log(sum.apply(null, pre));

> 600

apply 대체

spread operator 를 활용하면 더 쉽고 간단하다.

function sum(a, b, c) {
  return a+b+c;
}
let pre = [100, 200, 300];
 
//console.log(sum.apply(null, pre));
 
console.log(sum(...pre));

> 600

배열형태에 인자값을 던져줄 때, 펼쳐서 보여줄 수 있다는 것을 인지하고 위와 같은 spread operator 를 활용하면 좋다. 

> 배열을 변경하지 않고, 새로운 값을 복사할 수 있는 방법을 제공한다.

> 또한 배열을 합치거나 펼쳐진 상태로 배열을 새로운 함수의 파라미터(parameter) 로 전달할 때, 유용하게 사용할 수 있다.

참고)

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