스프레드 연산자(spread operator)

JavaScript spread 연산자(...)를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있습니다.

위 내용은 w3schools에서 spread 연산자를 설명하는 내용입니다.

위의 내용만으로 이해하기엔 확실히 와 닿지 않습니다. 아래 예시 코드를 통해 좀 더 자세히 알아 봅시다.

배열에서의 spread 연산자

const fruitOne = ['apple', 'banana'];
const fruitTwo = ['grape', 'peach'];

// 기존 방법
var fruitAll = fruitOne.concat(fruitTwo);

console.log(fruitAll); // ['apple', 'banana', 'grape', 'peach']

// ES6 spread 연산사 활용 방법
const fruitAll = [...fruitOne, ...fruitTwo];

console.log(fruitAll); // ['apple', 'banana', 'grape', 'peach']

위의 예시 코드처럼 두 개의 배열을 하나의 배열로 병합하려고 할 때 기존에는 concat 메서드를 사용해 병합을 했지만 ES6에서는 spread 연산자를 활용해 보다 간편하고 깔끔하게 병합이 가능합니다.

JavaScript 에서는 기존에 생성되어 변수에 할당되어 있는 배열이나 객체를 새로운 변수에 할당 하게되면 새로운 변수는 기존의 변수에 할당되어 있는 객체 또는 배열을 참조하게 됩니다.

이럴 경우 새로운 변수에 있는 객체나 배열을 변경해도 기존 변수에 할당되어 있는 객체나 변수를 참조하기 때문에 같이 변경되게 됩니다.

그래서 참조가 아닌 복사를 하기위해 ES5에서는 slice 또는 map을 사용해 배열을 복사 했습니다.

// slice 사용
var fruitOne = ['apple', 'banana'];
var fruitTwo = fruitOne.slice();

var fruitTwo.push('grape');

console.log(fruitOne); // ['apple', 'banana']
console.log(fruitTwo); // ['apple', 'banana', 'grape']


// map 사용
var fruitOne = ['apple', 'banana'];
var fruitTwo = fruitOne.map((item) => item);

var fruitTwo.push('grape');

console.log(fruitOne); // ['apple', 'banana']
console.log(fruitTwo); // ['apple', 'banana', 'grape']

ES6에서는 spread 연산자(...) 을 활용해 좀 더 간편하고 깔끔하게 사용이 가능합니다.

// spread 연산자 사용
const fruitOne = ['apple', 'banana'];
const fruitTwo = [...fruitOne, 'grape'];

console.log(fruitOne); // ['apple', 'banana']
console.log(fruitTwo); // ['apple', 'banana', 'grape']

객체에서의 spread 연산자

객체에서는 spread 연산자를 이용하여 객체의 프로퍼티를 업데이트 하거나 복사할 수 있습니다.

const user = { name: 'Kim', city: 'Seoul' };

user = { ...user, age: 28 };
console.log (user); // { name: 'Kim', city: 'Seoul', age: 28 }

user = { ...user, name: 'John', age: 30 }
console.log(user); // { name: 'John', city: 'Seoul', age: 30 }