[React] var 대신 let을 사용하자!

ES6가 생기기 전에는 변수 선언을 하기 위해 var을 주로 사용해 왔었습니다.

하지만 var은 호이스팅하기 때문에 변수가 중복 선언 되어도 에러가 발생하지 않습니다.

 

호이스팅이란 ?

실행 컨텍스트가 만들어진 이후에 var 키워드가 부여된 변수를 미리 생성하는 것.

= 변수의 선언을 스코프 최상단으로 옮기는 행위

= JS 코드를 구문 분석 > 선언된 var 변수에 메모리 미리 할당 ( 변수를 미리 생성 )

console.log(a1);
var a1 = "변수 선언 순서가 이상해도 에러가 발생하지 않는다."

호이스팅의 특징

1. 함수 단위로 호이스팅한다.

- 함수 호출시 실행을 위한 컨텍스트를 만들고, 내부 코드 중 var 가 부여된 것들을 찾아 실행 컨텍스트 내부에 변수를 미리 생성한다. var로 생성된 변수들은 블록 수준의 유효 범위를 제공하지 않는다.

2. 호이스팅 단계에 이미 변수가 생성되어 있다면 변수를 생성하지 않고 건너뛴다.

 

이러한 어려운 문제들을 해결하기 위해 ES6부터는 var 대신 let 키워드를 지원하게 된 것입니다.