자바스크립트 나머지 매개변수와 전개 문법

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

 

예)

- Math.max(arg1,arg2,...,argN) - 인수 중 가장 큰수를 반환한다.

- Object.assign(dest, src1 ..., srcN) - src1..N의 프로퍼티를 dest로 복사한다.

 

나머지 매개변수 ...

함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에는 제약이 없다.

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

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

함수를 정의할 떄 인수를 두 개만 받도록하고 실제 함수를 호출할때는 이보다 더 많은 여분의 인수를 전달했지만

에러가 발생하지 않았다. 

다만 반환값은 처음 두개의 인수만을 사용해 계산된다.

 

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

이 때 마침표 세개 ... 는 "나머지 매개변수들을 한데 모아 배열에 집어넣어라."는 것을 의미한다.

 

예) 모든 인수가 배열 args에 모인다.

function sumAll(...args) { // args는 배열의 이름입니다.
  let sum = 0;

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

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

 

앞부분의 매개변수는 변수로, 그 이외의 변수들은 배열로 모을 수도 있다.

예)  처음 두 인수는 변수에 나머지 인수들은 titles이라는 배열에 할당된다.

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // 나머지 인수들은 배열 titles의 요소가 됩니다.
  // titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

 

#나머지 매개변수는 항상 마지막에 있어야한다.

 - 나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 

 

 

 

arguments 변수

arguments 라는 특별한 유사 배열 객체를 이용하면 인덱스를 사용해 모든 인수에 접근할 수 있다.

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

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

// 2, Julius, Caesar가 출력됨
showName("Julius", "Caesar");

// 1, Ilya, undefined가 출력됨(두 번째 인수는 없음)
showName("Bora");

나머지 매개변수는 비교적 최신의 문법이다.

과거에는 함수의 인수 전체를 얻어내는 방법이 arguments를 사용하는 것 밖에 없었다.

 

arguments는 유사 배열 객체이면서 이터러블(반복가능한) 객체이다.

따라서 배열 메서드를 사용할 수 없다는 단점이 있다. arguments.map(...)을 호출할 수 없다.

 

여기에 더하여 arguments는 인수 전체를 담기 때문에 나머지 매개변수 처럼 인수의 일부만 사용할 수 없다는 단점도 있다.

 

배열 메서드를 사용하고 싶거나 인수 일부만 사용하고자 할 때는 나머지 매개변수를 사용하는 것이 좋다.

 

 

#화살표 함수에는 'argument'가 없다

화살표 함수ㅏ에서 arguments 객체에 접근하면 외부에 있는 일반 함수의 arguments객체를 가져온다.

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

 

 

spred문법

전개 문법(spread syntax)는 ...를 사용하기 때문에 나머지 매개변수와 비슷해보이지만, 전개 문법은 나머지 매개변수와 반대의 역할을 한다.

 

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

 

예) Math.max

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (전개 문법이 배열을 인수 목록으로 바꿔주었습니다.)

 

이터러블 객체 여러개를 전달하는 것도 가능

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

.

평범한 값과 혼합해 사용하는 것도 가능

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

 

배열을 합칠 때 전개 문법을 활용할 수도 있다.

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

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

alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)

 

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

 

예) 전개문법을 사용하여 문자열을 문자 배열로 변환

let str = "Hello";

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

전개 문법은 for..of와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집한다.

 

문자열에 for..of를 사용하면 문자열을 구성하는 문자가 반환된다.

...str도 "H","e","l","l","o"가 되는데, 이 문자 목록은 배열 초기자(array initializer) [...str]로 전달

 

메서드 Array.from은 문자열 같은 이터러블 객체를 배열로 바꿔주기 때문에 Array.from을 사용해도 동일한 작업을 할 수 있다.

let str = "Hello";

// Array.from은 이터러블을 배열로 바꿔줍니다.
alert( Array.from(str) ); // H,e,l,l,o

[...str]과 동일한 결과가 출력되는 것을 확인할 수 있다.

 

Array.form(obj)와 [...obj]의 차이

- Array.from은 유사 배열 객체와 이터러블 객체 둘다에 사용할 수 있다.

- 전개 문법은 이터러블 객체에만 사용할 수 있다.

때문에 Array.from이 보편적으로 사용된다.

 

 

 

사용패턴:

- 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용

- 다수의 인수를 받는 함수에 배열을 전달할 때 전개 문법을 사용

 

 

출처 : ko.javascript.info/rest-parameters-spread