[Typescript] Variable Declarations

[Variable Declarations]

val & let 차이

var는 JavaScript에서 정의할때 사용하는 키워드이다.

var는 아래 예제와같은 사용성(?)을 가지고있다.

1. A 함수에서 사용하는 변수 a를  B함수에서 호출할 수 있다.

function f() {
    var a = 10;
    return function g() {
        var b = a + 1;
        return b;
    }
}

var g = f();
g(); // returns '11'

2.  정의되지않을 가능성이있는 변수 사용이 가능하다.

function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'

3.  중복된 변수 선언이 가능하다. (for문안에 i를 선언한 후 다시 for문안에 i를 선언한다.)

function sumMatrix(matrix: number[][]) {
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }
    return sum;
}

4. var의 경우 새로운 scope없이 한 변수에 인덱스가 추가되며 바인딩 되었고, 결국 setTimeout에 순차적으로 추가한 함수들이 같은 scope var를 참조하면서(clousre되면서) 예상과 드른결과값이 도출된다.

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}

///// 결과는 10 10 10 10 10 10 10 10 10 10 이다.

위와같은 var의 몇가지 문제점이 왜 let을 사용해야되는지를 알려준다.

let은 다음과 같이 var의 문제점에서 해결해준다.

1. 정의되지않은 변수사용시 ERROR발생.

function f(input: boolean) {
    let a = 100;

    if (input) {
        // Still okay to reference 'a'
        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here
    return b;
}

2. 중복선언 ERROR.

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope

3.  block-scope의 변수는 다른 변수로 인지.

function f(condition, x) {
    if (condition) {
        let x = 100;
        return x;
    }

    return x;
}

f(false, 0); // returns '0'
f(true, 0);  // returns '100'

let & const 차이

위에서 var와 let의 차이를 대략적으로 보았다면, 과연 let과 const는 어떠한 차이가 있을까?

결론부터 이야기하면 const는 불변 변수, let은 가변 변수를 선언할때 쓰인다.

const let x = 10;
x = 20; // error