나머지 매개변수 & 전개 연산자

나머지 매개변수 (rest parameter)

• 나머지 매개변수는 파라미터 이름 앞에 ...기호를 더해 임의의 매개변수를 정의하는 것으로 나머지 전달인자를 하나의 배열로 반환한다.
• 반환 값이 배열이기 때문에 sort, map, forEach와 같은 메소드를 사용해 편리하게 데이터를 사용할 수 있다.

배열로 반환

function log(...args) {  
  console.log(args);  
}

const num1 = 1;
const num2 = 2;
const num3 = 3;
const arr = []
const obj = {}

log(num1, num2, num3, arr, obj) // [1, 2, 3, [], {}]

forEach 사용예시

function sum(...rests) {
  let total = 0;
  rests.forEach((rest) => {
    total += rest;
  });
  console.log(total);
}

sum(1, 10); // 11
sum(1, 10, 100); // 111
sum(1, 10, 100, 1000); // 1111

함수의 매개변수를 rest parameter로 정의하여 몇개의 전달인자를 넣어도 그 값을 모두 더해 출력해주는 코드이다. 위 설명처럼 값이 배열로 반환되는 특성을 이용해 forEach 메소드로 모든 값을 더했다.

---

전개 연산자(Spread syntax)

• 전개 연산자는 배열같이 반복적인 요소를 펼쳐서 확장시켜주는 역할을 한다.

const arr = [1, 2, 3];

const arr2 = [arr, 4, 5, 6];

const arr3 = [...arr, 4, 5, 6];

console.log(arr2); // [[1, 2, 3], 4, 5, 6  => length : 4 / 2차원 배열
console.log(arr3); // [1, 2, 3, 4, 5, 6]	  => length : 6 / 1차원 배열

전개 연산자를 사용하지 않고 기존 arr과 새로운 데이터를 조합해 배열을 생성하니 배열의 형태가 통째로 들어가 2차원 배열로 생성된다.

전개 연산자를 사용하니 1차원 배열의 형태로 생성되는 것을 볼 수 있습니다. 그러나 2차원 이상의 배열을 추가해줄 경우 2차원 이상의 형태까지 모두 펼쳐주는 것은 아니다.

---

배열 및 객체 복사

배열의 복사는 [...arr]를 이용하면 됩니다.

const arr = [1, 2, 3];
const arr2 = [...arr];

arr2.push(4);
console.log(arr); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

객체의 복사는 {...obj}를 이용하면 됩니다.

const obj = { a: 1, b: { c: 2 } };
const obj2 = { ...obj };

obj.a = 2;
obj.b.c = 3;
console.log(obj); // {a: 1, b:{c: 3}}
console.log(obj2); // {a: 2, b:{c: 3}}
console.log(obj === obj2); // false
console.log(obj.b.c === obj.b.c); // true

전개연산자(Spread) 문법은 객체를 복사할 때 1차원 깊이에서 효과적으로 동작합니다. 그러나 Object.assign() 를 이용한 객체 복사와 같이 완벽한 깊은 복사(deep copy)가 되지 않으므로 위 예제와 같이 다차원 배열 적합하지 않을 수 있습니다.