자바스크립트 스프레드 문법 완벽 가이드 객체와 배열 복사의 모든 것

안녕하세요, 코딩하는곰입니다. 자바스크립트를 다루다 보면 객체나 배열을 복사해야 하는 상황은 정말 빈번하게 발생합니다. 특히 React나 Vue 같은 모던 프론트엔드 프레임워크에서는 상태의 불변성을 유지하기 위해 기존 데이터를 변경하지 않고 새로운 객체/배열을 생성하는 패턴이 매우 중요해졌죠. 이때 등장하는 것이 바로 ‘스프레드 문법(Spread Syntax)‘입니다. 단순히 ... 점 세 개로 보이지만, 이 작은 연산자가 자바스크립트 개발의 효율성과 코드 가독성을 얼마나 높여주는지 아시나요? 오늘은 이 스프레드 문법에 대해 깊이 파고들어, 기본 사용법부터 실무에서 마주칠 수 있는 함정과 고급 활용법까지, 20년 경력의 개발자가 직접 알려드리는 완벽 가이드를 준비했습니다. 지금 바로 시작해볼까요?

스프레드 문법이란? ...의 기본 개념

스프레드 문법(Spread Syntax)은 ES6(ECMAScript 2015)에서 도입된 강력한 기능입니다. 공식 명세에서는 “객체나 배열 같은 이터러블(Iterable) 객체의 요소를 하나씩 펼쳐서 개별 값으로 만든다”고 정의합니다. 말이 조금 어렵나요? 쉽게 비유하자면, 박스에 담긴 사과들을([사과, 바나나, 오렌지]) 테이블 위에 하나씩 펼쳐 놓는(사과, 바나나, 오렌지) 행위라고 생각하면 됩니다. 이 문법의 가장 큰 장점은 간결함과 가독성입니다. 스프레드 문법이 나오기 전에는 배열을 합치거나 객체를 복사하기 위해 concat(), slice(), Object.assign() 같은 메서드를 사용해야 했습니다. 이는 코드가 길어지고 의도가 명확히 드러나지 않는 경우가 많았죠. 스프레드 문법은 이러한 작업들을 직관적인 한 줄의 코드로 해결해 줍니다.

// 스프레드 문법 등장 전
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedOld = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObjOld = Object.assign({}, obj1, obj2); // { a: 1, b: 2, c: 3, d: 4 }
// 스프레드 문법 등장 후
const combinedNew = [...arr1, ...arr2]; // 훨씬 직관적!
const combinedObjNew = { ...obj1, ...obj2 }; // 의도가 한눈에 들어옵니다.

어떤가요? 차이가 느껴지시나요? 스프레드 문법은 이렇게 코드의 의도를 명확히 전달하면서도 작성하는 개발자의 시간을 절약해주는 훌륭한 도구입니다.

🔍 최신 개발 트렌드를 알고 싶다면, (자바 기초) 자바 프로그램의 컴파일과 실행 과정 완벽 이해하기를 참고해보세요.

객체 복사에 스프레드 문법 활용하기: 얕은 복사(Shallow Copy)의 이해

객체를 복사하는 것은 자바스크립트에서 가장 조심해야 할 작업 중 하나입니다. = 연산자를 사용한 단순 할당은 참조(Reference)만 복사할 뿐, 새로운 객체를 생성하지 않습니다. 이는 의도치 않은 버그의 온상이 되죠.

const originalObj = { name: '곰', info: { age: 20, city: 'Seoul' } };
const copyByReference = originalObj; // 참조 복사
copyByReference.name = '토끼';
console.log(originalObj.name); // '토끼' -> 원본 객체도 변경됨! 😱

이 문제를 해결하기 위해 스프레드 문법을 사용해 얕은 복사(Shallow Copy)를 수행할 수 있습니다.

const originalObj = { name: '곰', info: { age: 20, city: 'Seoul' } };
const shallowCopy = { ...originalObj }; // 스프레드 문법을 이용한 얕은 복사
shallowCopy.name = '토끼';
console.log(originalObj.name); // '곰' -> 원본 객체의 1차원 속성은 안전!
console.log(shallowCopy.name); // '토끼'
// 하지만 주의점: 중첩된 객체(Nested Object)는 여전히 참조가 복사됩니다.
shallowCopy.info.age = 100;
console.log(originalObj.info.age); // 100 -> 원본의 중첩 객체도 변경됨!

위 예제가 보여주는 것이 얕은 복사의 한계입니다. 스프레드 문법 { ...obj }는 객체의 최상위 속성만 새로운 객체로 복사합니다. 속성 값이 객체나 배열이라면, 그 참조 값만 복사하게 됩니다. 따라서 info 객체는 originalObj와 shallowCopy가 공유하게 되죠. 그럼 언제 스프레드 문법으로 객체를 복사해야 할까요?

1. 객체의 구조가 평평(Flat)할 때: 중첩된 객체가 없는 단순한 형태의 객체.
2. 불변성(Immutability)이 요구되는 상태 업데이트 시: React의 setState, Redux의 reducer에서 기존 상태를 변경하지 않고 새로운 상태 객체를 생성할 때.
3. 함수의 매개변수로 객체를 안전하게 전달하거나, 여러 객체를 병합할 때.

// 실용적인 예: 상태 업데이트 (React 스타일)
const prevState = { count: 0, user: '곰', filters: { done: false } };
const nextState = {
  ...prevState,
  count: prevState.count + 1, // count만 덮어쓰기
  user: '코딩하는' + prevState.user // user도 덮어쓰기
};
// filters 객체는 참조가 복사되지만, count와 user는 새로운 값으로 업데이트됨

논리적 사고와 문제 해결 능력을 기르고 싶다면, 다양한 난이도의 스도쿠를 제공하는 스도쿠 저니를 설치해보세요.

배열 복사와 조작에서의 스프레드 문법 마스터하기

배열은 자바스크립트 데이터 처리의 핵심입니다. 스프레드 문법은 배열을 복사, 합치기, 요소 추가/삭제 등 다양한 조작을 엄청나게 편리하게 만들어줍니다. 1. 배열의 얕은 복사 객체와 마찬가지로, 배열도 slice() 메서드 없이 간단히 복사할 수 있습니다.

const originalArray = [1, 2, 3, [4, 5]];
const copiedArray = [...originalArray];
copiedArray[0] = 100;
console.log(originalArray[0]); // 1 -> 원본 배열의 첫 요소는 안전
console.log(copiedArray[0]); // 100
copiedArray[3][0] = 400;
console.log(originalArray[3][0]); // 400 -> 중첩 배열은 참조 복사됨 (얕은 복사)

2. 배열 합치기 (Concatenation) 기존의 concat() 메서드를 대체할 수 있는 아주 우아한 방법입니다.

const frontend = ['React', 'Vue'];
const backend = ['Node.js', 'Spring'];
const database = ['MongoDB', 'MySQL'];
const myTechStack = [...frontend, ...backend, ...database];
console.log(myTechStack); // ['React', 'Vue', 'Node.js', 'Spring', 'MongoDB', 'MySQL']
// 기존 배열 사이에 새 요소를 삽입하는 것도 가능
const withNew = ['JavaScript', ...frontend, 'TypeScript', ...backend];

3. 배열에 요소 추가하기 (앞, 뒤) push(), unshift() 메서드는 원본 배열을 변경합니다. 불변성을 지키려면 스프레드 문법이 최선입니다.

const arr = [2, 3, 4];
// 앞에 추가 (unshift 대체)
const newArrWithStart = [1, ...arr]; // [1, 2, 3, 4]
// 뒤에 추가 (push 대체)
const newArrWithEnd = [...arr, 5]; // [2, 3, 4, 5]
// 앞뒤로 추가
const newArrBoth = [0, ...arr, 5, 6]; // [0, 2, 3, 4, 5, 6]

4. 함수 인자(Arguments)로 사용하기 스프레드 문법은 함수를 호출할 때 인자로도 사용됩니다. 이는 apply() 메서드를 대체하는 현대적인 방식입니다.

const numbers = [10, 20, 5, 30, 15];
// Math.max는 인자로 나열된 값 중 최대값을 구함: Math.max(10, 20, 5...)
// 배열을 직접 넣으면 NaN이 나옴: Math.max(numbers) -> NaN
const maxValue = Math.max(...numbers); // 30
const minValue = Math.min(...numbers); // 5
function introduce(name, age, city) {
  console.log(`안녕! 나는 ${name}, ${age}살이고 ${city}에 살아.`);
}
const myInfo = ['코딩하는곰', 20, '서울'];
introduce(...myInfo); // 안녕! 나는 코딩하는곰, 20살이고 서울에 살아.

🌟 고급 패턴: 불변성 유지하며 배열 항목 제거/수정하기 스프레드 문법과 slice(), map()을 조합하면 원본 배열을 변경하지 않고 특정 항목을 제거하거나 수정할 수 있습니다. 이는 React 상태 관리에서 매우 유용한 패턴입니다.

const todos = [{id:1, text:'자바스크립트 공부'}, {id:2, text:'블로그 글쓰기'}, {id:3, text:'운동하기'}];
// id가 2인 항목 제거하기 (필터링 개념)
const idToRemove = 2;
const newTodosWithout = [...todos.filter(todo => todo.id !== idToRemove)];
// id가 1인 항목의 텍스트 수정하기
const idToUpdate = 1;
const newTodosUpdated = todos.map(todo =>
  todo.id === idToUpdate ? { ...todo, text: '모던 자바스크립트 Deep Dive 공부' } : todo
);
// map 결과가 배열이므로 스프레드 문법은 생략해도 됨: const newTodosUpdated = todos.map(...)

🔍 참여 가능한 공연, 전시, 대회 정보를 찾고 있다면, 의왕왕송호수 겨울축제(날짜미정)를 참고해보세요.

스프레드 문법 ...은 자바스크립트 개발자에게 하늘에서 내려온 선물과도 같습니다. 단순한 문법이지만, 객체와 배열을 다루는 패턴을 근본적으로 변화시켜 코드를 더 선언적이고, 예측 가능하며, 유지보수하기 쉽게 만들어주죠. 오늘 우리가 살펴본 것처럼, 얕은 복사(Shallow Copy)의 특성을 정확히 이해하는 것이 이 문법을 안전하게 사용하는 첫걸음입니다. 복잡한 중첩 구조를 깊게 복사해야 할 때는 JSON.parse(JSON.stringify())나 lodash 라이브러리의 _.cloneDeep 같은 방법을 고려해야 한다는 점도 꼭 기억해두세요. 이 작은 점 세 개(...)가 여러분의 코드에서 얼마나 큰 힘을 발휘하는지 직접 느껴보시기 바랍니다. 다음 시간에는 스프레드 문법과 함께 자주 쓰이는 나머지 매개변수(Rest Parameters)에 대해 깊이 다루어 보겠습니다. 코딩하는곰이었습니다. 모두 즐거운 코딩 되세요!

🔍 참여 가능한 공연, 전시, 대회 정보를 찾고 있다면, 2025 양촌곶감축제를 참고해보세요.