[JavaScript] 나머지 매개변수(...)와 스프레드 문법

상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않는다.

1. 나머지 매개변수 (...)

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

alert( sum(1, 2, 3, 4, 5) );

뜨헉쓰🤯 함수를 정의할 땐 인수를 두개만 받고, 실제 함수를 호출할 땐 이보다 더 많은 '여분의' 인수를 전달했지만 에러가 발생하지 않는다. 다만 반환값은 처음 처음 두개의 인수만을 사용해 계산된다.

 

여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 (...) 뒤에 붙여주면 함수 선언부에 포함시킬 수 있다.

이 때 마침표 세개는 "남아있는 매개변수들을 한데 모아 배열에 집어넣어라"는 의미임

function sumAll(...args) { 
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

console.log( sumAll(1) ); // 1
console.log( sumAll(1, 2) ); // 3
console.log( sumAll(1, 2, 3) ); // 6

앞부분의 매개변수는 변수로, 남아있는 매개변수들을 배열로 모을 수도 있다.

function showName(firstName, lastName, ...titles) {
  console.log( firstName + ' ' + lastName );

  // titles = ["Software Engineer", "Researcher"]

}

showName("Bora", "Lee", "Software Engineer", "Researcher");

** 나머지 매개변수는 항상 마지막에 있어야 한다. 나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 아래 코드에선 에러 발생!!

function errorCode(arg1, ...rest, arg2) { // ...rest 후에 arg2가 있으면 안 됩니다.
  // 에러
}

 

2. arguments 객체

유사 배열 객체(array-llike object)인 arguments를 사용하면 인덱스를 사용해 인수에 접근할 수 있다.

function showName() {
  console.log( arguments.length );
  console.log( arguments[0] );
  console.log( arguments[1] );

  // arguments는 이터러블 객체이기 때문에
  // for(let arg of arguments) alert(arg); 를 사용해 인수를 펼칠 수 있습니다.
}


showName("Bora", "Lee");
//2
//"Bora"
//"Lee"

showName("Bora");
//1
//"Bora"
//undefined

** arguments는 유사 배열 객체이면서 이터러블(반복가능한) 객체이다. (어쨌든 배열은 아님) 따라서 arguments.map()과같은 배열 메서드는 사용할 수 없다.

또한 arguments는 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다. 결론적으로 배열 매서드를 사용하거나 인수 일부만 사용할 때는 나머지 매개변수 사용해라~~

 

** 화살표 함수는 arguments 객체를 지원하지 않는다. (화살표함수에서 arguments 객체에 접근하면, 외부에 있는 일반 함수의 arguments 객체를 가져온다고 한다.)

 

3. 스프레드 문법 (...)

...를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 스프레드 문법은 나머지 매개변수와 반대되는 역할을 한다.

함수를 호출할 때 ...arr 를 사용하면, 이터러블 객체arr이 인수 목록으로 '확장'된다.

let arr = [3, 5, 1];

console.log( Math.max(...arr) );
//arr 배열이 인수목록을 바뀜

//이터러블 객체 여러개를 전달하는것도 가능
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(...arr1, ...arr2) );

//다른 값과 혼합해서 사용하는 것도 가능
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(1, ...arr1, 2, ...arr2, 25) ); 

//배얼을 합칠때도 활용 가능
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

console.log(merged);

배열이 아니더라도 이터러블 객체이면 스프레드 문법을 사용할 수 있다.

//문자열에서의 스프레드 문법
let str = "Hello";

console.log( [...str] ); // H,e,l,l,o

4. 배열과 객체의 복사본 만들기

 

스프레드 문법을 사용하면 배열의 깊은 복사가 가능하다.

let arr = [1, 2, 3];
let arrCopy = [...arr]; 
// 배열을 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에 매개변수 목록을 새로운 배열에 할당하는 것.

console.log(JSON.stringify(arr) === JSON.stringify(arrCopy)
//True, 복사본과 기존 배열의 "요소"들은 같다.

console.log(arr === arrCopy)
//False, 하지만 참조는 다르기 때문에 같은 배열은 아니다.

//참조가 다르기 때문에 기존 배열을 수정해도 복사본은 영향을 받지 않는다.

스프레드 문법은 객체의 깊은 복사도 가능하게 한다.

let obj = { a: 1, b: 2, c: 3 };
let objCopy = { ...obj }; 
// 객체를 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에 매개변수 목록을 새로운 객체에 할당.

console.log(JSON.stringify(obj) === JSON.stringify(objCopy)); 
// true, 두개의 프로퍼티는 같음

console.log(obj === objCopy); 
// false, 참조가 다르기 때문에 같은 객체는 아니다.