[JavaScript]var과 let간의 차이가 발생하는 이유

 

 

---

[var과 let 간의 차이가 발생하는 이유]

자바스크립트 엔진은 코드를 실행하기 전에 변수 선언문, 함수선언문 등을 찾아 위로 끌어올리는 평가 과정을 거친다.

이 과정에는 선언 단계와 초기화 단계가 있다.

선언 단계를 통해서 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 해당 변수의 존대를 알리고 초기화 단계에서 undefined라고 스코프에 등록된 변수 식별자에 값을 초기화하는 단계를 거친다.

 

 

• 선언 단계 : 자바스크립트 엔진에 존재를 알리기
  • 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 해당 변수의 존재를 알린다.
• 초기화 단계 : undefined로 초기화하기
  • 초기화 단계에서 undefined라고 스코프에 등록된 변수 식별자에 값을 초기화한다.

 

그런데 var는 이 과정을 코드 평가 과정에서 모두 이루어지게 된다.

var로 선언된 변수에 접근하기 이전에 해당 변수를 호출한다 하더라도 에러가 발생하지 않는다.

하지만 let의 경우는 다르다.

let은 호이스팅이 발생하지 않는 것처럼 동작하기 때문에 선언 단계와 초기화 단계가 분리되어 진행된다.

선언 단계를 통해 자바스크립트 엔진에게 apple이라는 존재를 알린다.

하지만 apple 이 어떤 값을 가졌는지 자바스크립트 엔진은 초기화 단계 이전에는 알 수 없다.

console.log를 통해 변수 선언문에 앞서 apple에 접근하게 되면 참조 에러가 발생하게 된다.

이처럼 스코프 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부른다.

 

 

그럼 let은 언제 초기화 단계가 이루어지는가?

바로 변수 선언문에서 이루어진다.

let apple;이라는 변수 선언 코드를 자바스크립트 엔진이 읽게 됨으로써 초기화 단계가 이루어지고 apple이라는 값에 undefined가 할당되게 된다.

그래서 다시 console.log로 apple이라는 변수에 접근하였을 때에는 에러가 발생하지 않고 undefined를 출력하게 된다.

 

apple에 값을 할당해 주게 되면 undefined라는 값 대신 사과라는 값을 apple 이 가지게 된다.

이후 console.log로 apple의 값에 접근하게 되면 정상적으로 사과라고 출력된다.

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://www.youtube.com/watch?v=ZU4MXkwDb9g