개발 R.I.P.

6.01 Dev.Feedback(Rest 파라미터, arguments)

편행 2021. 6. 1. 10:00
반응형

Rest 파라미터

 

Rest 파라미터는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

 

function foo(...rest) {
console.log(Array.isArray(rest)); // true;
console.log(rest); // [1, 2, 3, 4, 5]


foo(1, 2, 3, 4, 5);

함수에 전달된 인수들은 순차적으로 파라미터와 Rest 파라미터에 할당된다.

 

function foo(param, ...rest) {
  console.log(param); // 'first'
  console.log(rest);  // [ 'second', 'third' ]
}

foo('first', 'second', 'third');

// 첫 번째 인수만 정의된 경우

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

// 두 번째 인수까지 정의된 경우

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

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

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

// 두 번째 인수까지 정의된 경우,
// rest 파라미터 상에서 각각의 요소를 나눠서 파악할 수 있다는 것을 볼 수 있음.

Rest 파라미터는 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당되기 때문에, Rest 파라미터는 반드시 마지막에 위치해야한다.

 

Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

 

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

function baz(x, y, ...rest) {}
console.log(baz.length); // 2

 

Arguments 객체

 

ES6에서 rest 파라미터가 등장하기 전,

인자의 개수를 사전에 알 수 없는 가변 인자 함수의 경우에 인수를 확인할 수 있는 방법이었다.

 

arguments 객체는 함수 호출시 전달된 인수들의 정보를 담고 있는 순회 가능한(iterable) 유사 배열 객체이고, 함수 내부에서 지역 변수처럼 활용될 수 있다.

 

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

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
더보기
더보기

순회 가능한(iterable)

 

이터레이터는 '반복자'라는 의미로, 이터러블(Iterable, 순회 가능한 자료구조)의 요소를 탐색하기 위한 포인터로서 next()함수를 가지고 있는 객체다.  '내부의 요소들을 반복하여 볼 수 있게 하는 객체' 

Array, String, Map, Set, DOM이 이터러블이고, 이런 것을 반복할 수 있게 하는 것이 이터레이터다.

배열의 형상을 갖고만 있는 유사배열 객체이기에 Array Method 적용이 되지 않는다.

만일 적용을 하고 싶다면, Array.from()을 통해 배열로 변경을 해주어야 한다.

 

또한 모든 arguments를 항상 전부 포함하기때문에, 각각의 요소들을 나눌 수 없다. 그렇기에 현재는 Rest 파라미터가 더 많이 사용되고 있다.

 

화살표 함수에는 함수 객체의 arguments 프로퍼티가 없다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

 

const arrowFunc = () => {};
console.log(arrowFunc.hasOwnProperty('arguments')); // false

 

반응형