[JS] arguments 뜯어보기🍖

✔️ arguments란?🤔

arguments란 함수에 전달되는 인수들을 배열 형태로 나타낸 객체이다.
몇 개의 인수가 전달될지 모르는 상황에서 활용하면 좋다.

• arguments 사용 예시1

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

• arguments 사용 예시2

function foo(...args) {
  console.log(arguments);
  // [Arguments] { '0': 1, '1': 2, '2': 3 }
}
foo(1, 2, 3);

arguments 요소는 재할당도 가능하다.

function zoo(a) {
  arguments[0] = 100;
  console.log(a); // 100
}
zoo(10);

But, 기본 매개변수를 사용하면 재할당 불가.

function zoo(a = 1) {
  arguments[0] = 100;
  console.log(a); // 10
}
zoo(10);

---

🍖 화살표 함수에서의 arguments

화살표 함수에는 arguments를 정의할 수 없다.

그래서 arguments를 사용하려면 스프레드 문법(...)을 활용해야 한다.
스프레드 문법을 사용하면 [object Arguments]가 아니라 [object Array]가 출력된다.

즉, 배열로 바로 출력되기에 활용 시 배열로 변형해줄 필요가 없다.

const arrowFn = (...args) => {
  console.log(args); // [ 'a', 'b', 'c' ]
  console.log(toString.call(args)); // [object Array]
};
arrowFn("a", "b", "c");

---

🍖 arguments를 배열로 변형

arguments는 배열이 아닌 유사 배열 객체이다.
때문에 배열로 사용하고 싶다면 변형하는 작업이 필요하다.

1. 스프레드 문법 활용

function argsFn(...args) {
  console.log(args); // [ 'a', 'b', 'c' ]
  console.log(toString.call(args)); // [object Array]
};
argsFn("a", "b", "c");

2. Array.prototype.slice.call(arguments)

function argsFn(ar1, ar2, ar3) {
  console.log(toString.call(args)); // [object arguments]

  const arr = Array.prototype.slice.call(arguments); // 배열로 변환
  console.log(arr); // ['a', 'b', 'c']
  console.log(toString.call(arr)) // [object Array]
};
argsFn("a", "b", "c");

3. [].slice.call(arguments)

function argsFn(ar1, ar2, ar3) {
  console.log(toString.call(arguments)); // [object arguments]

  const arr = [].slice.call(arguments); // 배열로 변환
  console.log(arr); // ['a', 'b', 'c']
  console.log(toString.call(arr)); // [object Array]
}
argsFn("a", "b", "c");

참고 링크1 mdn
참고 링크2 블로그