JavaScript의 나머지 매개변수

숫자 인수를 받을 수 있는 자신만의 JavaScript 함수를 만드는 꿈을 꾼 적이 있습니까? 오늘 우리는 최신 JavaScript 구문을 사용하여 이를 수행하는 방법을 배웁니다. 이미 짐작하셨겠지만 해당 구문의 이름은 나머지 매개변수입니다.

나머지 매개변수

함수의 마지막 매개변수 앞에 점 3개(...)를 넣으면 마지막 매개변수를 나머지 매개변수라고 합니다.

그렇게 하면 오른쪽에 있는 나머지 매개변수의 위치에서 해당 함수에 지정된 인수에 얼마든지 액세스할 수 있으며 배열에 싸여 있습니다. 예를 들어:

function foo(a, b, ...c) {
  console.log('a:', a);
  console.log('b:', b);
  console.log('c:', c);
}

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

다음을 인쇄합니다.

a: 1
b: 2
c: [3, 4, 5, 6]

참고: 나머지 매개변수가 제공하는 배열은 표준 JavaScript 배열이므로 사용 가능한 모든 배열 메서드를 사용할 수 있습니다.

이것이 나머지 매개변수에 대해 알아야 할 전부입니다.

정보: JavaScript의 ...는 사용 위치에 따라 다른 의미를 가질 수 있습니다. ...를 사용하는 다른 JavaScript 구문은 spread syntax 및 destructuring assignment입니다.

나머지 매개변수가 없을 때…

고대부터 JavaScript는 모든 일반 함수(비화살표 함수)에 우리가 제공하는 모든 인수를 보유하는 배열과 같은 객체를 가리키는 arguments 이라는 로컬 변수를 제공합니다. 그러나 개발자는 이러한 접근 방식에서 거의 문제에 직면하지 않습니다. 예를 들어:

배열이 아니므로 배열 메서드가 작동하지 않습니다.

arguments 객체를 실제 배열로 변환하려면 추가 상용구 코드가 필요합니다.

ES6에서는 이러한 한계를 극복하기 위해 rest 파라미터가 도입되었습니다.

수업 과정

이해를 돕기 위해 아래 연습을 수행하십시오.

의견 섹션에 답변을 자유롭게 추가하십시오. 내 답변을 확인할 수 있습니다here.

인수가 지정되지 않은 경우

다음 코드의 출력은 무엇입니까?

function foo(...args) {
  console.log(args);
};

foo();

가산기

숫자를 첫 번째 인수로 사용하는 adder라는 함수를 작성하십시오. 첫 번째 인수 다음에 숫자 인수를 취합니다. adder의 기능은 다음과 같습니다.

가져오는 다른 모든 숫자에 첫 번째 인수의 숫자를 더하고 배열에 포함된 모든 결과 숫자를 반환합니다.

이 글이 도움이 되셨다면 커피 한 잔 사주세요.