Javascript : Spread 연산자와 Rest 연산자

JavaScript에서 ... 문법은 Spread 연산자와 Rest 연산자 두 가지 방식으로 사용된다.
각각 배열(Array) 및 객체(Object)의 데이터를 효율적으로 다룰 수 있도록 도와준다

✔️ Spread 연산자

1) 배열(Array)에서 사용

const numbers = [1, 2, 3];

const hardNumbers = [numbers[0], numbers[1], numbers[2], 4, 5];
// 틀린 것은 아니다. 결과는 같지만 밑의 Spread와 비교하면...
const easyNumbers = [...numbers, 4, 5];

console.log(hardNumbers); // [1, 2, 3, 4, 5]
console.log(easyNumbers); // [1, 2, 3, 4, 5]

hardNumbers 처럼 index로 잡아서 담을수도 있다.
easyNumbers 처럼 Spread 연산자를 활용하면 훨씬 간결해진다.

---

2) 함수의 매개변수로 사용

function sum(a, b, c) {
    return a + b + c;
}

const values = [10, 20, 30];
console.log(sum(...values)); // 60

함수 호출 시 각각의 인자를 매개변수에 전부 적어줄 필요 없이
...values 한번으로 간단하게 끝낼 수 있다.

---

3) 객체(Object)에서 사용

const person = { name: "박철수", age: 25 };
const newPerson = { ...person, city: "서울" };

console.log(newPerson); // { name: "박철수", age: 25, city: "서울" }

person 에 없던 city 속성을 추가해줄 때
name 과 age 를 각각 호출할 필요 없이
...person으로 간단하게 중첩 선언이 가능하다.

---

✔️ Rest 연산자

...Rest 연산자는 꼭 Rest로만 사용해야 하는것은 아니다.
...numbers 가 될수도 ...people 이 될수도 있다.

1) 함수의 가변 인자 처리

function sumAll(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
// reduce 메서드  : 배열의 각 요소를 순회하면서 누적 연산을 수행
// 현 예제에서는 1+2 = 3, 3+3 =6 과 같은 루트로 진행

console.log(sumAll(1, 2, 3, 4, 5)); // 15

위 예제에서 sumAll 함수는 여러 개의 숫자를 매개변수로 받아
배열 numbers로 저장한 후, reduce 메서드를 사용해 모든 값을 합산한다.

---

2) 배열(Array) 구조 분해

const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]

배열에서 일부 요소만 특정 변수 빼고, 나머지 요소들은 ...rest로 관리가 가능하다.

---

3) 객체(Object) 구조 분해

const user = { id: 1, name: "김영희", age: 28, city: "부산" };
const { id, ...details } = user;

console.log(id);      // 1
console.log(details); // { name: "김영희", age: 28, city: "부산" }

id 값만 선언해준 뒤, 나머지 인적사항인 details를 Rest 연산자로 따로 빼서 활용 가능하다.

---

📝 Spread 연산자 vs Rest 연산자

연산자	Spread (...)	Rest (...)
사용 위치	배열, 객체, 함수 호출	함수 매개변수, 구조 분해 할당
역할	요소를 펼쳐서 개별 요소로 변환	나머지 요소를 모아 배열 또는 객체로 저장

Spread 연산자 (...) : 배열/객체를 개별 요소로 분해하여 확장할 때 사용

Rest 연산자 (...) : 함수 매개변수 또는 구조 분해 할당에서 나머지 요소를 모아 배열 또는 객체로 저장할 때 사용