[JavaScript] 스프레드 연산자(Spread Operator)를 쓰는 이유

What

스프레드 연산자란, ES6에서 추가된 '...'와 같은 형태의 문법을 말하는데 객체나 배열, 함수 등에서 값이나 인자를 한꺼번에 집어넣기 위한 역할을 수행하기 위해 태어난 아이라고 생각하면 된다.

말 그대로 펼친다는 의미의 스프레드 연산자를 이용하면 객체나 배열을 더 효율적으로 다룰 수 있다.

 

How

배열에서 사용하는 경우

// 배열과 배열을 더하는 경우
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 기존 배열에 새로운 값을 추가하는 경우
const arr1 = [1, 2, 3, 4];
const arr2 = [...arr1, 5, 6, 7];
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]

배열에서 값을 추가할 때 우리는 더 이상 push()를 사용하지 않아도 된다. 스프레드 연산자를 이용하면, 간단하게 배열에 값을 추가할 수도 있고, 배열과 배열끼리 합쳐서 새로운 배열을 만들어낼 수도 있다.

 

객체에서 사용하는 경우

// 객체와 객체끼리 더하는 경우
let obj1 = {name: 'Shawn', age: 29};
let obj2 = {color: 'red', fruit: 'apple'};
let obj3 = {...obj1, ...obj2};
console.log(obj3); {name: 'Shawn', age: 29, color: 'red', fruit: 'apple'}

// 객체에 새로운 key-value를 추가하는 경우
let obj4 = {...obj1, job: 'developer'};
console.log(obj4); {name: 'Shawn', age: 29, job: 'developer'}

객체에서도 배열과 마찬가지로, 스프레드 연산자를 이용하여 객체와 객체끼리 합치거나 새로운 키-값을 추가할 수 있다.

 

함수 인자에 사용하는 경우

function test(x, y, z){
    return x + y + z;
}
const arr = [1, 2, 3, 4];
const result = test(...arr); // 함수 인자에 사용
console.log(result); // 6

함수 인자로 스프레드 연산자를 넣어서 사용할 수도 있다. test()의 인자는 총 3개이므로, arr 배열의 1, 2, 3까지만 test() 함수의 인자로 들어가게 된다.

 

rest 파라미터

// #1 함수 인자를 모두 더하는 함수
function sum(...rest) { // 매개변수에 rest 사용
    return rest.reduce((acc, cur) => {
        return acc + cur;
    }, 0)
}

const result = sum(1, 2, 3);
console.log(result); // 6

// #2 함수 인자를 배열로 만드는 함수
function makeArr(...rest) {
    return Array.from(rest);
}

const newArr = makeArr(1, 2, 3, 4, 5);
console.log(newArr); // [1, 2, 3, 4, 5]

rest는 함수의 매개변수로 사용될 때, 함수의 인자 값들을 그대로 가져와서 펼쳐주는 역할을 수행한다.

위의 식에선 sum()의 인자로 들어온 값들을 ...rest로 받아왔다. 곧, ...rest란 함수의 인자 값들을 배열로 나타낸 형태라고 보면 된다. (sum()에서 return rest를 하면 [1, 2, 3]이라는 값이 출력된다.) 함수에서는 rest를 매개변수로 사용할 때 쓰는데, 객체와 배열에서는 어떻게 쓰일까?

 

// 배열
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // 3, 4, 5

// 객체
const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4, e: 5};
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4, e: 5}

배열과 객체에서의 rest는 비구조화 할당(구조 분해 할당)에서 나머지 패턴으로 많이 쓰인다.

a, b처럼 변수가 정해져있으면 그 변수에 차례대로 값을 할당하고, 그 외에는 나머지(rest)에 할당시킨다는 개념이다.

(비구조화 할당을 전에 따로 다룬 적이 있다. https://shawnkim.tistory.com/46에서 확인해보자.)

 

1. 스프레드 연산자는 배열이나 객체 자체를 펼치는 게 아닌 접어서(압축해서) 간단하게 사용한다는 개념이다.
2. 스프레드 연산자를 사용하면 배열과 객체를 쉽게 합치고 값을 추가할 수도 있다.
3. ...rest는 나머지라는 개념으로 비구조화 할당에서 변수에 할당되고 남은 나머지 값들을 의미한다.
   (또는 함수 인자로 사용 가능하다.)