자바스크립트 딥 다이브 26장 ES6 함수의 추가 part-2

수요일만 출근하면 일본으로 간다.

Arguments

화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 argumnts 를 참조한다.

(function() {
	const foo = () => console.log(arguments); // [Arguments] { '0' : 1, '1' : 2} 
  foo(3,4);
}(1, 2));

// 화살표 함수 foo의 argumnets 는 상위 스코프인 전역의 argumnets 를 가리킨다.
// 하지만 전역에는 arguments 객체가 존재하지 않는다. arguments 객체는 함수 내부에서만 유효하다.
const foo = () => console.log(arguments);
foo(1, 2);

arguments 객체는 함수를 정의할 때 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다. 하지만 화살표 함수에서는 arguments 객체를 사용할 수 없다. 상위 스코프의 argumnets 객체를 참조할 수는 있지만 화살표 함수 자신에게 전달된 인수 목록을 확인할 수 없고 상위 함수에게 전달된 인수 목록을 참조하므로 그다지 도움되진 않는다,

Rest 파라미터

Rest 파라미터 (나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(...rest) {
  // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
  console.log(rest); // [ 1, 2, 3, 4, 5 ]	
}

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

일반 매개변수와 Rest 파라미터는 함께 사용할 수 있다. 이때 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.

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);

Rest 파라미터는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다.

따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

function foo (...rest1, ...rest2) {
  foo(1, 2, 3, 4, 5);
  // SyntaxError: Rest parameter must be last formal parameter
}

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
}

Rest 파라미터와 arguments 객체

ES6 에서는 Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다. 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.

function sum(...args) {
	// Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]가 할당
  	return args.reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

함수와 ES6 메서드는 Rest 파라미터와 argumnets 객체를 모두 사용할 수 있다. 하지만 화살표 함수는 함수 자체의 arguments 객체를 갖지 않는다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

매개변수 기본값

함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 바람직하지만 그렇지 않은 경우도 에러는 발생하지 않는다,

• undefined 반환

function sum(x, y) {
	return x + y;
}

console.log(sum(1)); // NaN

따라서 다음 예제와 같이 매개변수 인수가 잘 전달 되었는지 확인하여 인수가 전달되지 않은 경우 매개변수에 기본값을 할당할 필요가 있다.

function sum(x, y) {
	x = x || 0;
  	y = y || 0;
  
  	return x + y;
}

console.log(sum(1, 2)); // 3
console.log(sum(1); // 1

하지만 ES6 에서는 간소화 할수 있다.

function sum(x = 0, y = 0) {
	...
}

Rest 파라미터는 기본값은 지정이 불가능 하다

오늘은 여기까지~!