실행 컨텍스트

실행 컨텍스트

: 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체

• 호이스팅
• 외부 환경 정보 구성
• this값 설정
• 실행컨텍스트란?
  
  • 스택
  • : LIFO(Last In First Out)
  • 큐
  • : FIFO(First In First Out)
  • 콜 스택
    • 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성해 쌓아 올림
    • (동일한 환경 : 전역 공간, eval() 함수, 함수)
    • 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서 보장
  • 실행 컨텍스트 실행
    • 순서(3) 전역 컨텍스트 > outer
      • -inner 함수 내부 a변수에 3 할당
      () 전역 컨텍스트 > outer
      • • a 값 출력(undefined)
      () 전역 컨텍스트
      • • a 값 출력(1)
    • (2) 전역 컨텍스트 > outer > inner
    • (1) 전역 컨텍스트
    • 실행 컨텍스트 객체 구성
      • VariableEnvironment선언 시점의 LexicalEnvironment의 스탭샷(변경 사항 반영 X)

: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보,

• LexicalEnvironment : 초기값은 VariableEnvironment와 같으나 변경 사항이 실시간 반영됨
• ThisBinding : 식별자가 바라봐야 할 대상 객체

// ---------------------(1) 
var a = 1; 
function outer() {
	function inner(){
    	console.log(a); //undefined 
        var a = 3; 
    } 
    inner(); // -------------------(2)
    console.log(a); //1
} outer(); // ------------------(3) 
console.log(a); //1

VaribaleEnvironment

• 구성
  • environmentRecord
  • outer-EnvironmentReference
  • LexicalEnvirionment와 동일함

LexicalEnvirionment

: 어휘적 환경, 정적 환경

• environmentRecord와 호이스팅
  • environmentRecord
  : 현재 컨텍스트와 관련된 코드의 식별자 정보들이 순서대로 저장됨
  • hoisting(호이스팅)
  : 끌어올리다(식별자들을 최상단으로 끌어올린뒤 실제 코드를 실행하는 것처럼 보임)
  • 변수 선언의 호이스팅

function a(x) { //수집 대상 1(매개변수)
	console.log(x); //(1)
	var x; //수집 대상 2(변수 선언)
	console.log(x); //(2)
	var x =2; //수집 대상 3(변수 선언)
	console.log(x); //(3)
}
a(1)

//매개변수를 변수 선언 할당과 같다고 간주해 코드 변경
function a() {
	var x =1; //수집 대상 1(매개변수 선언)
	console.log(x); //(1)
	var x; //수집 대상 2(변수 선언)
	console.log(x); //(2)
	var x =2; //수집 대상 3(변수 선언)
	console.log(x); //(3)
	}
a();

//호이스팅을 마친 상태로 코드 변경
function a() {
	var x; //수집 대상 1의 변수 선언 부분
	var x; //수집 대상 2의 변수 선언 부분
	var x; //수집 대상 3의 변수 선언 부분
	x =1; //수집 대상 1 할당
	console.log(x); //(1)
	console.log(x); //(2)
	x =2; //수집 대상 3 할당
	console.log(x); //(3)
}
a(1);

• 결과값
  • (1) 1 (2) 1 (3) 2
• • 함수 선언 호이스팅

function a() {
	console.log(b); //(1)
	var b = ‘bbb’; //수집 대상 1(변수 선언)
	console.log(b); //(2)
	function b () { //수집 대상 2(함수 선언)
	console.log(b); //(3)
}
a();

//호이스팅을 마친 상태로 코드 변경
function a() {
	var b; //수집 대상(변수는 선언부만 끌어올림)
	function b() {} //수집 대상(함수는 전체를 끌어올림)
	console.log(b); //(1)
	b = ‘bbb’; //변수의 할당부 남겨둠
	console.log(b); //(2)
	console.log(b); //(3)
}
a();

//함수 선언문을 함수 표현식으로 코드 변경
function a() {
	var b;
	function b = b() {}
	console.log(b); //(1)
	b = ‘bbb’; //변수의 할당부 남겨둠
	console.log(b); //(2)
	console.log(b); //(3)
}
a();

• 결과값
  • (1) undefined (2) ‘bbb’ (3) ‘bbb’
• • 함수 선언문과 함수 표현식
    • 함수 선언문
      1. function의 정의부만 존재
      2. 할당 명령 X
      3)반드시 함수명 정의되어야 함
    • 함수 표현식
      1. function을 별도의 변수에 할당
      2. 함수명은 선택적
      • 기명 함수 표현식(함수명 O)
      • 익명 함수 표현식(함수명 X)
• (매개변수의 이름, 함수 선언, 변수명 등)

function a () {/* .. */} //함수 선언문, 함수명 == 변수명
	a(); // 실행
	var b = function() {/*..*/} // 익명 함수 표현식, 함수명 == 변수명
	b(); //실행
	var c = function d () {/*..*/} //기명 함수 표현식, 함수명 != 변수명
	c(); //실행
	d(); //에러
}

// 기명 함수식의 경우 내부에서만 함수명 접근 가능

//함수 선언문과 함수 표현식의 호이스팅
console.log(sum(1,2));
console.log(multiply(3,4));
function sum(a,b) { //함수 선언문
	return a+b;
}
var multiply = function (a,b) { //함수 표현식
	return a*b;
}

//호이스팅 완료
var sum = function sum(a,b) { //함수 선언문은 전체 호이스팅
	return a + b;
};
var muliply; // 변수는 선언부만 호이스팅
console.log(sum(1,2));
console.log(multiply(3,4));
multiply function(a,b) { //변수의 할당부는 그대로
	return a * b;
};

→ 함수표현식이 상대적 안전

→ 전역 컨텍스트가 활성화될 때 동일한 변수명에 다른 값을 할당할 경우

  나중에 작성된 것이 먼저 할당한 값을 덮어씌움

• 스코프, 스코프 체인, outerEnvironmentReference
  • 스코프ES5까지는 함수에 의해서만 스코프 생성(전역공간 제외)
  • 식별자에 대한 유효범위
  • 스코프체인
  : 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
  • 여러 스코프에서 동일한 식별자 선언 시
  • 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능 -> 변수 은닉화
• outerEnvironmentReference에 의해 가능
• 전역변수와 지역변수
  • 전역 변수 사용 지양하기

this

• thisBinding에는 this로 지정된 객체 저장됨
• 실행 컨텍스트 활성화 당시 this 지정되지 않으면 전역 객체 저자
• 함수를 호출하는 방법에 따라 this에 저장되는 대상 다름