# 2.1 블록 수준 스코프

ES5까지의 자바스크립트에는 변수 선언을 위하여 사용할 수 있는 수단이 var 키워드 뿐이였다. 자바스크립트의 변수 선언은 다른 프로그래밍 언어에 익숙한 이들에게 많은 혼란을 선사하곤 하는데, 가장 큰 두 이유는 바로 **함수 수준 스코프**와 **호이스팅**이다.

### **함수 수준 스코프**

함수 수준 스코프란, 단어 자체에서 짐작할 수 있듯 모든 변수 선언이 함수 수준에서 이루어짐을 의미한다. 즉, 자바스크립트에서 코드 블록(`{...}`)은 새로운 스코프를 생성하지 않는다.

```javascript
function foo() {
  var abc = 123;
  if (true) {
    var abc = 456;
  }
  console.log(abc);
}
foo(); // 456
```

블록 수준의 스코핑을 지원하는 언어에서는 `if` 블록 바깥에서 콘솔에 찍어본 `abc`의 값은 `123`으로 남아 있을 것이다. 하지만 자바스크립트는 해당 코드를 감싸고 있는 가장 가까운 함수 (또는 전역) 가 달라질 때에만 새로운 스코프가 생성된다. 따라서 2번 라인과 4번 라인의 `abc`는 동일한 변수를 가리킨다. 

`if` 블록을 새로운 함수로 대체 했을 때에는 예상 대로의 결과가 나오는 것을 확인할 수 있다.

```javascript
function foo() {
  var abc = 123;
  function bar() {
    var abc = 456;
  }
  console.log(abc);
}
foo(); // 123
```

### **호이스팅**

호이스팅이란 변수의 선언과 초기화가 동시에 이루어졌을 때, 자바스크립트 인터프리터가 변수의 선언을 함수의 맨 위로 이동시키는 동작을 뜻한다.

```javascript
function foo() {
  console.log(bar); // undefined
  var bar = 123;
}
```

`bar` 라는 변수를 선언 전에 참조하는 이러한 코드는 많은 언어에서 에러를 일으킬 것이다. 하지만 자바스크립트에서는 이 함수는 정상적으로 실행되며 콘솔엔 `undefined`가 찍힌다. 자바스크립트 엔진이 해당 함수를 아래와 같이 함수 시작점에 선언이 있고 이후 초기화되는 식으로 해석하기 때문이다.

```javascript
function foo() {
  var bar;
  console.log(bar); // undefined
  bar = 123;
}
```

### **블록 수준 스코프**

자바스크립트의 이 두 독특한 동작 방식은 많은 프로그래머에게 혼란을 미쳐 왔다. ES6는 이러한 혼란을 피할 수 있도록 `let`과 `const`이라는 새로운 변수 선언 키워드를 도입했다. 두 키워드를 사용해 새로운 함수가 만들어질 때와 더불어 대괄호(`{ ... }`) 로 감싼 블록마다 생성되는 **블록 수준 스코프**의 지배를 받는 **블록 수준 변수**를 정의할 수 있다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ahnheejong.gitbook.io/ts-for-jsdev/02-ecmascript/block-level-scope.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.