마치 마법의 점 세 개(...)처럼 보이는 이 문법은 자바스크립트에서 가장 활용도가 높은 도구 중 하나입니다. 똑같이 생겼지만 함수 정의부에 있느냐, 함수 호출부에 있느냐에 따라 역할이 정반대로 바뀌죠.

---

📥 1. 나머지 매개변수 (Rest Parameters)

함수를 정의할 때, 정해지지 않은 수의 인수를 배열로 모으고 싶을 때 사용합니다.

핵심 특징

• 배열로 수집: 넘겨진 인자 중 변수에 할당되지 않은 '나머지'를 진짜 배열로 묶어줍니다.
• 위치 제한: 반드시 매개변수 목록의 가장 마지막에 위치해야 합니다. ((...rest, arg)는 불가능)

arguments 객체와의 차이

과거에는 arguments라는 유사 배열 객체를 썼지만, 모던 자바스크립트에서는 나머지 매개변수를 권장합니다.

구분	arguments	나머지 매개변수 (...args)
타입	유사 배열 (Array-like)	진짜 배열 (Array)
메서드	배열 메서드(map, filter) 불가	모든 배열 메서드 사용 가능
화살표 함수	지원하지 않음	지원함

---

📤 2. 전개 구문 (Spread Syntax)

함수를 호출하거나 배열/객체를 만들 때, 뭉쳐 있는 데이터를 개별 요소로 흩뿌릴 때 사용합니다.

주요 활용처

• 함수 인자 전달: Math.max(...[1, 2, 3]) 처럼 배열을 숫자의 나열로 바꿔줍니다.
• 배열 합치기: [0, ...arr, 4] 처럼 중간에 다른 배열을 끼워 넣기 좋습니다.
• 문자열 분해: [..."Hi"] $\rightarrow$ ['H', 'i'] 로 이터러블을 분해합니다.

---

🔄 3. 얕은 복사 (Shallow Copy)의 끝판왕

Object.assign이나 slice를 쓰던 번거로운 방식에서 벗어나, 가장 직관적으로 복사본을 만들 수 있습니다.

// 배열 복사
let arrCopy = [...arr];

// 객체 복사
let objCopy = { ...obj };

⚠️ 주의: 이는 '얕은 복사'입니다. 객체 내부의 또 다른 객체는 참조값만 복사되므로, 중첩된 구조까지 복사하려면 깊은 복사(Deep Copy)가 필요합니다.

---

🎙️ 기술 면접 대비 (Interview Questions)

Q1. 나머지 매개변수와 전개 구문을 어떻게 구분하나요? (기초)

답변: 마침표 세 개가 **함수 선언문(매개변수 자리)**에 쓰였다면 인자를 배열로 모으는 **'나머지 매개변수'**이고, 함수 호출부나 리터럴([], {}) 안에서 쓰였다면 요소를 펼치는 **'전개 구문'**입니다. 즉, "모으느냐(Gather)"와 "펼치느냐(Spread)"의 차이입니다.

Q2. Array.from(obj)와 [...obj]의 미묘한 차이는 무엇인가요? (심화)

답변: **Array.from**은 이터러블뿐만 아니라 length가 있는 유사 배열 객체도 배열로 바꿀 수 있습니다. 반면 전개 구문은 반드시 이터러블(반복 가능한) 객체여야만 동작합니다. 따라서 순수하게 이터러블만 다룬다면 전개 구문이 간결하지만, 범용성은 Array.from이 더 높습니다.

---

💡 Tech Lead의 한 줄 인사이트

리액트(React) 개발을 하다 보면 Props를 하위 컴포넌트로 그대로 넘겨줄 때 <Component {...props} /> 처럼 전개 구문을 정말 많이 쓰게 됩니다. 이때 어떤 값이 넘어가고 있는지 정확히 파악하지 못하면 의도치 않은 'Prop Drilling'이나 성능 저하가 발생할 수 있으니, 항상 전개되는 데이터의 구조를 머릿속에 그려보는 습관이 중요합니다.