스코프란?
식별자 접근 규칙에 따른 유효 범위
- 식별자(변수,함수,클래스)에 접근할 수 있는 범위가 존재한다.
- 범위는 중괄호(블럭) 또는 함수에 의해 나눠진다.
- 이때, 이 범위를 스코프라고 부른다.
- 그래서 각각을 Block Scope 와 Function Scope 라고 부른다.
호이스팅이란?
자바스크립트에서 변수,함수 선언을 현재 스코프의 최상단으로 올려주는듯한 현상
- 주의!
호이스팅은 코드 실행 전 변수, 함수 선언을 현재 스코프의 최상단으로 끌어올리는 것이 아니라 끌어올려진 것 같은 현상이다.
실행 컨텍스트란?
실핸 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기 전 이런 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다.
TDZ란?
선언 전 변수를 사용하는 것을 허용하지 않는 개념상의 공간이다.
let 과 const 를 var 대신 사용해야 하는 이유
var 를 사용할 경우에는 호이스팅이 일어나면서 undefined가 뜨고 넘어갈 수 있다. 이는 내가 의도하지 않은 코드 진행이 일어나게 만들 수 있는데 만약 var가 아닌 let, const 를 사용하게 되면 참조에러가 뜨면서 이를 방지할 수 있다.
( let, const 도 호이스팅이 발생하긴 한다. 하지만 값이 초기화되지 않았기 때문에 참조에러가 뜨는 것 )
또한, TDZ를 통해 스코프가 확실하게 구분되고, 변수의 범위가 제한이 되니 코드의 가독성도 높아진다.
호이스팅이 뭔지 아시나요?
변수 선언이나 함수 선언이 끌어올려지는듯한 현상을 호이스팅이라고 합니다!그렇다면 우리가 변수 선언을 할 때 var, let, const가 있는데, 이 var, let, const 가 호이스팅이 일어나면 어떤 현상이 발생하나요?
var 같은 경우에는 undefined 가 출력이 되고 let, const 같은 경우에는 reference error 가 뜹니다.그렇다면 var는 왜 undefined가 뜨고 let, const 참조에러(reference error)가 뜨나요?
var 는 선언과 동시에 undefined로 값이 초기화 되기 때문에 할당이 되지 않은 상태에도 undefined 라는 값을 출력 할 수 있습니다.
하지만 let, const 같은 경우 선언과 초기화가 따로 이루어지기 때문에 초기화되지 않은 상태에서 let, const를 참조하려고 하면 참조에러(reference error)가 발생합니다. 이를 TDZ 에러라고도 합니다.그렇다면 우리가 var 를 사용하다가 es6에 let, const 가 생겼는데, 이를 var 대신 사용하라고 권장합니다. 이 이유를 호이스팅과 연관시켜 답변해주실 수 있나요?
let, const 를 사용하면 예상치 못한 동작을 방지할 수 있기 때문입니다.
var 를 사용할 때에는 undefined가 뜨는 것을 보고 그냥 넘어갈 수 있어 내가 의도하지 않은 코드진행이 이뤄질수도 있지만 let, const를 사용하면 참조에러가 뜨면서 이를 방지할 수 있습니다.
( 또한, TDZ를 통해 스코프가 확실하게 구분이 되고 변수의 범위가 제한이 되니 코드의 가독성도 높아지기 때문입니다. )
참고
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/