codinghatso

나머지 파라미터 활용 ES6 본문

WEB/JavaScript

나머지 파라미터 활용 ES6

hatso 2022. 1. 13. 17:15

ES6에서 추가된 함수 파라미터를 확장하는 기능입니다. 가변 파라미터를 사용할 수 있도록 해 사실상 함수 파라미터를 무한대로 활용할 수 있습니다.

 

나머지 파라미터를 사용하면 함수의 파라미터 개수 별로 별도의 함수를 정의할 필요가 없어집니다.

 

함수 내부에서 가변 파라미터를 처리할 수 있도록 추가 파라미터 배열을 제공하기 때문에 가변 파라미터에 대한 대응도 가능합니다.

// 함수 정의 방법 예
// 파라메터를 args 변수(배열)에 담아 함수 내부로 넘김
function restparams(...args) {
  console.log(args);
}
restparams(1, 2, 3, 4, 5, 6, 7, 8, 9);

파라미터 개수가 필수 파라미터 개수보다 작은 경우 나머지 파라미터는 빈 배열로 전달되며, 부족한 필수 파라미터는 "Undefined"가 전달됩니다.

//최소 파라메터 요구 /나머지 파라메터 사용 예
const rest2 = (arg1, arg2, ...args) => {
  console.log([arg1, arg2, args]);
};
rest2(1, 2, 3, 4);
rest2(1, 2);
rest2(1);

나머지 파라미터는 반드시 마지막에 오는 파라미터로 사용해야 합니다.

이 규칙을 어길시 "Rest parameter must be last formal parameter"구문 오류가 발생합니다.

//나머지 파라메터로 합계 구하기 예
function sum(a, b, ...args) {
  let result = 0;
  if (a != undefined) {
    result = a;
  } else {
    return 0;
  }
  if (b != undefined) {
    result += b;
  }
  args.forEach(function (arg) {
    result += arg;
  });
  return result;
}
console.log(sum(1, 2, 3, 4));
console.log(sum(1, 2));
console.log(sum(1));

화살표 함수와 reduce()메서드 활용

//나머지 파라메터로 합계 구하기 개선 예
const sum2 = (a, b, ...args) => {
  let result = 0;
  if (a != undefined) {
    result = a;
  } else {
    return 0;
  }
  if (b != undefined) {
    result += b;
  }
  result += args.length > 0 ? args.reduce((subsum, arg) => (subsum += arg)) : 0;
  return result;
};
console.log(sum2(1, 2, 3, 4));
console.log(sum2(1, 2));
console.log(sum2(1));

*reduce() 메서드는 콜백 함수(리듀서 함수로 칭함)로 배열 요소들의 누적 계산 결과 값을 얻는 메서드.

'WEB > JavaScript' 카테고리의 다른 글

문장과 표현식을 구분하자  (0) 2023.03.21
화살표 함수  (0) 2022.01.13
펼침 연산자 spread operator, 전개 구문  (0) 2022.01.13
커링(Curring) 함수 기초  (0) 2022.01.13
함수 parameter  (0) 2022.01.13
Comments