YooBlog

Javascript Execution Context

Javascript·2023-09-15
post-thumbnail
 

실행 컨텍스트

💡
개념
  • 자바스크립트 코드가 실행될 때 생성되는 환경입니다.
  • 자바스크립트 코드의 실행 순서와 스코프를 기억!
    • 변수 객체, 스코프 체인, this, 호출 스택 → 코드의 실행 흐름 정보
  • 자바스크립트 엔진은 실행 컨텍스트를 생성하고 관리하여 코드를 실행합니다.
notion image
생성되는 상황
  • 코드 실행이 시작될 때 전역 실행 컨텍스트가 생성됩니다.
  • 함수가 호출될 때마다 새로운 함수 실행 컨텍스트가 생성됩니다.
  • 블록 스코프 내에서 with 문을 사용할 때, 해당 블록의 실행 컨텍스트가 생성됩니다.
 
동작과정
코드가 실행되면 실행 컨텍스트는 코드의 실행 환경을 설정하고, 변수 및 함수 선언을 메모리에 등록하여 호이스팅을 수행합니다. 이후에는 스코프 체인을 구성하여 변수와 함수를 검색하고, this 값을 설정하며, 코드를 실행하여 프로그램의 동작을 제어합니다. 실행 컨텍스트는 코드 실행 중 예외 처리와 메모리 관리를 담당하며, 코드 실행이 완료되면 결과값을 반환하고 종료됩니다.
 
  1. 환경 설정과 호이스팅: 코드 실행 이전에 실행 컨텍스트는 변수 및 함수 선언을 메모리에 등록하고, 스코프 체인을 구성합니다. 이 과정에서 호이스팅이 발생하며, 변수 및 함수 선언은 선언된 위치와 관계없이 해당 스코프의 최상단으로 끌어올려집니다.
  1. 스코프 체인 구성: 실행 컨텍스트는 현재 실행 중인 함수 또는 블록의 스코프와 외부 스코프 간의 연결을 구성합니다. 이것을 통해 변수와 함수를 검색할 때 적절한 스코프에서 찾을 수 있게 됩니다.
  1. this 값 설정: 실행 컨텍스트는 현재 실행 중인 코드 내에서 this 키워드가 가리키는 값을 설정합니다. this의 값은 호출 방법에 따라 다르며, 실행 컨텍스트는 이를 정확하게 결정합니다.
  1. 코드 실행: 실행 컨텍스트는 코드를 한 줄씩 실행하며, 변수 및 함수를 스코프 체인을 통해 찾아내고, 해당 코드의 동작을 제어합니다.
  1. 예외 처리: 코드 실행 중 예외(에러)가 발생하면 실행 컨텍스트는 이를 적절하게 처리하고 프로그램의 비정상 종료를 방지합니다.
  1. 메모리 관리: 가비지 컬렉션과 관련하여 실행 컨텍스트는 더 이상 필요하지 않은 데이터를 감지하고 메모리에서 제거하여 메모리 누수를 방지하고 메모리 사용을 최적화합니다.
  1. 결과 반환과 종료: 코드 실행이 완료되면 실행 컨텍스트는 결과값을 반환하고 종료됩니다. 함수 실행 컨텍스트의 경우, 반환값은 함수 호출자에게 전달됩니다.
실행 컨텍스트는 자바스크립트 엔진이 코드를 처리하는 핵심적인 메커니즘으로, 코드 실행의 흐름과 변수/함수의 범위 및 동작을 정확하게 제어하는 데 필수적입니다.
 

스코프

💡
변수와 함수의 유효 범위입니다. (레시피 단계별 재료를 담아둔 냉장고 칸, 시야 범위)
프로그래밍 언어(나는 자바스크립트 엔진) 변수가 선언되었을 때, 선언된 위치에 따라 그 변수에 접근할 수 있는 코드의 범위를 결정합니다.
→ 이름 충돌 방지, 메모리 절약
 
  • 전역 스코프(Global Scope)
      • 전역 스코프는 코드의 어디에서든 접근 가능한 스코프입니다. 전역 스코프에 선언된 변수는 전역 변수(Global Variable)라고 하며 코드의 시작부터 끝까지 계속해서 유지됩니다.
 
  • 지역 스코프(Local Scope)
      • 지역 스코프는 특정한 블록(함수-함수스코프 또는 다른 코드 블록{}-블록스코프) 내에서 변수가 선언될 때 생성되는(결정되는) 스코프입니다. 지역 스코프 내에서 선언된 변수는 해당 블록 내에서만 접근 가능하며, 외부에서는 접근할 수 없습니다.
       
 

렉시컬 환경

💡
각각의 블록(스코프)은 렉시컬 환경이라는 내부 오브젝트를 가지고 있다.
  • 환경 레코드: 현재 블럭의 정보
  • 외부 환경 참조: 부모 블럭은 누구인지
 
 

스코프 체인

💡
변수나 함수를 찾을 때 사용되는 메커니즘 현재 스코프와 상위 스코프들의 참조를 연결한 체인입니다. (냉장고 재료 찾기, 배추 찾아요 지금 칸에서 제일 가까운 과일칸 과일칸이랑 제일 가까운 아채칸, 현재 칸과 제일 밀접한 다음칸, 다음칸, 끝은 지금단계 칸)
 
 

호이스팅 ✨

💡
자바스크립트 엔진이 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 “선언”을 스코프의 최상단으로 끌어올리는 것 (재료 준비)
  • 필요한 재료를 미리 준비하는 것 처럼 이 코드블럭(스코프)에서 사용할 변수들을 메모리에 미리 올려놓는 과정입니다.
  • 이때, 값은 다르게 저장이 되는데요,
    • 함수는 참조값이 저장
    • let, const 초기화 없이 메모리에 오름
    • var undefined로 저장
  • 때문에, 선언 이전에 사용할 경우
    • 함수 호이스팅은 잘 동작,
    • let, const의 경우 초기화가 되어있지 않다는 에러가 뜹니다.
 
 
 

유현지

안녕하세요

시리즈Javascript

홈으로