스코프
스코프 체인
스코프가 계층적으로 연결된 것
전역 스코프>지역 스코프
변수를 참조할 때 스코프 체인을 통해 상위 스코프 방향으로 이동하며 선언된 변수를 검색함.
스코프
함수 레벨 스코프
: var 키워드로 선언된 변수는 코드 블록이 아닌 함수에 의해서만 지역 스코프로 인정됨. 지역은 함수 내부를 의미하고 지역은 지역 스코프를 만듦.
var i=10;
var j=1;
funtion foo(){
var i=0;
var k=2;//지역 스코프
console.log(i,j,k);//0,1,2
}
console.log(i);//10 : 전역 스코프
console.log(j);//1 : 전역 스코프
console.log(k);//참조 오류블록 레벨 스코프
: 모든 코드 블록(if, while)은 지역 스코프를 만듦. let과 const 키워드 지원.
var i=10;
for(var i=0;i<5;i++){}
console.log(i);//i=5렉시컬 스코프
: 정적 스코프. 함수를 어디서 호출하는지가 아니라 어디에 선언하는지에 따라 상위 스코프가 결정됨.
평가 단계에서 코드들의 스코프를 결정하기 때문.
var x = 1; // global
function first() {
var x = 10;
second();
}
function second() {
console.log(x);
}
first(); // 10
second(); // 10실행 컨텍스트
소스코드의 평가와 실행
- 소스코드의 평가
실행 컨텍스트 생성
변수, 함수 등의 선언문만 먼저 실행
=>생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록 - 소스코드의 실행=런타임
변수나 함수의 참조를 스코프에서 검색하여 취득
소스코드의 실행 결과(변수 값 변경 등)를 스코프에 다시 등록
소스코드 실행 과정에서 선언이 제대로 되었는지, 변수가 등록되었는지 확인 필요
실행 컨텍스트 스택
: 코드의 실행 순서 관리.
const x=1;
function foo(){
const y=2;
function bar(){
const z=3;
console.log(x+y+z);
}
bar();
}
foo();-
전역 코드 평가와 실행
평가 : 전역 실행 컨텍스트(전역 스코프)에 x와 foo 등록
실행 : x에 값 할당, foo 호출 -
foo 함수 코드의 평가와 실행
전역 코드의 실행 일시 중단
평가 : foo 함수 실행 컨텍스트 생성하고 스택에 푸시. 지역 변수 y와 중첩 함수 bar가 foo함수 컨텍스트에 등록됨.
실행 : y에 값 할당, bar 호출 -
bar 함수 코드의 평가와 실행
foo 함수의 실행 일시 중단
평가 : bar 함수 실행 컨텍스트 생성하고 스택에 푸시. 지역 변수 z가 bar함수 컨텍스트에 등록됨.
실행 : z에 값 할당, console.log 메서드 호출 후 종료 -
foo 함수 코드로 복귀
bar 함수 실행 컨텍스트를 실행 컨텍스트를 스택에서 팝하고 종료. -
전역 코드로 복귀
foo 함수 실행 컨텍스트와 전역 실행 컨텍스트를 실행 컨텍스트를 스택에서 팝하고 종료.
렉시컬 환경
: 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조. 실행 컨텍스트를 구성하는 컴포넌트. 스코프와 식별자를 관리.
스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할.
실행 컨텍스트 생성과 식별자 검색 과정
var x=1;
const y=2;
function foo(a){
var x=3;
const y=4;
function bar(b){
const z=5;
console.log(a+b+x+y+z);
}
bar(10);
}
foo(20);1. 전역 객체 생성
전역 객체는 전역 코드가 평가되기 전에 생성됨.
포함하는 것 : 빌트인 전역 프로퍼티, 빌트인 전역 함수, 표준 빌트인 객체, 동작환경에 따라 클라이언트 사이트 Web API또는 특정 환경을 위한 호스트 객체
전역 객체는 Object.prototype을 상속받으며 프로토타입 체인의 일원임.
모든 객체는 전역객체의 프로퍼티임.
웹브라우저에서 전역객체는 window이지만 node.js에서는 global.
> func();
> window.func();//객체.속성();
//같은 기능을 함.2. 전역 코드 평가
1. 전역 실행 컨텍스트 생성
2. 전역 렉시컬 환경 생성
2.1. 전역 환경 레코드 생성
2.1.1. 객체 환경 레코드 생성
2.1.2. 선언적 환경 레코드 생성
2.2. this 바인딩
2.3. 외부 렉시컬 환경에 대한 참조 결정
3. 전역 코드 실행
4. foo 함수 코드 평가
1. 함수 실행 컨텍스트 생성
2. 함수 렉시컬 환경 생성
2.1. 함수 환경 레코드 생성
2.2. this 바인딩
2.3. 외부 렉시컬 환경에 대한 참조 결정
5. foo 함수 코드 실행
6. bar 함수 코드 평가
1. 함수 실행 컨텍스트 생성
2. 함수 렉시컬 환경 생성
2.1. 함수 환경 레코드 생성
2.2. this 바인딩
2.3. 외부 렉시컬 환경에 대한 참조 결정
7. bar 함수 코드 실행
1. console 식별자 검색
2. log 메서드 검색
3. 표현식 평가
4. console.log 메서드 호출
8. bar 함수 코드 실행 종료
9. foo 함수 코드 실행 종료
10. 전역 코드 실행 종료
