[JS] 블록 스코프(Block Scope) / 실행 컨텍스트(Execution Context)

블록 스코프(Block Scope)

: 변수의 유효 범위를 블록 단위로 제한

• {중괄호}로 감싸서 사용

{
  statement_1;
  statement_2;
  ⋮
  statement_n;
}

 

 

var

• 지역 및 전역 변수를 선언하는데 모두 사용
  
  • 블록 스코프(Block Scope) ❌
  • 블록을 고려하지 않고 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다.
• var 변수는 호이스팅(hoisting) 되어 변수 선언이 코드의 최상단으로 끌어올려진다.

function example() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1
}
example();

======================

var x = 1;

{
  var x = 2;
}

console.log(x); // 2 출력

 

 

 

let

• 블록 스코프(Block Scope) 지역 변수를 선언하는데 사용
• {선언된 블록} 내에서만 유효⭕
• 자신을 선언한 블록과 모든 하위 블록을 스스로의 스코프로 가진다.

function example() {
  if (true) {
    let y = 2;
    
    console.log(y); // 2
  }
  
  console.log(y); // ReferenceError: y is not defined
}

example();

 

 

 

const

• 블록 스코프(Block Scope) 지역 변수의 읽기 전용 상수를 선언하는데 사용
• {선언된 블록} 내에서만 유효⭕
• 재할당, 재선언 불가능 ❌

function example() {
  if (true) {
    const z = 3;
    
    console.log(z); // 3
  }
  
  console.log(z); // ReferenceError: z is not defined
}

example();

 

 

 

---

실행 컨텍스트(Execution Context)

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

 

 

 

📢 실행 컨텍스트가 생성되는 경우

1. 맨 처음 코드 실행 시
   
   • 전역 실행 컨텍스트(Global Execution Context): JS 코드 실행 시 자동으로 구성된다.
2. 함수 호출 시
   
   • 함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 새로운 함수 실행 컨텍스트가 생성된다.
3. eval() 함수 실행 시
   
   • eval() 실행 컨텍스트: eval()이 호출될 때 새로운 실행 컨텍스트가 생성된다.
     • eval() 함수: 문자열로 작성된 코드를 실행한다. 
     • 보안상의 이유로 사용을 권장하지 않는다.

👉 생성된 실행 컨텍스트는 자바스크립트 엔진의 콜 스택(call stack)에 쌓인다.

 

 

 

 

실행 컨텍스트의 구성

• VariableEnvironment
  • 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
  • 외부 환경 정보
  • 선언 시점(초기)의 LexicalEnvironment의 스냅샷을 유지 (변경사항 반영 X)
    
    
• LexicalEnvironment
  • 처음에는 VariableEnvironment와 같다.
  • 변경 사항이 실시간으로 반영 O
    
    • environmentRecord: 현재 컨텍스트와 관련된 코드의 식별자 정보(매개 변수, 함수, 변수 등) 저장
      👉 호이스팅이 발생
      
      
    • outerEnvironmentReference: 현재 environment record보다 바깥에 있는 environment record를 참고
      👉 스코프와 스코프 체인 형성
      
• ThisBinding
  
  • this 식별자가 바라봐야 할 대상 객체

---

 

호이스팅(Hoisting)

: 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 개념

• 자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음, 실제 코드를 실행한다
  (실제로 끌어올리지는 않는다.)

 

• 변수 호이스팅
  : 변수는 선언만 호이스팅되며, 초기화는 호이스팅되지 않는다.
  👉 변수는 선언되기 전에도 참조할 수 있지만, 값은 undefined로 설정된다.
  
  
• 함수 호이스팅
  : 함수 선언 전체가 호이스팅되며, 함수 선언문을 호출하기 전에 호출할 수 있습니다.

 

console.log(myVariable); // undefined
var myVariable = 'Hello, World!';

myFunction(); // 'Hello, World!'
function myFunction() {
  console.log('Hello, World!');
}

 

 

 

 

스코프 체인(Scope Chain)

: 변수 객체의 scope 정보를 타고 상위 스코프의 데이터에 접근하는 것

• 스코프를 안쪽에서 바깥 쪽으로 단계적으로 탐색하는 과정
• 전역 스코프에도 참조값이 없다면, null을 반환

 

 

---

 

문법과 자료형 - JavaScript | MDN

 

제어 흐름과 오류 처리 - JavaScript | MDN

 

let - JavaScript | MDN

 

 

const - JavaScript | MDN