[JS] 스프레드 연산자(spread operator)

 

 

스프레드 연산자(spread operator)

 

 

스프레드 연산자란? w3shcool에서는 다음과 같이 설명하고 있다.

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

말 그대로 스프레드 연산자란 배열과 객체를 한 줄로 펼치는 방법이다. ES6에서 소개된 문법이며 같은 결과물을 위해서 기존의 문법보다 훨씬 가독성있고 깔끔하게 코드를 작성할 수 있다. 먼저 객체 코드를 살펴보자.

 

 

객체에서의 스프레드 연산자

 

 

const cookie = {
	name: "cookie",
    madeIn: "korea"
};

const chocoCookie = {
	name: "cookie",
    madeIn: "korea",
    toping: "choco"
};

const blueberryCookie = {
	name: "cookie",
    madeIn: "korea",
    toping: "blueberry"
};

const strawberryCookie = {
	name: "cookie",
    madeIn: "korea",
    toping: "strawberry"
};

위 코드에서 반복되는 name과 madeIn 프로퍼티들을 어떻게 잘 표현할 수 있을까? 스프레드 연산자로 다음과 같이 작성할 수 있다.

 

 

const cookie = {
	name: "cookie",
    madeIn: "korea"
};

const blueberryCookie = {
	...cookie,
    toping: "blueberry"
}

반복되는 프로퍼티인 name과 madeIn을 ...cookie로 작성하였다. ...cookie는 과연 blueberryCookie에 잘 입력이 되었을까? console.log()로 한 번 확인해보자.

 

 

우리가 처음 작성했던 코드와 같다는 것을 볼 수 있다. 이와 같이 반복되는 프로퍼티들을 스프레드 연산자로 사용할 수 있다.

 

 

배열에서의 스프레드 연산자

 

 

스프레드 연산자는 배열에서도 쉽게 사용할 수 있다. 먼저 기존 ES5에서는 스프레드 연산자 없이 어떻게 사용했는지 알아보자.

const one = ['a', 'b'];
const two = ['c', 'd'];

// 기존 방법
let sum = one.concat(two); //concat() 메서드 활용

console.log(sum); // ['a', 'b', 'c', 'd']

 

 

다음은 ES6 스프레드 연산자를 활용하여 구현한 코드이다.

const one = ['a', 'b'];
const two = ['c', 'd'];

let sum = [...one, ...two] // 새로운 배열을 생성

// 다른방법
const one = ['a', 'b'];
const two = [...one, 'c', 'd'] // one 배열을 참조

 

 

Rest Parameter

 

 

스프레드 연산자를 매개변수로 사용하면 Rest Parameter라고 한다.

rest parameter를 사용하면 함수 호출 시 여러개의 인수를 전달할 수 있고, 함수에서는 이 인수들을 하나의 변수로 받아 처리할 수 있다.

const arrFunc = function(...args) {
    console.log(args);
}

arrFunc(3); /// [3]
arrFunc(4, 5, 6); /// [4, 5, 6]

 

• arrFunc() 함수에 매개변수를 하나만 넣으면 rest parameter는 하나의 요소를 가지는 배열이 된다.
• 반면 여러개의 인수를 넣으면 rest parameter는 세 개의 인수를 모두 가지는 배열이 된다.

위 코드와 같이 작성하게 되면 사용자가 전달한 인수는 배열로 반환된다.