자바스크립트 arguments를 사용한 가변 인자 함수 활용

자바스크립트의 aruments는 유사 배열 객체를 생성하는 내부 함수입니다. 이는 함수 호출 시, 함수에 선언된 매개 변수보다 더 많은 인자를 전달하는 경우 등에 활용할 수 있습니다.

유사 배열(Array-like)이란 arguments가 길이 속성과 프로퍼티를 갖고 있지만, 배열에서 사용할 수 있는 내장 메소드인 forEach(), map() 등을 사용할 수 없는 객체를 의미합니다.

먼저, arguments의 작동 방식을 이해해 보도록하겠습니다. 아래의 경우처럼, 각 함수에 할당한 인자가 arugments에 유사 배열 형태로 할당됩니다.

function func1(a, b, c) {
    console.log(arguments[0]); // 1
    console.log(arguments[1]); // 2
    console.log(arguments[2]); // 3
}

func1(1, 2, 3);

이를 활용해 전달하는 인자를 모두 더하는 함수를 만들어보도록 하겠습니다.

function add() {
  let result = 0;
    for (let i in arguments) {
        result += arguments[i]
    }    return result
}

add(1, 2, 3) // 6
add(1, 2, 3, 4, 5) // 15

arguments를 활용하여 다음과 같이 두 객체를 비교하고, 특정 객체에 존재하지 않는 키와 값을 다른 객체에 추가하는 함수를 만들어 볼 수도 있습니다.

function extend (obj) {
  for (let i in arguments) {
    for (let j in arguments[i]) {
      obj[j] = arguments[i][j];
    }
  } return obj;
}

const obj1 = {
  a: 1,
  b: 2,
}

const obj2 = {
  c: 3,
  d: 4,
}

console.log(extend(obj1, obj2)); // { a: 1, b: 2, c: 3, d: 4 }

참고: The arguments object