무호님의 주최로 일일 스터디가 진행됐다. 무호님과 졍님이 클로저를 주제로 발표하셨고, 나는 42님과 참관하는 방식으로 참여했는데 아~~주 유익한 시간이었다.
오늘 배운 내용을 잊지 않기 위해서(다시 공부할 엄두가 안난다 ^* ^) 스터디에서 다룬 내용 위주로 TIL을 작성해보려고 한다.
✏️ 오늘 배운 것
Execution context
execution context는 코드가 실행되기 위해 필요한 환경을 담고 있다. 코드가 실행되면서 함수가 호출될 때 마다 그 함수의 execution context가 call stack에 쌓인다. Javascript 엔진은 현재 call stack에서 top에 위치한 execution context에 해당하는 코드를 실행한다.
execution context는 크게 3가지가 존재한다.
-
Global execution context코드가 실행될 때
맨 처음, 그리고단 한 개만생성되는 전역 execution context이다. global execution context가 call stack 제일 바닥에 깔리고 코드가 진행되다가 마지막에 pop되면서 자바스크립트 엔진이 종료된다. -
Functional execution context함수가 실행될 때마다 생성되는 execution context이다. 같은 함수여도 호출될 때마다 execution context가 stack에 쌓이고, return되면 context가 pop된다.
-
eval contexteval 함수를 사용하면 생성되는 context라는데 사용이 권장되지 않는다고 한다.
execution context은 물리적으로 객체의 형태를 가지며 variable environment, lexical environment, thisBinding 프로퍼티를 가지고 있다. ES6에서는 thisBinding도 lexical envirionment에 속한다.
생성 과정
excution context의 생성 과정은 2가지로 나뉜다.
-
Creation phase
이 단계에서
lexical environment와variable environment가 생성된다. 함수의 호출은 크게 3단계로 이루어진다: PrepareForOrdinaryCall, OrdinaryCallBindThis, OrdinaryCallEvaluateBody. LE는 EC와 함께 함수의 호출 단계 중PrepareForOrdinaryCall단계에서 생성된다. 새로운 EC가 생성됨과 동시에 LE가 생성된 후, call stack에 EC가 push된다. VE와 LE의 차이점은-
VE: functional scope를 단위, var로 선언된 변수가 메모리에 매핑되며 undefined로 초기화되고, 선언형 함수가 메모리에 매핑되며 함수 전체가 메모리에 할당된다. VE는 최초의 스냅샷 개념으로 컨텍스트 정보가 변경되도 업데이트되지 않는다
-
LE: local lexical scope를 단위, let, const로 선언된 변수가 메모리에 매핑되지만 초기화되진 않는다. LE는 VE의 복사본으로 실제 사용되는 정보이다.
변수 생성 단계는 여기를 참고!
-
-
Execution phase
creation phase에서 변수나 함수 등 코드 실행을 위한 환경 정보가 결정되고, Execution phase는 말그대로 코드를 위에서부터 실행한다. 이 때 변수 값이 할당되는 코드가 실행되면 environment record에 저장된 식별자 메모리에 값을 수정하거나 할당한다.
Lexical environment
Creation phase에서 생성되는 lexical environment에는 environment record와 outter environment reference, thisBinding이 존재한다. LE는 JS가 어떻게 동작하는지 설명하기 위한 이론상 개념이지 실제로 값에 접근, 조작하는 건 불가능하다.
environment record: 현재 context에서 선언된 함수 혹은 변수와 같은 식별자들이 저장되는 공간이다.this의 값도 여기에 저장된다.outerLexicalEnvironmentReference: 현재 context의 상위 context를 참조하는 공간이다.
전역 LE의 경우 가장 상위의 Environment이고 외부 참조를 갖지 않기 때문에 outer가null을 가리킨다. 코드가 실행되면서 변수를 변경하면 ER 속 프로퍼티가 변경된다.
함수 선언문으로 선언한 함수는 일반 변수와는 달리바로 초기화된다. let, const로 할당된 변수는 해당 위치까지 가야 초기화돼서 그 전에는 사용할 수 없지만, 함수 선언문은즉시 사용할 수 있다. 당연히 변수에 함수를 할당하는함수 표현식은 해당되지 않는다!
🔥 더 공부해 볼 것
this 바인딩
LE의 environment record가 초기화되는 시점에 this 바인딩이 일어난다는데 시간이 없어서 찾아보지 못했다,, 슬쩍 보니깐 this가 경우에 따라 천차만별이던데 제대로 공부하려면 꽤 오래 걸릴 거 같다.
scope chain
저 outer와 연관해서 scope chain도 알아봐야하는데 이것도 못찾아봤다 ^^,,머쓱
클로저
클로저에 대해선 한 번 정리한 적이 있지만 어제 스터디를 하고 나니 더 찾아봐야겠다는 생각이 들었다.
마무리
일단 누가 시킨 것도 아닌데 자진해서 이렇게 열심히 준비해 온 두 분께 감명 받았다 ㅋㅋㅋㅋ 나는 솔직히 공부한다고 말로만 하고 해야하는 것도 다 못하는 거 같은데,, 🥲 그리고 발표하는 중간에 질문을 할 수 있으니깐 더 좋았던 거 같다. 중간중간 토론(?) 비슷한 걸 하면서 진행되니깐 더 이해도 잘되고 머리에 오래 남을 거 같다. 다음에는 내가 발표하기로 했는데,, 열심히 준비해야겠다 😎
