코드 실행 process
arguments
(함수의 매개변수) 객체 생성
- 거의 함수로 실행 컨텍스트가 생성됨
- ECMAScript 설명
현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성돼 스택에 들어가고 제어권이 그 컨텍스트로 이동
참고 :
인사이드 자바스크립트
[[scope]]
프로퍼티로 스코프 체인을 참조함👉 스코프 체인으로 외부 실행 컨텍스트의 변수 객체에 대한 접근이 가능해지는 것
스코프 체인 생성 및 수정 프로세스
- 전역 실행 컨텍스트의 전역 객체가 첫번째 원소로 체인에 들어가 있음
- 각 변수 객체 내부의 함수 객체는
[[scope]]
프로퍼티로 현재 컨텍스트의 스코프 체인을 참조 중- 특정 함수 객체에 해당하는 함수 실행
👉 새로운 실행 컨텍스트 생성
👉 현 함수 객체의[[scope]]
프로퍼티 복사
👉 새로 생성되는 변수 객체를 체인 맨 앞에 추가✅ 스코프 체인
현 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인
스코프 체인
개념 적용으로 Lexical Scoping
(어휘적 유효 범위 지정)의 개념 적용이 가능해짐 (MDN 참고)✅ 자유 변수(free variable)
클로저로 참조되는 외부 변수 (myName)
for(var i=0; i<5; i++) {
setTimeout(function(){
console.log(i);
},500);
}
위는 var
로 선언한 i는 상위 컨텍스트의 변수 객체에서 값이 계속 변하기 때문에 5만 찍힐것임
for(var i=0; i<5; i++) {
(function() {setTimeout(function(){
var j = i;
console.log(j);
},500);
})();
}
클로저 개념 사용해 즉시 실행 함수를 활용하면 실행되는 함수별로 실행 컨텍스트가 생성되고 해당 시점에 생성된 j 값을 사용하기 때문에 0..4 얻을 수 있음
let 활용한 방법
for(let i=0; i<5; i++) { setTimeout(function(){ console.log(i); },500); }
let
은block scope
이기 때문에 실행되는 블록마다 새로 변수를 생성 후 사용하게 되므로 0..4 정상적으로 찍힘