실행 컨텍스트를 만들면서 외부의 Scope와 내부의 Scope를 설정하는 것을 포스팅했습니다.
이번에는 매개변수는 실행 컨텍스트에서 어떻게 처리되는지에 대해 포스팅하겠습니다.

JS에서 Argument 처리구조

arguments object

• 함수가 호출 되고 Execution Context가 초기화 될 때, arguments라는 오브젝트를 생성한다.
• arguments는 Array-like한 객체로 인자로 주어진 값들이 {key : 값}형태로 arguments에 삽입된다.
  • 여기서 key값은 매개변수 명이 아니다. 0부터 증가하는 정수다.
  • Array-like라고 말하는 이유는, JS의 Built-in Object인 Array의 메소드를 사용할 수 없기 때문이다.(Array의 Prototype Object와 연결이 끊어져 있다고 보면 된다.)
• 즉, arguments는 [{0:인자1},{1:인자2}] 형태로 저장된다.
• arguments 객체 또한 Lexical Env에 저장된다.

function get() { return arguments }
console.log(get("A", "B")); //=> ["A","B",메타데아터들]

function get2() {return arguments.filter((v)=>true))
console.log(get("A","B")) //=> 에러! arguments.filter is not a function

Mapping

arguments 오브젝트 설정이 완료되고 난 뒤, Execution Context 초기화가 이뤄질 때 arguments의 원소들의 value와 매개변수가 순서에 맞게 Mapping된다.

function get(one) { return one; };
get(77, 100); //=> 77

Mapping되면서, Execution Context의 Lexical Env(자세히는, 선언적환경레코드)에 {매개변수 이름 : 인자로 넘어온 값} 형태로 저장된다.

동작을 순차적으로 설명해보면 다음과 같다.

1. get(77, 100)을 호출하면서 실행컨텍스트 생성과 초기화 작업이 시작된다.
2. arguments는 [{0:77}, {1:100}] 형태로 먼저 저장된다.
3. 매개변수 one과 인자 77이 mapping되어 선언적 환경 레코드에 {one: 77}형태로 저장된다.

우리가 함수 호출 시 인자를 선언된 것 보다 많이 줘도 arguments 배열에 저장된 후, 매개변수 개수에 만큼 mapping되기 때문에 에러가 발생하지 않는 것이다.