자바스크립트 스프레드 연산자(Spread Operator) 완벽 가이드

자바스크립트 스프레드 연산자는 인수를 받아들이는 문법 안에서 배열을 펼쳐주는(expand) 기능입니다. 주로 객체를 복제하거나, 여러 배열을 하나로 합치거나, 리스트의 내용을 함수에 전달할 때 널리 사용됩니다.

'스프레드(Spread)'라고 하면 빵에 바르는 잼이 먼저 떠오르기 쉽지만, 자바스크립트에서 스프레드 연산자는 전혀 다른 의미를 지닙니다. 바로 반복 가능한(iterable) 객체의 내용물에 접근하는 방법입니다. 토스트 위의 스프레드만큼 재미있어 보이지는 않을 수 있지만, 알아두면 정말 유용한 도구입니다.

이 가이드에서는 자바스크립트 스프레드 연산자가 무엇인지, 어떻게 동작하는지 살펴보고, 실무에서 자주 쓰이는 활용 예시까지 함께 다룹니다.

자바스크립트 스프레드 연산자란 무엇인가?

스프레드 연산자를 사용하면 반복 가능한 객체의 내용에 접근할 수 있습니다. 표기법은 점 세 개(줄임표, ...) 뒤에 접근하려는 반복 가능한 객체의 이름을 붙이는 것입니다. 이 연산자는 ES6(ECMAScript 2015)에서 처음 도입되었습니다.

반복 가능한 객체에는 크게 세 가지가 있습니다: 배열(array), 객체 리터럴(object literal), 그리고 문자열(string)입니다. for 루프를 사용하면 이 데이터들을 순회하면서 공통된 작업을 수행할 수 있습니다.

반복 가능한 객체가 유용한 이유는 동일한 작업을 여러 번 실행할 수 있기 때문입니다. 문자열을 순회하며 특정 문자를 치환할 수도 있고, 배열을 순회하며 저장된 모든 값의 합계를 구할 수도 있습니다.

스프레드 연산자의 기본 문법은 다음과 같습니다:

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

위 코드에서 ...names를 사용해 'names' 배열의 모든 요소를 'new_names'라는 새 배열에 담았습니다. 결과적으로 new_names에는 names의 모든 항목과 새로운 이름 'Leslie'까지 함께 들어가게 됩니다.

스프레드 연산자의 대표적인 활용 사례는 다음 세 가지입니다:

반복 가능한 객체의 복사본 만들기
새로운 반복 가능한 객체에 항목 추가하기
함수에 인수 목록 전달하기

즉, 스프레드 문법은 리스트 안의 개별 요소들을 모두 펼쳐서 표현해 줍니다.

스프레드 연산자로 반복 가능한 객체 복사하기

스프레드 연산자는 반복 가능한 객체를 복제하는 가장 간편한 방법 중 하나입니다. 물론 다른 방법도 있지만, 스프레드 연산자가 압도적으로 직관적입니다. 복사본을 만들려면 점 세 개와 함께 복사할 배열의 이름을 지정하기만 하면 됩니다.

앞선 예제에서 배열을 복사하는 방법을 살펴봤습니다. 스프레드 연산자는 자바스크립트 객체를 복제할 때도 사용할 수 있습니다:

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

위 코드는 자바스크립트 콘솔에 다음과 같이 출력됩니다:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

여기서 몇 가지 중요한 차이점을 짚고 넘어가겠습니다. 우리는 자바스크립트 객체의 복사본을 만들고 있으므로, 대괄호([])가 아닌 중괄호({})를 사용해야 합니다.

또한 단일 배열이 아니라 객체를 지정했습니다. 이 객체에는 'Lemon Drizzle' 컵케이크와 관련된 세 개의 키(key)와 값(value)이 담겨 있습니다.

스프레드 연산자로 새로운 반복 가능한 객체에 항목 추가하기

스프레드 연산자의 활용은 복사에서 끝나지 않습니다! 한 반복 가능한 객체의 항목을 다른 객체에 추가할 때도 널리 사용됩니다. 다음 예제를 살펴보세요:

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

위 코드는 다음과 같은 결과를 반환합니다:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

원본 배열을 복사한 'new_cupcakes' 배열을 만들면서, 동시에 새로운 값들도 함께 추가했습니다.

같은 문법으로 두 개의 반복 가능한 객체를 하나로 병합할 수도 있습니다. 대괄호 안에 스프레드 연산자와 함께 두 객체를 나열하기만 하면 됩니다:

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

실행 결과는 다음과 같습니다:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

결과는 앞선 예제와 같지만, 이번에는 두 개의 배열을 하나로 합친 것이라는 점이 다릅니다.

스프레드 연산자로 함수에 인수 전달하기

자바스크립트 함수에 여러 개의 인수를 전달할 때 스프레드 연산자가 특히 유용합니다. 다음 예제를 보겠습니다:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

실행 결과:

Name: Geoff
Order: Red Velvet
Price 1.85

우리는 세 개의 인수를 받아 콘솔에 출력하는 placeOrder() 함수를 선언했습니다. 각 값 앞에는 해당 인수가 무엇인지 설명하는 라벨이 붙어 있습니다.

이 코드도 잘 동작하지만, 인수들을 배열로 묶어두고 스프레드 연산자로 함수에 전달하는 방식으로 더 깔끔하게 개선할 수 있습니다:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

실행 결과는 다음과 같습니다:

Name: Geoff
Order: Red Velvet
Price 1.85

출력 결과는 동일하지만, 코드가 동작하는 방식은 다릅니다. 값을 함수에 직접 전달하는 대신, 값들을 리스트에 담아둔 뒤 스프레드 연산자를 통해 함수에 전달한 것입니다.

마무리

스프레드 연산자는 자바스크립트 전반에서 폭넓게 사용되는 기능입니다. 반복 가능한 객체를 손쉽게 복사하고, 새로운 객체에 항목을 추가하고, 함수에 인수를 전달할 수 있게 해 줍니다. 문법 또한 아주 간단합니다. 점 세 개(...) 뒤에 접근하려는 반복 가능한 객체를 적으면 됩니다.

이제 여러분도 프로처럼 자바스크립트 스프레드 연산자를 활용할 준비가 되었습니다!

추천 학습 자료, 도서, 온라인 강좌 등 자바스크립트 학습 로드맵이 궁금하다면 관련 가이드 글도 함께 참고해 보세요.