데브허브 | DEVHUB | {풀스택실무} - 팀 나눠서 실행 컨텍스트 그리기{풀스택실무} - 팀 나눠서 실행 컨텍스트 그리기
- 자바스크립트 코드는 메모리 생성 단계와 실행 단계로 나뉘어 처리되며, 각 단계에서 변수 및 함수 선언과 값 할당이 이루어집니다. 🧠
- 메모리 생성 단계에서는 변수와 함수가 선언부에 따라 메모리에 할당되며,
var는 함수 스코프를 따르고 let/const는 블록 스코프를 따릅니다. 🏗️
var 변수는 블록 스코프를 뚫고 호이스팅되지만, let/const 변수는 블록 스코프 내에 존재하며 TDZ(Temporal Dead Zone)로 인해 초기화 전 접근 시 에러가 발생합니다. 🚧
if 블록과 같은 코드 블록은 실행 여부와 관계없이 자체적인 환경 레코드(Block Environment Record)를 가지며, 이는 외부 환경을 참조하는 outer 속성을 가집니다. 🧱
- 일반 함수 선언은
new.target, arguments, this 바인딩 등을 가지지만, 화살표 함수는 이들을 가지지 않아 더 가볍고 효율적입니다. 🏹
- 변수나 함수를 찾을 때 현재 스코프에 없으면
outer 환경 레코드를 따라 상위 스코프에서 탐색하는 스코프 체인 메커니즘이 작동합니다. 🔗
var 변수는 초기화 전에 접근하면 undefined를 반환하지만, let/const 변수는 초기화 전 접근 시 ReferenceError를 발생시킵니다. ⚠️
- 리액트 함수형 컴포넌트에서 화살표 함수를 사용하는 것은
new.target이나 this 바인딩이 필요 없어 더 가볍고 효율적인 코드 작성에 기여합니다. ⚛️