[자바스크립트 중고급] Argument, 스코프

Argument 처리 매커니즘

Argument 처리 구조

function get() {
    return arguments;
};
console.log(get{"A", "B")); // {0: A, 1: B}

• 파라미터를 {key: value} 형태로 저장한다.
  • 파라미터 수만큼 0부터 인덱스를 부여한다.
  • key로 사용한다.
  • 파라미터로 받은 값을 value에 설정한다.
  • {0: param1, 1: param2}
• 이러한 형태를 Array-like라고 한다.
  • key값이 0부터 1씩 증가해야 한다.
  • length 프로퍼티가 있어야 한다.

엔진의 파라미터 처리

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

1. get() 함수를 호출하면서 77과 100을 파라미터 값으로 넘겨준다.
2. 넘겨받은 값을 함수의 파라미터 이름에 설정한다.
   • 정적 환경의 선언적 환경 레코드에 설정한다.
   • one: 77
3. Argument 오브젝트를 생성한다.
4. 넘겨받은 파라미터 수를 Argument 오브젝트의 length 프로퍼티에 설정한다.
5. 넘겨받은 파라미터 수만큼 반복하면서 0부터 key로 하여 순서대로 파라미터 값을 설정한다.
   • {0: 77}, {1: 100} 형태가 된다.
6. 함수의 초기화 단계에서 실행한다.

---

스코프(Scope)

스코프 목적

• 범위를 제한하여 식별자를 해결하려는 것

식별자 해결(Identifier Resolution)

• 변수 이름, 함수 이름을 찾는 것
• 이때 스코프를 사용
• 이름을 찾게 되면 값을 구할 수 있다.
• 크게는 이름을 설정하는 것도 식별자 해결이다.
• 스코프는 식별자 해결을 위한 것이다.

스코프 설정

function book() {
    var point = 123;
    function get() {
        console.log(point);
    };
    get();
};
book();

1. 엔진이 function book() {}을 만나면
2. function 오브젝트를 생성하고
3. 스코프를 설정한다.
   • 생성한 function 오브젝트의 [[Scope]]에 스코프를 설정한다.
   • 즉, 이때 스코프가 결정된다. (정적 스코프)
4. 마지막 줄에서 book() 함수를 호출한다.
5. 엔진 컨트롤이 book 함수 안으로 이동한다.
6. function get(){}을 만나게 되어 function 오브젝트를 생성한다.
7. 스코프를 설정한다.
   • function 오브젝트의 [[Scope]]에 스코프를 설정한다.
   • 이때 스코프가 결정된다.
8. get() 함수를 호출한다.

Global 오브젝트

• var value = 100;
  • 100을 value 변수에 할당한 것은 value로 검색하여 값을 사용하기 위한 것이다.
• 함수 안에 변수를 선언하면 변수가 함수에 속하게 된다.
• 그러나 value 변수를 함수 안에 작성하지 않으면 value 변수가 속하는 오브젝트가 없고, 이때 글로벌 오브젝트에 설정된다.
• 이런 매커니즘을 구현할 수 있는 것은 글로벌 오브젝트가 하나만 있기 때문이다.

글로벌 오브젝트 특징

• JS 소스 파일 전체에서 글로벌 오브젝트는 하나만 존재한다.
  • new 연산자로 인스턴스 생성 불가능

Global 스코프

• 글로벌 오브젝트가 글로벌 스코프이다.
• 오브젝트는 개발자 관점으로, 오브젝트에 함수와 변수를 작성한다.
• 스코프는 식별자 해결을 위한 것으로, 엔진 관점이다.
• 글로벌 스코프는 최상위 스코프로, 함수에서 보면 최종 스코프이다.

스코프 바인딩

바인딩

• 구조적으로 결속된 상태로 만드는 것을 의미한다.
  • 대상: 프로퍼티 이름
• 바인딩 목적
  • 스코프 설정, 식별자 해결
• 바인딩 시점 구분
  • 정적 바인딩(Lexical, Static Binding)
  • 동적 바인딩(Dynamic Binding)

정적, 동적 바인딩

정적(렉시컬) 바인딩

• 초기화 단계에서 바인딩
• 함수 선언문 이름을 바인딩
• 표현식(변수, 함수) 이름을 바인딩
• JS는 대부분 정적 바인딩이다.

동적 바인딩

• 실행할 때 바인딩
• eval() 함수, with문

바인딩 시점의 중요성

• 바인딩 시점이 중요한 이유는 바인딩할 때 스코프가 결정되기 때문이다.
• function 오브젝트 생성 시점에 스코프가 결정된다.
  • 스코프를 function 오브젝트의 [[Scope]]에 설정한다.
  • 스코프가 변경되지 않는다.
• 함수 안의 모든 함수의 스코프가 같다.