스코프(유효범위) : 식별자가 유효한 범위 || 식별자를 검색할 때 사용되는 규칙
모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다
var x = 'global';
function foo() {
var x = 'local';
console.log(x); // 1. local
}
foo();
console.log(x) // 2. global위 예시에서 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정해야 한다. 이를 식별자 결정 이라고 한다.
렉시컬 환경
코드가 어디서 실행되며 주변에 어떤 코드가 있는지 확인하기 위해 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체이다.
스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 변수를 사용할 수 있다.
스코프의 종류
-
전역 스코프 : 코드의 가장 바깥 영역에 위치하며 전역에서 선언된 변수는 전역 스코프를 갖는다.
어디서든 참조할 수 있다. -
지역 스코프 : 함수 몸체 내부에서 선언되며 지역에서 선언된 변수는 지역 스코프를 갖는다.
자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
스코프 체인
스코프가 계층적 구조로 연결된 것
변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 따라서 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다.
상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.
함수 레벨 스코프
var 키워드로 선언된 변수는 함수의 코드 블록 만을 지역 스코프로 인정
블록 레벨 스코프
const, let으로 선언된 변수는 모든 코드 블록 내부의 지역 스코프 생성
렉시컬 스코프
함수를 어디서 정의했는지에 따라 상위 스코프 결정 (호출 위치 x)
let i = 10; // 전역 스코프
function foo() {
let i = 100; // (함수 레벨 스코프)
for (let i = 1; i < 3; i ++) {
console.log(i); // 1 2 (블록 레벨 스코프)
}
console.log(i); // 100
}
foo();
console.log(i); // 10바인딩
식별자와 값을 연결하는 과정
this 바인딩은 this와 this가 가리킬 객체를 바인딩 하는 것
자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다.
렉시컬 스코프와 this 바인딩
- 렉시컬 스코프는 함수 객체가 생성(선언)되는 시점에 상위 스코프를 결정
- this 바인딩은 함수 호출 시점에 결정
일반 함수 호출
기본적으로 this에는 전역 객체가 바인딩 됨 / 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩 됨
메서드 호출
메서드 내부의 this에는 메서드를 호출한 객체 앞에 기술한 객체에 바인딩 됨
생성자 함수 호출
생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩 된다.
apply, call 메서드
함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 한다.
