스프레드 문법

소개

전개 구문이라고도 부르는 스프레드 문법(Spread Syntax)은 ECMAScript6(2015)에서 새로 추가된 문법으로 이터러블(iterable)한 객체(예: 배열, 문자열 등)나 객체(object)의 속성들을 개별 요소로 펼쳐서 복사하거나 전달할 때 사용하는 문법이다.

사용법

스프레드 문법은 이터러블한 객체 앞에 전개연산자라고 하는 것 '...' 을 붙여 사용한다.
다만 스프레드. 용어의 뜻 그대로 객체를 펼치는 것이기 때문에 펼쳐진 객체 요소들을 담을 바구니[ ] 가 필요하다.

// 펼칠 대상이 객체인 경우
{...obj}

// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

객체는 객체 바구니로, 배열은 객체 or 배열 바구니로 담을 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const Basket = [...arr1, ...arr2, ...arr3];

console.log(Basket); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

• Basket 이라는 새로운 배열(바구니)에 arr1,arr2,arr3 을 spread 연산자로 풀어헤쳐서 한꺼번에 담은 모습

const arr1 = ['banana','eggs','meat'];
const arr2 = [...arr1]; // ...myArray1 :  'banana','eggs','meat'

console.log(arr1); // ['banana','eggs','meat']
console.log(arr2); // ['banana','eggs','meat']

console.log(arr1 === arr2); // false

전개 연산자를 이용하여 arr1을 arr2에 복사하듯 할당해준 모습이다.
그러나 === 를 통해 확인하면 false 가 나오는데 이는 자바스크립트에서 === 연산자는 객체나 배열의 경우 '참조값(주소)'를 비교하기 때문에 false가 나온다.

객체 바구니에 담으면?

const arr = ['banana','eggs','meat'];

const obj = {...arr};

console.log(arr); // [banana','eggs','meat']
console.log(myObject); // {0: "banana", 1: "eggs", 2: "meat"}

배열을 객체 바구니 {} 로 감싸면 0부터 시작하는 index 를 가지는 객체가 된다.

언제 사용하면 좋을까?

배열 복사와 병합 말고도 스프레드 연산자는 다음과 같은 상황에 사용하면 유용하다.

함수 호출 시 인자 전달시

배열 요소를 개별 인자로 펼쳐서 전달할 때

const nums = [5, 8, 2];
Math.max(...nums); // 8

max() 안에는 배열이 들어가면 안되고 max(5,8,2) 숫자 인자로 풀어서 들어가야하기에 스프레드 연산자 활용하면 유용하다.

배열/객체의 특정 요소 제외하기 (스프레드 + 구조 분해)

const arr = [1, 2, 3, 4];
const [first, ...rest] = arr;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

이렇게 스프레드 연산자를 이용한 rest 문법이라는 것도 있는데 rest는 spread의 반대개념으로 값을 모아 합친다.

구분 기준	spread (펼치기)	rest (모으기)
📍 사용 위치	값을 전달하는 쪽	값을 받는 쪽
🧩 예: 함수	func(...args) → 전달 시	function func(...args) → 정의 시
📦 예: 구조분해	[...arr], {...obj} → 복사/병합	[a, ...rest], {a, ...rest} → 나머지 수집
📌 기능	값을 분해해서 개별 요소로 전달	여러 값을 하나로 묶어 수집

컴포넌트에 props 전달 (React에서 스프레드)

const buttonProps = {
  type: "button",
  disabled: true,
  className: "btn-primary",
};

return <button {...buttonProps}>클릭</button>;

이런 식으로 리액트에서 buttonProps 의 값들을 펼쳐서 전달할 때도 유용하다.