모던 자바스크립트

Rest Parameter

나머지 매개 변수(rest parameter) 구문은 정해지지 않은 수(an indefinite number, 부정수)를 배열로 나타낼 수 있게 합니다.

영상 강의

PART 1

codepen



예제

ES5에서는 기본 값(default values), 정해지지 않은 인자(indefinite arguments), 이름이 있는 매개 변수(named parameters)를 다루는 함수 구현 방법이 너무 많았습니다. ES6+ 부터는 보다 간결한 문법을 통해 이것들을 모두 다룰 수 있습니다.

나머지 매개 변수(Rest Parameter)

기존 코드에서는 인자의 숫자가 정해지지 않은 경우 다음과 같이 처리했습니다.

function logArguments() {
  for (var i=0, l=arguments.length; i < l; ++i) {
    console.log(arguments[i]);
  }
}

ES6+ 부터는 전개 연산자를 사용해 다음과 같이 정해지지 않은 인자의 집합을 처리할 수 있습니다.

function logArguments(...args) {
  args.forEach(arg => console.log(arg));
}

이름이 있는 매개 변수(Named Parameter)

기존 코드에서 이름이 있는 매개 변수를 처리하는 방법 중 하나는 jQuery 코드에서 영감을 받은 객체 옵션(Option Object) 패턴을 사용하는 것입니다.


 
 
 





function initializeCanvas(options) {
  const height     = options.height || 720;
  const width      = options.width  || 480;
  const lineStroke = options.lineStroke || '#122122';
  console.log(`height = ${height}`);
  console.log(`width = ${width}`);
  console.log(`lineStroke = ${lineStroke}`);
}

ES6+ 부터는 구조 분해 할당(Destructuring Assignment)을 사용해 보다 손쉽게 이름이 있는 매개변수를 구현할 수 있습니다.

 









function initializeCanvas({ height=720, width=480, lineStroke='#122122'}) {
  console.log(`height = ${height}`);
  console.log(`width = ${width}`);
  console.log(`lineStroke = ${lineStroke}`);
}

initializeCanvas({
  lineStroke: '#786e51'
});

주의!

단, 함수의 인자를 전달하지 않은 경우 null이 전달되어 오류가 발생합니다.

// Cannot destructure property `height` of 'undefined' or 'null'.
initializeCanvas();

인자를 전달하지 않아도 오류 없이 기본 설정된 매개 변수를 사용하려면 다음과 같이 빈 객체를 기본 매개변수로 설정합니다.

 







function initializeCanvas({ height=600, width=400, lineStroke='black'} = {}) {
  console.log(`height = ${height}`);
  console.log(`width = ${width}`);
  console.log(`lineStroke = ${lineStroke}`);
}

initializeCanvas(); // OK

참고

← Spread Operator →