Let 과 const

let과 const를 사용하기전 JS는 var을 사용하였다. var은 변수가 선언되고 정의가 되어도 다른 코드를 통해서 var로 선언한 변수의 값을 변경할 수 있다. 여기서 let도 var와 같은 기능을한다.

<aside> 📝 Variable declaration

var [varialbe] = [data]

let [varialbe] = [data]

const [varialbe] = [data]

var name1 = "JavaScript1"

let name2 = "JavaScript2"

const name3 = "JavaScript3"

</aside>

const로 선언한 변수는 한번 정의하면 이후에 다른 코드가 변수 데이터를 변경할 수 없게 막아준다. 그렇다고 const도 완벽하게 변수 데이터를 보호해주는 아니다. const 변수 데이터를 object로 정의하면 object 데이터는 변경이 불가하되 object 안에 있는 요소 데이터는 변경이 가능하다.

/**
* const 사용
* // name.obj = "JavaScript"
*/
const name = {
obj:"JavaScript"
}

/**
* error : `name` can't data changed
*/
name = "JavaScript"

/**
* // name.obj = "TypeScript"
*/
name.obj= "TypeScript"

<aside> 📌 JS를 개발할때 모든 변수 선언을 const로 해주는 것이 좋다. 나중에 예기치 못한 오류를 대비하기위해서 이다. 그리고 const로 선언한 변수가 데이터가 변해야하는 것이라면 그때 let으로 바꾸어 사용하면 된다. 절대 var을 쓰지 않는다.

</aside>

Temporal dead zone

JS에는 hoisting이라 기능으로 작성된 코드에서 선언한 변수는 모두 실행 페이지 상단으로 재배치하여 변수를 인식하게 한다.

/**
* 작성한 소스코드
*/
console.log(name);
// < undefined
var name = "JavaScript"

/**
* 인터프리터된 소스코드
* hoisting으로인해 아래와 같은 코드로 변역되어 실행이 되는것이다.
* 결국 console은 데이터가 없고 선언만 된 변수를 출력하는 결과를 낳는다.
*/
var name;
conseloe.log(name);
// < undefined
name = "JavaScript"

Hoisting 기능때문에 JS를 깊게 이해하지 못하는 개발자는 undefined라는 결과가 나올때 버그라고 생각하고 넘어가기 마련이다. 그리고 ES6은 hoisting을 막아주는 let과 const를 지원해주는 것이다.

개발 단계에서 인터프리터 방식 그대로 위에서 아래로 코드가 실행되는것 처럼 보이게 말이다.

Block scope

JS에서 특정키워드와 같이 쓰는 중괄호{}를 scope라고 한다. 기본적으로 scope안에서 선언된 변수는 scope 외부에서 사용할 수 없지만 scope 외부에서 선언된 변수는 scope 안에서 사용할 수 있다.

/**
 * scope 안에서 선언된 var 변수는
 * scope 밖에 있는 console이 hello변수에 접근이 가능하다.
 */
if (true) {
  var hello1 = "hello1";
}
console.log(hello1);

/**
 * scope 안에서 선언된 let, const 변수는
 * scope 밖에 있는 console이 hello변수에 접근이 불가능하다.
 */
if (true) {
  let hello2 = "hello2";
}
console.log(hello2);

/**
 * function scope에서 var은 let과 const와 동일한 동작을 한다.
 */
function hello() {
  var hello3 = "hello3";
}
console.log(hello3);