es6를 배우다 보면 뭐 물론... 지금은 자바스크립트겠지만... arrow function과 일반 function의 차이로 arguments가 없다라는 문장을 항상 볼 수 있다.
그런데... 배우는 입장에서 arguments? 그게 뭔데? 라는 생각을 해본적이 있을 것이다. 딱히 알았다고 해도 이걸 어따 쓰지... 이 생각도 들었을 것이다. 일단 parmeter와 argument의 차이를 알자.
function foo(bar) {
console.log(bar)
}
foo(3)
위의 함수는 뭐 설명하기도 민망한 함수를 만들어 보았다. 뭐 설명 하는데 어려운 코드가 필요 한것은 아니니. foo를 3이라는 인자(argument)로 호출 하였다. foo라는 함수는 bar라는 매개변수(paramter)를 console.log의 인자로 이용하여 호출 하고 있다.
자 여기서 arguments와 parameter는 큰 차이를 갖는다.
function foo(bar) {
console.log(bar)
// 1
console.log(arguments)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
foo(1, 2, 3)
parameter bar를 이용해서는 하나의 값만 갖지만, arguments로 접근하여 Arguments 객체에 1, 2, 3값이 있는 것을 볼수있다. Arguments는 유사배열이라고 보면 된다. 인덱스가 있고, length가 있으며 iterable protocol을 만족 하고 있다.
여기서 특이한 호출 방법을 알려주자면 아래와 같다.
function foo(bar) {
console.log(bar)
// 1
console.log(arguments)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
foo(...[1, 2, 3])
함수 호출시 iterable, iteration protocol 객체라면 전개연산자로 호출이 가능하다. 당연하게도 foo(1, 2, 3), foo(...[1, 2, 3])의 결과는 똑같다.
자 그래서 arguments는 뭐에 어떻게 쓰는건데? 뭐 딱보아도 몇개의 인자로 호출하기 애매할때 쓸 수 있다. 뭐 물론 배열을 만들어서 호출하면 되지만...
function join() {
const separator = arguments[0]
return [...arguments].splice(1, arguments.length - 1).join(separator)
}
join(',', 1, 2, 3, 4)
// 1,2,3,4
뭐 위와 같은 코드이지만... 난 개인적으로는 이런코드 좋아하지 않는다. 매개변수가 없는 함수... 어떤 인자를 보내야 하는지 애매한 함수 말이다. 위의 코드는 아래와 같은 코드로 변경 가능 할 것이다.
function join(separator, ...arr) {
return arr.join(separator)
}
join(',', 1, 2, 3, 4)
// 1,2,3,4
이것도 애매하다 아래와 같이 바꾸자.
function join(separator, arr) {
return arr.join(separator)
}
join(',', [1, 2, 3, 4])
// 1,2,3,4
훨씬 편안한 코드가 되었다. 그러면 arguments는 어떨때 쓸까? 여러개의 인자를 받아야 한다면 배열을 전달하면 될 뿐이다.
따지고 보면 인자의 갯수도 애매한 상황이지만, 각각의 데이터 형태도 애매할 때 일 것이다. 그런 함수를 만들어야 되는 경우 대체 무엇일까? 우리는 그런 함수를 안다. javascript함수를 처음 만들었을 때 그 함수를 사용 했을 것이다.
console.log(1, 2, 3, [1, 2, 3, 4])
// 1 2 3 [1, 2, 3, 4]
바로 위와 같은 경우이다. console.log 함수 같은 경우가 인자의 갯수 데이터 타입이 애매한 경우의 대표격일 것이다. 위와 같은 함수를 만들일은 별로 없을 것이다. 하지만 그런때가 된다면 arguments를 떠올리기 바라며...
댓글
댓글 쓰기