(11) Modern JavaScript - 아규먼트(Arguments) 객체

아래와 같이 파라미터 3개를 활용해서 함수를 호출하고자 한다.

// Arguments

function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}
printArguments("Jung", "Sang", "hwa");

 

이렇게 만든 함수는 호출할 때 꼭 3개의 아규먼트를 작성해 줘야하는 문제가 있는데

그 이유를 확인하기 위해 아래와 같이 코드를 작성하였다.

// Arguments

function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

이전 글 "파라미터와 아규먼트" 를 봤다면 아마 결과가 어떻게 나올지 예상 될 것이다.

아규먼트를 1개나 2개를 전달하게 되면서

아무런 값도 전달 받지 못한 파라미터가 undefined 값을 갖고 동작하게 된다.

---

반대로 3개 보다 많은 아규먼트를 전달하게 되면

3개 이후에 전달된 값은 그냥 무시되어버리는 문제가 발생한다.

// Arguments

function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

 

문자열 Keria 값이 출력되지 않음

---

이렇게 전달되는 아규먼트의 패턴이 다양할 때 

아규먼트가 1개가 전달되면 1개만 출력하고 

4개가 전달되면 4개 모두를 출력하도록 

아규먼트 개수에 따라 유연하게 동작하는 함수를 만들기 위해 arguments라는 객체를 사용한다.

 

Arguments

자바스크립트에서 함수를 선언할 때 함수 내부에서 'arguments' 객체를 사용할 수 있으며

시각화 하기위해 arguments 객체를 출력해보면 

// Arguments

function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(arguments);
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

파라미터와 관계 없이 함수를 호출할 때 전달한 아규먼트들이

대괄호 안에 각 요소로 담겨있는 것을 확인할 수 있다.

보이는 것과 같이 arguments 객체는 배열과 비슷해 보이지만

모양만 그럴 뿐 배열의 메소드는 사용할 수 없는 유사 배열이다.

 

그래도 length 프로퍼티로 아규먼트 개수를 확인할 수도 있고 (arguments.length)

function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(arguments.length);
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

 

indexing을 통해서 아규먼트 하나하나 접근을 한다거나 (arguments[1])

function printArguments(a, b, c) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments.length);
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

 

혹은 for...of문을 통해서 반복 작업도 할 수 있으며

function printArguments(a, b, c) {
  for (const arg of arguments) {
    console.log(arg);
  }
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");

printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

 

위와 같이 arguments 객체를 활용하면 호출할 때 전달되는 아규먼트에 따라 

유연하게 동작하는 함수를 만들어 낼 수 있다.

---

함수 내부에서 자동으로 만들어지는 arguments라는 객체를 통해서

함수를 호출할 때 전달한 아규먼트를 유연하게 다루는 방법을 알아봤는데 

 

사용할 때 한가지 주의해야할 점은 arguments라는 객체가 

함수 내부에 특정한 기능으로 존재하기 때문에 

파라미터의 이름을 arguments로 짓거나

함수 내부에서 arguments라는 이름의 변수나 함수를 만들면 안된다.

 

---

▶GitHub

https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/Modern_JS/10.Arguments

JavaScript_soloPlay/Modern_JS/10.Arguments at main · SeopE9611/JavaScript_soloPlay

 

 

▶ Notion

https://purrfect-gargoyle-935.notion.site/14ae9530b3e1806ab7d7c397ca7fe83a?pvs=4

글자 추출 | Notion