[Typescript] var, let, const

var

• ES5
• 변수의 유효범위 : 함수 스코프
• 호이스팅 (O)
• 재선언 가능

 

let, const

• ES6
• 변수의 유효범위 : 블록 스코프
• 호이스팅 (X)
• 재선언 불가

var말고 let, const를 쓸 것!

 

스코프

자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의한다.

스코프엔 두가지 종류가 있다. 전역 스코프와 지역 스코프로 나뉜다.

 

전역 스코프

전역 스코프는 변수가 함수 바깥이나 { } 바깥에서 선언되었다면, 전역 스코프에 정의 된다.

 

지역 스코프

지역 스코프는 코드에서 특정 부분에서만 사용이 가능한 변수다.

자바스크립트에는 크게 두가지의 지역 스코프가 존재한다. 함수 스코프와 블록 스코프다.

 

함수 스코프

만약 함수 내부에서 변수를 선언한다면, 그 변수는 선언한 함수 내부에서만 사용이 가능하다.

function example() {
    const hello = "Hello, world!";
    console.log(hello);
}

example();
console.log(hello);	// 에러

 

블록 스코프

블록 스코프는 중괄호 { } 내부에서  const  또는  let  으로 변수를 선언하면, 그 변수들은 중괄호 블록 내부에서만 사용이 가능하다.

{
    const hello = "Hello, world!";
    console.log(hello);
}

console.log(hello);	// 에러

함수 스코프와 다른 점은 함수 스코프는 함수 내부에서 선언을 했다면, { } 밖이어도 호출이 가능하지만, 블록 스코프는 오직 { } 내부에서 선언한 변수들은 { } 내부에서만 사용이 가능하다는 것이다.

/* 함수 스코프 */
function multiply(n) {
    var i=1;
    while(i<10) {
        var ans=0;
        console.log(i*n);
        ans += i*n;
        i+=1;
    }
    console.log(ans);	// 가능하다.
}

/* 블록 스코프 */
function multiply(n) {
    let i=1;
    while(i<10) {
        let ans=0;
        console.log(i*n);
        ans += i*n;
        i+=1;
    }
    console.log(ans);	// 불가능하다.
}

 

호이스팅이란?

함수 안에 있는 선언들을 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
예를 들면,

console.log("hello");
var myname = "HEEE"; // var 변수 
let myname2 = "HEEE2"; // let 변수

위 코드와 아래 코드는 같다.

/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
var myname; // [Hoisting] "선언"
console.log("hello");
myname = "HEEE"; // "할당"
let myname2 = "HEEE2"; // [Hoisting] 발생 X

 

재선언

var redeclare_var: string = '한번 선언 했는데';
var redeclare_var: string = '또 선언이 가능';

let redeclare_let: string = '한번 선언 했기 때문에';
let redeclare_let: string = '또 선언이 불가';

/*
	그렇지만 var에서 재선언 하더라도 같은 타입이여야 한다.
*/

var는 재선언이 가능하지만 let은 재선언이 불가하다.

 

let과 const의 타입 추론

let a: string = '에이';
let b = '비이';

const c: string = '씨이';
const d = '디이';

/*
1. a는 명시적으로 지정된 타입인 string
2. b는 타입추론에 의한 타입인 string
3. c는 명시적으로 지정된 타입인 string
4. d는 타입추론에 의한 타입인 리터럴타입 "디이"
*/

d와 같이 const인데 타입을 명시하지 않으면 리터럴타입이 된다.