90-10.dev 에 처음 게시되었습니다.

TLDR; 특수arguments 객체는 정의에 아무 것도 지정되지 않은 경우에도 JavaScript 함수에 전달된 모든 인수 목록을 보유합니다. 그리고 창의적인 방법으로 사용할 수 있습니다! 😉

"일반" 기능 정의

함수는 일반적으로 필요한 경우 다음 괄호에 지정된 인수와 함께 function 키워드를 통해 정의됩니다. 아래 예에서는 2개의 매개변수가 있는 sayHello 함수를 정의했습니다.

function sayHello(name, business) {
  console.log(`Hello ${name} from ${business}!`);
}
sayHello("Paul", "90-10.dev"); // "Hello Paul from 90-10.dev!"

함수 내에서 매개변수는 함수 정의에 지정된 이름을 통해 액세스됩니다(이 경우에는 name & business).

인수 객체

그러나 전달된 데이터가 저장되는 특수arguments 객체를 통해 함수에 전달된 데이터에 액세스하는 또 다른 방법이 있습니다.

function sayHello() {
  console.log(arguments);
}
sayHello("Paul", "90-10.dev");

콘솔에 다음이 표시됩니다.

Arguments { 0: "Paul", 1: "90-10.dev", ... }

그리고 실제로 arguments가 객체인지 확인할 수 있습니다.

console.log(typeof arguments); // object

... 그리고 얼마나 많은 인수가 전달되었는지 확인하고 모든 인수를 나열할 수도 있습니다.

function sayHello() {
  console.log(arguments.length);
  for(let arg of arguments) {
    console.log(arg);
  }
}

인수 사용

인덱스를 사용하여 배열과 같은 방식으로 인수에 액세스할 수 있습니다.

function sayHello() {
  console.log(`Hello ${arguments[0]} from ${arguments[1]}!`);
}
sayHello("Paul", "90-10.dev"); // "Hello Paul from 90-10.dev!"

인수 수정

인수는 즉시 수정할 수도 있습니다.

function sayHello() {
  arguments[0] = "World";
  console.log(`Hello ${arguments[0]} from ${arguments[1]}!`);
}
sayHello("Paul", "90-10.dev"); // "Hello World from 90-10.dev!"

다음 단계

What are JavaScript functions and how to use them

Using Anonymous functions

Arrow functions

MDN Function docs

Other 90-10.dev JavaScript articles