[Javascript] arguments의 개념과 활용

함수의 arguments에 대한 개념과 활용에 대해 알아보도록 하겠다.

 

 

 

 

 

목차

1. arguments 개념
2. 화살표 함수에서의 arguments
3. arguments를 배열로 변형
4. arguments 활용

 

 

 

 

 

 

1. arguments 개념

자바스크립트에서 전달된 인수와 매개변수의 개수는 서로 같지 않아도 된다. 매개변수의 개수보다 인수가 더 적을 경우 넘어오지 않은 값은 undefined로 표시된다. 매개변수 개수보다 초과된 인수는 무시된다.

 

function print(ar1, ar2) {
    console.log(ar1, ar2);
}
 
print(); // undefined undefined
print('a'); // a undefined
print('a', 'b'); // a b
print('a', 'b', 'c'); // a b

즉, 함수에 넘어오는 인수가 몇 개이든 상관이 없기 때문에 함수가 동작하기 전에 인수의 개수를 확인하여 동작을 다르게 해야 한다. 이를 위해 인수를 저장해놓은 공간이 바로 arguments다.

 

arguments란, 함수에 전달되는 인수들을 배열 형태로 나타낸 객체이다. arguments는 변수 이름이 아닌 키워드이다. 형태만 배열이기 때문에 배열 메서드(map, forEach 등)를 사용하면 에러가 뜬다. 전달받은 인수에 접근할 때에는 배열 접근법과 같은 방식으로 접근하면 된다. 

 

function print(ar1, ar2, ar3) {
    console.log(arguments[0]); // a
    console.log(arguments[1]); // b
    console.log(arguments[2]); // c
}
 
print('a', 'b', 'c');

 

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

 

function print(ar1, ar2, ar3) {
    arguments[0] = 'z';
    console.log(arguments[0]); // z
}
 
print('a', 'b', 'c');

 

 

 

구성

• arguments.callee : 현재 실행 중인 함수
• arguments.length : 전달된 인수의 개수
• arguments[] : 배열 형식으로 전달된 인수

 

 

 

 

 

 

2. 화살표 함수에서의 arguments

화살표 함수에는 arguments를 정의할 수 없었다. 화살표 함수에서 arguments를 출력하면 오류가 뜬다.

 

const print = () => {
    console.log(arguments);
    // Uncaught ReferenceError: arguments is not defined
}
print('a', 'b', 'c');

 

 

그래서 화살표 함수에서 arguments를 사용하려면 스프레드 문법(...)을 활용해야 한다. 스프레드 문법 사용의 장점은 [object Arguments]가 아닌 [object Array] 즉, 배열로 바로 출력된다는 것이다. 활용 시 배열로 변형해줄 필요가 없다.

 

 

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

 

 

 

 

 

 

 

 

3. arguments를 배열로 변형

앞서 말했다시피 arguments는 배열이 아닌 유사 배열 객체이기 때문에 배열로 사용하고 싶다면 변형하는 작업이 필요하다. 두 가지 방법이 있다.

 

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

function print(ar1, ar2, ar3) {
    console.log(toString.call(arguments)); // [object Arguments]
 
    const array = Array.prototype.slice.call(arguments); // 배열로 변환
    console.log(array); // ['a', 'b', 'c']
    console.log(toString.call(array)); // [object Array]
}
 
print('a', 'b', 'c');

 

 

2) [].slice.call(arguments)

 

function print(ar1, ar2, ar3) {
    console.log(toString.call(arguments)); // [object Arguments]
 
    const array = [].slice.call(arguments); // 배열로 변환
    console.log(array); // ['a', 'b', 'c']
    console.log(toString.call(array)); // [object Array]
}
 
print('a', 'b', 'c');

 

 

3) 스프레스 문법 활용

 

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

 

 

 

 

 

 

 

4. arguments 활용

그렇다면 이 arguments를 어디에 활용하면 될까? 아래와 같이 몇 개의 인수가 전달될지 모르는 상황에서 활용하면 된다. 인수가 몇 개든 arguments에 배열의 형태로 저장해두기 때문이다.

 

function checkNum() {
    const array = Array.prototype.slice.call(arguments); // 배열로 변형
    const check = array.every((value) => {
        return typeof value === "number"
    });
    console.log(check); // false
}
 
const numbers = checkNum(11, 22, 99, "66");