[JS] Spread Syntax에 대해서 알아보자

JavaScript 문법에서 ...(점 세 개)는 자주 보이지만, 쓰임새가 하나만 있는 것은 아닙니다.
함수의 파라미터 자리에 쓰이면 “나머지 파라미터(Rest Parameter)”로 작동하고,
배열, 객체, 함수 호출 등에 쓰이면 “전개 구문(Spread Syntax)” 역할을 합니다.

두 개념은 모두 ... 기호를 사용하기에 같은 듯 보이지만, 동작 방식을 잘 이해해야 좀 더 효율적으로 코드를 작성할 수 있습니다.

아래에서 순서대로 살펴보겠습니다.

---

1. 나머지 파라미터(Rest Parameter)

1-1. 정의

나머지 파라미터는 함수 정의부에서 하나의 매개변수에 나머지 인수들을 배열 형태로 모아주는 문법입니다.
쉽게 말해, 함수에 전달되는 “나머지” 인자들을 한꺼번에 받아올 때 사용합니다.

사용법

function sum(...numbers)
{ // numbers는 배열 (예: [1, 2, 3]) return numbers.reduce((acc, cur) => acc + cur, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(4, 5, 6, 7, 8)); // 30

 

위 예제에서

• function sum(...numbers) 라고 하면,
• sum(1, 2, 3) 처럼 함수가 호출될 때 들어온 인수들이 전부 [1, 2, 3] 형태의 배열로 numbers에 담기게 됩니다.

나머지 파라미터는 보통 arguments 객체(화살표 함수에는 없음)를 대체할 때 주로 사용합니다.
왜냐하면 arguments는 유사 배열이지만, 실제 배열 메서드를 직접 사용할 수 없기 때문이죠.
하지만 나머지 파라미터는 진짜 배열을 돌려주므로,
reduce, map 등 배열 메서드를 편리하게 사용할 수 있습니다.

여러 파라미터와 혼합 사용

나머지 파라미터를 실제 매개변수들과 섞어서 쓸 수도 있습니다.
단, 나머지 파라미터는 반드시 마지막에 위치해야 합니다.

 

function logger(prefix, ...texts) { texts.forEach((text) => { console.log(`${prefix} : ${text}`); }); } 
logger('Info', '로그1', '로그2', '로그3'); // Info : 로그1 // Info : 로그2 // Info : 로그3

 

• 첫 번째 인자 prefix에는 'Info'만 들어가고, 나머지 '로그1', '로그2', '로그3'는 texts 배열로 모아집니다.

---

2. 전개 구문(Spread Syntax)

2-1. 정의

**전개 구문(Spread Syntax)**은 배열이나 객체, 또는 **이터러블(Iterable)**의 요소들을 하나씩 펼쳐서 다른 문맥(배열·객체·함수 호출 등)에 전달하는 문법입니다.

• 함수 호출 시에 배열을 인자 목록으로 펼쳐서 전달할 수 있고,
• 배열 리터럴에서 다른 배열을 펼쳐 붙일 수도 있으며,
• 객체 리터럴에서 다른 객체의 속성을 펼쳐 넣을 수도 있습니다.

2-2. 배열에서의 Spread

const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]

 

여기서 ...arr1은 배열 arr1의 모든 요소를 그 자리에 펼치는 역할을 합니다.

• arr1이 [1, 2], arr2가 [3, 4]라면,
• [...arr1, ...arr2] = [1, 2, 3, 4] 가 됩니다.

이를 이용해서 배열 합치기(배열 병합)나 복사 등을 간편하게 할 수 있습니다.

배열 복사

const original = [10, 20, 30]; const copy = [...original]; copy[0] = 100;
console.log(original); // [10, 20, 30] 
console.log(copy); // [100, 20, 30]

• 이렇게 전개 구문을 사용하면, 얕은 복사(shallow copy)로 새 배열을 쉽게 만들 수 있습니다.

2-3. 객체에서의 Spread

객체 리터럴에서도 비슷하게 전개 구문을 사용할 수 있습니다.

const obj1 = { a: 1, b: 2 }; const obj2 = { b: 20, c: 3 }; const mergedObj = { ...obj1, ...obj2 }; 
console.log(mergedObj); // { a: 1, b: 20, c: 3 }

• obj1과 obj2의 속성을 한 객체에 합쳐 넣습니다.
• 키(b)가 충돌하는 경우, 나중에 오는 obj2의 속성값으로 덮어써집니다.

이 역시 얕은 복사이므로, 중첩 객체가 있을 경우 참조가 공유된다는 점을 유의해야 합니다.

2-4. 함수 호출 시 Spread

함수 호출에 spread를 사용하면, 배열(또는 이터러블)을 인자 리스트로 펼칠 수 있습니다.

function printThreeValues(x, y, z) { console.log(x, y, z); }
const values = [10, 20, 30]; printThreeValues(...values); // 10 20 30

• values 배열을 [10, 20, 30] 그대로 펼쳐서 printThreeValues(10, 20, 30) 형태로 호출합니다.
• 덕분에 배열을 함수에 그대로 전달하기 편해집니다.

---

3. 결론 & 요약

1. 나머지 파라미터(Rest Parameter)
   • 함수 정의 시 사용(파라미터 위치)
   • 전달된 인자들을 배열로 모아서 받을 수 있음
   • 마지막 파라미터에만 사용 가능
2. 전개 구문(Spread Syntax)
   • 배열, 객체, 함수 호출 등에서 사용
   • 요소들을 하나씩 펼쳐서 붙이거나, 인자로 전달할 수 있음
   • 배열 합치기, 객체 합치기, 함수 호출 시 인자 전달 등에 유용

두 문법이 모두 ... 형태로 같아 보이지만, 함수 정의 vs. 다른 위치에서 쓰이면
의미가 완전히 다릅니다.

• “함수의 인자를 하나로 묶겠다” → 나머지 파라미터
• “이미 있는 데이터(배열·객체 등)를 펼쳐 넣겠다” → 전개 구문

이 차이를 명확히 구분해두면, JavaScript 코드를 작성할 때 더 깔끔하고 직관적인 코드를 짤 수 있습니다.

---

참고 사항

• 나머지 파라미터와 arguments 객체의 차이:
  • arguments는 유사 배열(Array-like)이고, 화살표 함수에서는 사용 불가.
  • 나머지 파라미터는 실제 배열이며, 화살표 함수에서도 문제없이 사용할 수 있음.
• 전개 구문으로 문자열도 펼칠 수 있음(문자열은 이터러블).

const str = "ABC"; const arr = [...str]; // ["A", "B", "C"]

---

마치며

... 문법은 JavaScript를 다루다 보면 매우 자주 만나게 됩니다.
처음엔 헷갈리더라도, “함수 정의 위치에서의 ... = 나머지 파라미터, 그 외 위치에서의 ... = 전개 구문”이라고 기억하면 훨씬 쉬워집니다.

이상으로 **나머지 파라미터(Rest Parameter)**와 **전개 구문(Spread Syntax)**에 대한 소개를 마칩니다.
궁금한 점이나 추가 질문이 있다면 언제든 코멘트 남겨주세요!

읽어주셔서 감사합니다.