실행 컨텍스트를 이해하기 위해선 먼저 Stack과 Queue를 알아야 한다.
Stack : 출입구가 하나인 데이터 구조다.
a b c d 순서로 저장했다면 꺼낼 때는 d c b a 순서로 꺼낸다.
Queue : 출입구가 양쪽인 데이터 구조다.
한쪽은 입력만, 다른 한쪽은 출력만 담당.
데이터를 a b c d 순서로 저장하면 a b c d 순서로 꺼낸다.
실행 컨텍스트란?
실행할 코드에 제공할 환경 정보들을 모아놓은 객체다.
하나의 실행 컨텍스트를 구성하는 방법들으로는
- 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
- 함수 선언
- 변수의 유효범위(Scope)
- this
컨텍스트를 구성하면 콜 스택에 쌓아 올려서 가장 위에 있는
컨텍스트와 관련 있는 코드를 실행해 전체 코드의 환경과 순서를 보장한다.
= 이해를 돕기 위한 예시) 함수를 선언할 때 스택이라는 데이터 박스에 넣고,
함수 호출이 이뤄질 때 스택에서 빼는 식으로 코드를 관리한다 라고 볼 수 있다.
const me = 'KANG';
function 취업 () {
const resume = 'pass';
function weStudy () {
const study = 'study';
console.log(me + resume + study);
}
study();
}
취업();Stack에 전역변수, 취업함수, 위스터디함수가 차례로 쌓이고
처리는 역순으로 진행되며 코드를 관리한다.
환경(추가 공부 필요)
VariableEnvironment
최초 실행 시의 스냅샷을 유지
LexicalEnvironment
초기화 과정에서는 1과 동일
함수 실행 도중 변경되는 사항 즉시 반영
environmentRecord : 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등 수집
outerEnvironmentReference : 바로 직전 컨텍스트의 LexicalEnvironment 정보 참조
ThisBinding
호이스팅
코드 해석을 좀 더 수월하게 하기 위해서
실행 컨텍스트가 관여하는 코드의 최상단으로 끌어올린다는 개념
변수 선언과 값 할당이 동시에 이뤄진 코드는 선언 부분만 호이스팅하고
할당 부분은 원래 자리에 덩그러니 남아있게 된다.
호이스팅 대상
var 와 함수 선언문 이 호이스팅 대상이다.
let 또는 const 그리고 함수 표현식은 해당되지 않는다.
호이스팅 규칙
변수 선언이 함수 선언보다 먼저 호이스팅 된다.
할당되어있는 변수가 할당되지 않은 변수보다 먼저 호이스팅 된다.
함수 선언문과 함수 표현식의 차이
함수 선언문과 함수 표현식
- 함수 선언문 : function 정의부만 존재하고 별도의 할당 명령이 없는 것
function a(){ }
a();
// 변수는 선언부가 호이스팅되고 함수는 전부 다 올라온다.ex) 함수 선언문 예시
- 함수 표현식 : 정의한 function을 별도의 변수에 할당하는 것
const b = function (){ }
b(); 
위의 예시로 알 수 있는 점은 함수 표현식은 호이스팅이 되지 않는다는 점이다.
함수 관련 호이스팅의 결론
함수 선언문은 전체를 호이스팅하고 함수 표현식은 변수 선언부만 호이스팅한다.
함수 선언문을 사용하게 되면 동일한 변수명에 서로 다른 값을 할당할 경우
나중 값이 이전 값을 덮어 씌운다.
따라서 협업을 위해 상대적으로 함수 표현식이 안전하다.
스코프
스코프 : 식별자(= 변수명)에 대한 유효범위
우리가 아는 그 중괄호 모양이 맞다.
-> { }
스코프 체인 : 스코프를 안에서 바깥으로 차례로 검색해나가는 것
= 안에서부터 바깥으로 변수명에 해당하는 것을 계속 찾아나간다는 의미.
스코프를 기준으로 나눠지는 변수
전역변수 : 전역 공간에서 선언한 변수
지역변수 : 함수 내부에서 선언한 변수
여러 스코프에서 동일한 식별자 선언한 경우
스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 한다.
예제)
변수 은닉화 : 함수 내부에서 변수를 선언했으면 전역 공간에서 선언한
동일한 이름의 변수에는 접근이 불가능하다.
따라서 가급적 전역변수 사용을 최소화하고자 노력하자.
