Javascript의 함수 ( arguments, Rest파라미터, apply )

horiz.d·2021년 12월 14일

JS 꿀단지

목록 보기

12/35

함수(functions)

JS의 함수 주요 특징

변수나 데이터 안에 담길 수 있다.
매개변수로 전달할 수 있다.
반환 값으로 사용할 수 있다.
실행도중 생성될 수 있다. ( 함수를 생성하는 함수를 활용 )

javascript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있다. return문 은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용된다. 리턴문이 없으면 (혹은 값이 없는 리턴이 사용되면), javascript는 undefined를 돌려준다.

function add(x, y) {
  let total = x + y;
  return total;
}

초과 매개변수 입력

함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수 있다.

add(2, 3, 4) //5
// 함수에서 정의된 앞의 두 매개변수만 더해진다. (4는 무시됨)

위의 예시에서 4는 무시되고 사용되지 않았다. 하지만 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근하고 활용할 수 있다.

이를 활용하는 객체를 arguments라고 하며, 해담 함수에 매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체이다. 우리가 원하는 만큼 값을 취하여 활용하는 add 함수를 아래에서 사용해 보겠다.

function add() {
  let sum = 0;
  for ( let i = 0, j = arguments.length; i < j; i++ ){
    sum += arguments[i];
  }
  return sum;
}

add(2,3,4,5,6); // 20

위에서 인자로 받은 2,3,4,5,6은 모두 선언부에서 미리 지정되지 않은 매개변수로 모두 초과로 받아낸 매개변수이다. 따라서, 이는 모두 함수 내부의 arguments라는 배열과 비슷한 객체에 저장되어 함수 내부에서 활용되었다.

arguments활용 예제 : average함수

function avg() {
  var sum = 0;
  for (var i = 0, j = arguments.length; i < j; i++) {
    sum += arguments[i];
  }
  return sum / arguments.length;
}

avg(2,3,4,5); //3.5

이건 유용하지만 복잡해보인다. 초과되는 파라미터를 받는 arguments 객체가 배열과 유사하지만 결정적으로는 배열이 아니기 때문에 발생한 복잡성이다. 따라서 우리는 이 초과 매개변수들을 배열로 받아 활용하여 코드를 최적화하기 위해, arguments의 사용을 Rest 파라미터 문법 으로 대체할 필요가 있다.

REST 파라미터 문법

Rest파라미터 문법 을 사용하면 코드 크기는 최소한으로 유지하면서, 갯수 제한 없이 함수로 인자를 전달할 수 있다.

REST파라미터 연산자 : (...variable)
이와 같은 포맷으로 함수 매개변수 목록에 사용된다. 이 variable 인자는 함수가 호출될 때 전달되는 모든 인자를 배열로서 포함한다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 for 루프를 for..of로 변경한다.

function avg(...args) {
    var sum = 0;
    for (let value of args) {
        sum += value;
    }
    return sum / args.length;
}

avg(2, 3, 4, 5); // 3.5

위 코드에서, 변수 args는 함수로 전달된 모든 값을 가지고 있다. rest파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치 이후에 모든 인자를 저장하는 것 이며, 이전이 아니라는 것이 중요하다. 즉, function avg(firstValue,...args)에서 함수로 전달된 첫번째 값은 firstValue 매개변수에 저장되며, 남은 변수들은 args라는 배열에 저장된다.

하지만 위와 같은 방식으로는 각 item을 input에 나열하여 그것들의 평균은 얻을 수 있지만 배열 그 자체를 input으로 받아 items의 평균을 구할 수는 없다.

이는 아래와 같은 수정을 거쳐 해결할수 있다.

    function avgArray(arr) {
      var sum = 0;
      for (var i = 0, j = arr.length; i < j; i++) {
        sum += arr[i];
      }
      return sum / arr.length;
    }

    avgArray([2, 3, 4, 5]); // 3.5