[Typescript] 2. 타입스크립트 변수 선언 정리

타입스크립트 변수

: var, const, let 3개의 변수 Type이 있습니다.

 

1. var

var는 할당을 먼저 하고 나중에 선언하는 코드입니다. 

아래와 같은 현상으로 인해 var를 사용하지 않는 것이 좋습니다.

• if 문 내에 있는 변수에도 영향을 줄 수 있습니다.
• 동일한 이름을 가진 변수를 유저가 실수로 중복 선언할 수도 있습니다.

// var는 함수 레벨 스코프를 지원
var myName = "copymaster";

function change() {
  var myName = "militarymaster"; // 스코프가 달라 변경이 되지 않음
}

change();
console.log(myName);

Result: copymaster

========================================================================

// var는 블록 레벨 스코프를 지원하지 않음
var myName = "copymaster";

if (true) {
  var myName = "militarymaster"; // copymaster와 동일한 스코프로 인식
}
console.log(myName);

Result: militarymaster

※ 블록 레벨 스코프(block level scope)를 지원하는 let과 const가 ES6 및 TS에서는 지원이 됩니다.

 

2. let

: 같은 블록 레벨 스코프 내에서 동일한 이름의 변수를 중복해서 선언할 수 없으며, 변수를 초기화하기 전에 변수에 접근할 수 없도록 호이스팅을 방지합니다.

// let은 블록 레벨 스코프를 지원
let myName = "copymaster";

if (true) {
  let myName; // 스코프가 다름
  myName = "militarymaster"; // 변수 선언 뒤에만 할당 가능(호이스팅 문제 해결)
}
console.log(myName); 

Result: copymaster

 

호이스팅
: 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 최상단으로 선언하는 것입니다.

 

 

 

호이스팅 출처: 자바스크립트의 호이스팅(Hoisting)에 대해 이해한다.
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

 

 

3. const

: 블록 레벨 스코프를 지원하며, 호이스팅을 일으키지 않는다. 단 const는 초기화는 가능하지만, 재할당은 되지 않습니다.

 

const Cat = {
  name: "Tom",
  numLives: 10,
}

// 참조하는 값이 불변한다는 개념과는 다르다.(아래 사용가능)
Cat.name = "Jerry";
Cat.numLives--;

 

※ 구글의 자바스크립트 스타일 가이드

Use const and let
Declare all local variables with either const or let. 
Use const by default, unless a variable needs to be reassigned. 
The var keyword must not be used.

---

const와 let을 사용해라.

const 또는 let을 사용하여 모든 지역변수를 선언해라.
값을 재할당하는 경우가 아니라면, const를 디폴트로 사용해라.
var는 절대로 사용하지 마라.