[JavaScript] Spread Operator vs Rest Parameter

Intro

(...) 이게 뭐야 할 말 생략 된건가... 자바에서는 자주 써보지 않았지만 가변인자라고 있는걸 아는데, 스프레드 연산자, 나머지 파라미터 단어부터 생소하네

나머지 연산자는 자바의 가변인자랑 비슷한걸려나?

Spread Operator (전개 구문)

배열이나 객체를 펼쳐서(전개해서) 사용하는 연산자이다.

배열에서 Spread 사용

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 기존 배열을 변경하지 않고 새로운 배열을 만들 때
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 출력: [1, 2, 3, 4, 5, 6]

// 배열 복사 (깊은 복사)
const arr4 = [...arr1]; // 기존 배열을 변경하지 않음 
console.log(arr4); // 출력: [1, 2, 3]

// 배열 요소 추가
const arr5 = [...arr1, 4, 5];
console.log(arr5); // 출력: [1, 2, 3, 4, 5]

객체에서 Spread 사용

const user = { name: "Alice", age: 25 };

// 객체를 복사하거나 새로운 속성을 추가할 때
const updatedUser = { ...user, location: "Seoul" };
console.log(updatedUser); // 출력: { name: "Alice", age: 25, location: "Seoul" }

// 객체 속성 덮어쓰기
const updatedUser = { ...user, age: 30 }; // age 값을 변경 

console.log(updatedUser); // 출력: { name: "Alice", age: 30 }

 

Rest Parameter (나머지 연산자)

함수의 매개변수에서 사용되어 가변 인자를 받을 때 사용

여러 개의 인자를 하나의 배열로 받기

function sum(...numbers) { // ...numbers는 전달된 모든 숫자를 배열로 받는다
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 출력: 15

첫 번째 값은 변수로, 나머지는 배열로 받기

function firstAndRest(first, ...rest) { // first에는 첫 번째 값만 들어가고, 나머지는 rest 배열에 저장
  console.log("첫 번째 값:", first);
  console.log("나머지 값들:", rest);
}

firstAndRest(1, 2, 3, 4, 5);
/* 출력
첫 번째 값: 1 
나머지 값들: [2, 3, 4, 5]
*/

---

마무리

모습은 똑같은 ... 인데 입력 파라미터로 받으면 Rest Paratemeter 이고,  그 외에서 사용하면 Spread Operator 로 사용되며전개 구문 같은 경우에는 그냥 자신의 [] 또는 {} 으로 되어있는 울타리를 열어버려서 싸그리 풀어버리는 느낌이고,

나머지 매겨변수는 쉽게 배열로 여러개의 데이터를 받는다고 생각하면 편할거 같다

 

[참고]

MDN - Spreand Syntax 문서