var let const

javascript 사용하면서 var, let , const 의 차이를 정리하고 구분해서 사용하려고 합니다

	var	let	const
1. 범위	global , function	block	block
2. 값변경	가능	가능	불가능
3. 재선언	가능	불가능	불가능
4. 초기값	undefined	undefined	불가능

 

변하지 않는 값은 const 로 선언하고
부득이한 경우가 아니면 var 대신에 let 을 사용하자

 

1. 범위비교

function scope() {
    for (i=0; i < 1; i++) {
        var j = 10;
        let k = 20;
        const l = 30;
    }
    console.log(`var j = ${j}`);  // var j = 10
    console.log(`let k = ${k}`);  // k is not definded
    console.log(`const l = ${l}`);  // l is not defined
}
scope();

실행하면 var j 만 결과가 나오고

let k 와 const l 은 not defined 에러가 발생된다

function scope() {
    for (i=0; i < 1; i++) {
        var j = 10;
        let k = 20;
        const l = 30;
        console.log(`let k = ${k}`);  // let k = 20
        console.log(`const l = ${l}`);  // const l = 30
    }
    console.log(`var j = ${j}`);  // var j = 10
}
scope();

 

let 과 const 의 scope 을 변경해서 출력하면 정상적으로 결과값이 나온다

function scope() {
    for (i=0; i < 1; i++) {
        var j = 10;
    }
}
scope();
console.log(`var j = ${j}`);  // j is not defined

var 도 function scope 밖에서 호출하면 에러가 난다

function scope() {
    for (i=0; i < 1; i++) {
        j = 10;
    }
}
scope();
console.log(`var j = ${j}`);  // var j = 10

function 내부에서 var 선언을 빼면 정상 출력된다 (j 가 hoisting 되면서 global 함수로 선언되어서 정상적으로 작동한다)

function scope_var() {
    var a = 10;
    if (a > 5) {
        var a = 20;
        console.log(`var a = ${a}`); // var a = 20
    }
    console.log(`var a = ${a}`); // var a = 20
}
function scope_let() {
    let b = 10;
    if (b > 5) {
        let b = 20;
        console.log(`let b = ${b}`); // let b = 20
    }
    console.log(`let b = ${b}`); // let b = 10
}
function scope_const() {
    const c = 10;
    if (c > 5) {
        const c = 20;
        console.log(`const c = ${c}`); // const c = 20
    }
    console.log(`const c = ${c}`); // const c = 10
}

scope_var();
scope_let();
scope_const();

테스트 결과값

var 은 값이 변경되고 let 과 const 는 block 기준으로 값이 변경되지 않고 각자 변수값이 출력된다

 

2. 값변경

function value_change() {
    var a = 10;
    a = 20;
    console.log(`var a = ${a}`); // var a = 20
    let b = 20;
    b = 30;
    console.log(`let b = ${b}`); // let b = 30
    const c = 30;
    c = 40;
    console.log(`const c = ${c}`); // TypeError: Assignment to constant variable
}

value_change();

const 는 값을 변경할 수 없습니다

var 과 let 는 얼마든지 변경 가능합니다

3. 재선언

var 만 변수 재선언이 가능합니다

function redeclare() {
    var a = 10;
    var a = 20;
    console.log(`var a = ${a}`); // var a = 20
    let b = 20;
    let b = 30;
    console.log(`let b = ${b}`); // SyntaxError: Identifier 'b' has already been declared
    const c = 30;
    const c = 40;
    console.log(`const c = ${c}`); // SyntaxError: Identifier 'c' has already been declared
}

redeclare();

let 과 const 는 syntaxError 납니다

 

4. 초기값

var 과 let 은 초기값이 없이 선언 가능하지만

const 는 반드시 초기값이 있어야 합니다

function initialized() {
    var a;
    console.log(`var a = ${a}`); // var a = undefined
    let b;
    console.log(`let b = ${b}`); // let b = undefined
    const c;
    console.log(`const c = ${c}`); // SyntaxError: Missing initializer in const declaration
}

initialized();

 

결론

const 로 변하지 않는 값들을 선언해주고

변하는 값들은 전부 let 을 사용합니다

var 은 되도록 사용하지 마세요