JavaScript ES6 정리 - spread operator

이번 포스팅에서는 ES6에 포함된 spread operator에 대해 알아보자!

spread operator

펼치기 연산자 또는 전개 연산자라고 불린다.

바로 코드부터 보며 무슨 역할을 하는지 확인해보자 !

spread operator 사용 전

const birds = ["eagle", "pigeon"];
const mammals = ["rabbit", "cat"];
const animals = birds.concat("whale").concat(mammals);
console.log(animals);

/*
Result
[ 'eagle', 'pigeon', 'whale', 'rabbit', 'cat' ]
*/

위와 같이 ES6 이전에는 concat메소드를 사용하여 여러 배열을 합쳤다.

spread operator 사용 후

const birds = ["eagle", "pigeon"];
const mammals = ["rabbit", "cat"];
const animals = [...birds, "whale", ...mammals];
console.log(animals);
/*
Result
[ 'eagle', 'pigeon', 'whale', 'rabbit', 'cat' ]
*/

spread operator를 사용하면 위와 같이 배열의 각 인자를 펼친 효과를 누릴 수 있다.

그런데, 이전 포스팅에서 살펴본 rest parameter와 사용 문법이 ’…’으로 같다!

그럼 rest parameter와 spread operator는 어떻게 구분할까 ? 🧐🧐

getter, setter를 생각하면 구분하기 편하다 !

getter : rest parameter / 받는 입장
setter : spread operator / 주는 입장

몇 가지 예제를 더 보고 어느 부분에서 활용될 수 있는지 생각해보자!

const values = [20, 10, 30, 50, 40];
console.log(values);
console.log(...values);
console.log(Math.max(20, 10, 30, 50, 40));
console.log(Math.max.apply(null, values));
console.log(Math.max(...values));
/*
Result
[ 20, 10, 30, 50, 40 ]
20 10 30 50 40
50
50
50
*/

values를 출력한 것과 ...values를 출력한 것의 차이점 - values : 배열 - ...values : 배열의 각 인자

const values = [3, 4, 5, 6, 7, 8];
const sum = (...args) => args.reduce((p, c) => p + c);
console.log(sum(1, 2, ...values, 9, 10));
/*
Result
55
*/

const str = "binary!";
const splitArr = str.split("");
const spreadArr = [...str];
console.log(splitArr);
console.log(spreadArr);
/*
Result
['b', 'i', 'n', 'a', 'r', 'y', '!']
['b', 'i', 'n', 'a', 'r', 'y', '!']
*/

let originalArray = [1, 2];
let copiedArray = [...originalArray];
console.log(originalArray === copiedArray);
originalArray.push(3);
console.log(originalArray);
console.log(copiedArray);
/*
Result
false
[ 1, 2, 3 ]
[ 1, 2 ]
*/

spread operator를 사용하여 만든 배열은 새로운 배열이다.

let originalArray = [
  { first: "Hello,", second: "World!" },
  { first: "Welcome", second: "ES6!" },
];
let copiedArray = [...originalArray];
console.log(originalArray[0].first);
copiedArray[0].first = "Hi,";
console.log(originalArray[0].first);
/*
Result
Hello,
Hi,
*/

마지막으로 얕은 복사만을 수행하여 배열 내부에 객체가 있다면 객체는 복사되지 않고 참조를 한다는 점을 꼭 기억하자!

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!