[JavaScript] 인자 개수가 자유로운 함수 선언(arguments)

나 같은 경우에는 실제 서비스를 개발 시 인자 개수가 자유로운 함수를 정의해야 할 일이 거의 아니 없었다. 근데 알고리즘을 한 번씩 풀다 보면 문제나 예제에 함수 호출 시 argument를 자유롭게 넣는 그런 예시들을 보고 함수 선언을 어떻게 해야 하나 잠시 뇌가 멈췄던 경험을 방지하기 위해 정리한다.

 

혹시 parameter나 argument에 대해 헷갈리거나 잘 모른다면 이 글을 먼저 보고 오자

https://coking.tistory.com/28

[JavaScript] parameter vs argument

 

areThereDuplicates(1, 2, 3)
areThereDuplicates(1, 2, 2)
areThereDuplicates('a', 'b', 'c', 'a')

만약에 이런 식으로 인자를 마음대로 넣는 함수를 만들어야 한다면 어떻게 해야 할까 바로 arguments를 사용하면 된다.

 

arguments는 모든 함수 내에서 이용 가능한 지역 변수이고 arguments를 사용하여 함수 내에서 모든 인수를 참조할 수 있다.  단 arguments는 배열이 아닌 유사 배열 객체이므로 length를 제외한 어떤 Array 속성도 존재하지 않는다. 만약 실제 Array로 변환하고 싶다면  Array.from() 메서드나 spread syntax(전개 구문)를 사용하면 된다. 

let args = Array.from(arguments);
let args = [...arguments];

 

이제 arguments를 어떻게 사용하는지 확인해 보자 

function test() {
    console.log(arguments);
}


test(1,2,3,4,5,6);
// Arguments(6) [1, 2, 3, 4, 5, 6, callee: ƒ, Symbol(Symbol.iterator): ƒ]

이런 식으로 arguments를 사용하면 함수 선언 시 parameter를 지정하지 않아도 호출 시 사용하는 argument들을 사용할 수 있다.  arguments는 Rest parameters(나머지 매개변수), default parameters(기본 매개변수), Destructuring assignment(구조 분해 할당)와 함께 사용될 수 있다. 그러나 비엄격 함수에서는 함수가 Rest parameters(나머지 매개변수), default parameters(기본 매개변수), Destructuring assignment(구조 분해 할당)를 포함하지 않을 경우에만 arguments가 제공된다고 하니 유의하자 

 

그러나!

MDN 공식에서는 ES6 문법을 사용하고 있다면 Rest parameter를 arguments를 대신해서 사용하길 권장한다. 

function foo(arg1, arg2, ...correct) {
    console.log(arg1, arg2, correct)
    console.log(arguments);
}

foo(1,2,3,4,5,6,7,8);
// 1 2 [3, 4, 5, 6, 7, 8]
// Arguments(8) [1, 2, 3, 4, 5, 6, 7, 8, callee: (...), Symbol(Symbol.iterator): ƒ]

 

 그 이유는

 

1. 위에도 말했듯이 arguments는 실제 배열이 아니다. 그러나 Rest parameter를 사용하면 Array 인스턴스이므로 sort, map 등의 메서드를 직접 사용할 수 있다.
2. arguments는 callee 속성과 같은 추가 기능을 포함한다. 
3. Rest parameter는 후속 매개변수만 배열에 포함하므로 Rest parameter이전에 직접 정의한 매개변수는 포함하지 않지만 arguments는 Rest parameter의 각 항목까지 더해 모든 매개변수를 포함한다. 

 

주의!! 함수에서 Rest parameter 사용 시 Rest parameter는 하나만 존재할 수 있고 또한 항상 마지막 매개변수이어야 한다.

function foo(...one, ...wrong, ...wrong2) {
	console.log(one,wrong,wrong2);
}
// Uncaught SyntaxError: Rest parameter must be last formal parameter


function foo(...wrong, arg2, arg3) {
	console.log(wrong, arg2, arg3);
}
// Uncaught SyntaxError: Rest parameter must be last formal parameter

function foo(arg1, arg2, ...correct) {
	console.log(arg1, arg2, correct);
}
// good