실행 컨텍스트(Execution context)
실행할 코드에 제공할 환경정보들을 모아 놓은 객체
실행컨텍스트를 구성하는 방법은 함수를 실행하는 것
스택
출입구가 하나뿐인 우물같은 데이터 구조
큐
양쪽이 모두 열려있는 파이프
우선순위가 중요한 작업들(ex. 프린트 인쇄)
실행 컨텍스트의 수집 정보
VariableEnvironment
실행 컨텍스트 생성 시,
1. VariableEnvironment에 정보를 먼저 담는다
2. 그대로 복사해서 LexicalEnvironment를 만든다
3. 이후 주로 LexicalEnvironment를 활용한다
LexicalEnvironment
호이스팅 : 식별자들은 최상단으로 끌어올리는 것
LexicalEnvironment - environmentRecord에 현재 컨택스트와 관련된 코드의 식별자 정보들이 저
장됨
저장 시 현재 실행 컨텍스트 내에 어떤 식별자들이 있는지에만 관심이 있음. 각 식별자에 어떤값이 할당될 것인지는 관심이 없음
즉, 변수를 호이스팅할 때 변수명만 끌어올리고 할당 과정은 원래 자리에 그대로 남겨 둠
=> 함수 선언문과 함수 표현식 개념과 함께 이해해야함 => 함수 표현식을 지향해야하는 이유!
함수 선언문과 함수 표현식 with 호이스팅
함수 선언문
function a () {/* ... */}
a(); 함수 표현문
const b = function c () {/* ... */}
c();원본코드: 함수 선언문과 함수 표현식 & 호이스팅
console.log(sum(1, 2)); console.log(multiply(3, 4)); // 함수 선언문 sum function sum (a,b) { return a + b; }; // 함수 표현식 multiply const multiply = function(a, b) { return a + b; };
호이스팅 마친 상태 코드
// 함수 선언문은 함수 전체를 호이스팅 함 const sum = function sum (a,b) { return a + b; }; // 함수 표현식은 변수 선언부만 호이스팅 함 const multiply; // console.log(sum(1, 2)); console.log(multiply(3, 4)); // 변수의 할당부는 원래 자리에 그대로 multiply = function(a, b) { return a + b; }
코드가 몇 천줄인 경우,
전역 공간에 같은 이름의 여러 함수가 존재하는 상황이 생기더라도,
함수 전체가 호이스팅(함수 선언문)되지 않고 함수 변수만 호이스팅(함수 표현문)되는 것이 코드의 안전성을 높이는 방법임
스코프, 스코프 체인
스코프: 식별자(변수)에 대한 유효범위
스코프 체인: '식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해나가는 것
- 전역변수: 전역 스코프의 lexicalEnvironment에 담긴 변수
- 지역변수: 그 밖의 함수에 의해 생성된 실행 컨텍스트의 변수
안전한 코드 구성을 위해 전역변수의 사용은 최소화 하는 것이 좋음!
oneThing