Arguments

arguments 개념

• 함수는 arguments라는 지역 변수를 가지고 있으며, 이를 통해서 함수를 호출할때 입력되는 인수를 볼 수 있다.
• 함수안에서 볼수 있고 이름과 특성은 정해져 있다.
  • 이름 : arguments
  • 특성 : 유사 배열 형태의 객체. 배열은 아니지만 배열의 .length 속성은 사용할 수 있다.
• 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않으며, 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 저장된다.

사용

예시 1

  function sum(a, b) {
    console.log(arguments);
    return a + b;
  }
  
  console.log(sum());  // NaN
  console.log(sum(1));  // NaN
  console.log(sum(1, 2));  // 3
  console.log(sum(1, 2, 3));  // 3

• 위 예시의 함수 속 콘솔은 아래와 같이 나온다.

• console.log(sum()); // NaN

  • 인수가 전달되지 않는 매개변수는 undifined로 초기화된 상태를 유지한다. length는 0으로나오고 프로퍼티는 없기때문에 나오지 않는것을 볼 수 있다.

    {
      length: 0,
      callee: ƒ sum(),
      __proto__: {
        ...
      }
    }
    

• console.log(sum(1)); // NaN

  • 인수가 전달되지 않는 매개변수는 undifined로 초기화된 상태를 유지한다. 전달된 인수가 하나이기 때문에 length는 1로, 프로퍼티 또한 전달받은 하나의 인자가 0으로 인덱싱되어서 나온다.

    {
      '0': 1,
      length: 1,
      callee: ƒ sum(),
      __proto__: {
        ...
      }
    }
    

• console.log(sum(1, 2)); // 3

  • 인수가 모두 전달되었기 때문에 undefined로 초기화된 매개변수가 없이 전달받은 인수들이 모두 나오고, 함수는 계산된 값을 출력해준다.

    {
      '0': 1,
      '1': 2,
      length: 2,
      callee: ƒ sum(),
      __proto__: {
        ...
      }
    }
    

• console.log(sum(1, 2, 3)); // 3
  • 매개변수의 개수보다 더 많은 인수가 전달되었다. 이 경우에는 초과된 인수를 무시한 후 결과값을 출력하게 된다.

  • 하지만 초과된 인수는 버려지지 않고 arguments 객체의 프로퍼티로 보관되어있는 것을 볼 수 있다.

    {
      '0': 1,
      '1': 2,
      '2': 3,
      length: 3,
      callee: ƒ sum(),
      __proto__: {
        ...
      }
    }
    

예시 2 (권장하지 않는 방식이라고 함)

• function.arguments

  function pat(n) { mat(n - 1); }  // 순서 : 2-1, 5-1
      
  function mat(n) {  // 순서 : 2-2, 5-2
    console.log('before: ' + mat.arguments[0]);  // 순서 : 3, 6
    if (n > 0) { pat(n); }  // 순서 : 4
    console.log('after: ' + mat.arguments[0]);  // 순서 : 7, 8(?)
  }
      
  pat(2);  // 순서 1
      
  console.log('returned: ' + mat.arguments);  // 9
  

  • 위 코드의 순서
    1. pat에 인수 2를 대입 하여 pat함수 호출
    2. pat함수의 매개변수는 mat에 (n-1)이라는 인수로 전달되며 mat(1)로 함수 호출
    3. mat함수 첫번재 줄 before : 1 출력
    4. 두번째 줄 if 조건 만족하여 pat에 인수 1이 전달되며 pat함수 호출
    5. 2번과 똑같이 pat함수의 매개변수는 mat에 (n-1)이라는 인수로 전달되며 mat(0)로 함수 호출
    6. 3번과 똑같이 mat함수 첫번째 줄 before : 0 출력
    7. 두번째 줄 if 조건에 부합하지 않음으로 패스하고 세번째 줄 after : 0 출력
    8. 4번에서 mat 함수 속의 if에 걸려서 pat이 호출됨으로 인해 함수 mat(1)이 끝나지 않고 대기하고 있다가 mat(0)이 after : 0을 출력하며 끝이나자 이어서 after : 1을 출력
    9. console.log('returned: ' + g.arguments); 의 g.arguments는 mat함수 밖이라서 return: null 값으로 출력

    

    • 사진에서는 pat 함수에 console.log(pat.arguments[0])을 추가했다.
    • 처음 전달해준 pat의 인수는 2인데 console에는 1이 먼저 출력되고 2가 출력된다.
    • 그 이유가 뭔지 생각해보자! (참고: call stack)