var , let , const의 차이

var 는 function-scoped
let , const 는 block-scoped 이다.

for(var i=0; i<10; i++) {
    console.log('i', i)
}
console.log('call end loop i', i);   <=== 가능 


for(let i=0; i<10; i++) {
    console.log('i', i)
}
console.log('call end loop i', i);   <=== 불가능

이유를 살펴 보면 var 를 사용한 첫번째 코드는 실제로 보이지 않는 function 으로 구성되어있다. 

위의 var를 사용한 코드를 보기 편하게 풀어보면 아래와 같다.

(function() {
    for(var i=0; i<10; i++) {
        console.log('i', i)
    }
    console.log('call end loop i', i); 
});

위와 같이 function-scope인 var는 동일한 function 영역안에서는 어디서든 호출된다.
그렇기 때문에 변수명이 같은 변수를 선언하거나 전역으로 지정한 var 변수가 의도된 결과와 

다르게 출력되는 일이 종종 발생한다.

 

 

다음 좀 더 명확한 예제를 보기전에 기본지식을 알고 넘어가자.

변수의 선언과 할당

선언 : 변수의 타입과 변수값을 기술하는것. ex ) var a=1; 할당 : 이미 선언된 변수에 값을 기술하는것. ex) a = 2;

 

function 과 block

function 영역은 function이 감싸는 모든 영역이고 block 영역은 대괄호( { .. } ) 로

감싸는 영역이다.

function 영역
function fn_area() {
   // function 영역  	
}

block 영역
function bk_area(){
   var a = 1;
      //block1 영역
   if(a==2){
       //block2 영역
   }
}

 

이제 다음 예제를 보자 var 와 let, const의 차이가 더 잘 들어난다.

 

var

function var_test() {
  var a = 1;
  var a = 2;
  console.log("var a 변수 재선언 ===> " + a);

  if (a == 2) {
    var a = 3;
    console.log("var a 블록내 변수 재선언 ===> " + a);
  }
  console.log("var a 블록처리 후 변수 확인 ===> " + a);
  
  a = 4;
  console.log("var a 변수값 재할당 ===> " + a);
}

결과 "var a 변수 재선언 ===> 2" "var a 블록내 변수 재선언 ===> 3" "var a 블록처리 후 변수 확인 ===> 3" "var a 변수값 재할당 ===> 4"

 

let

function let_test() {
  let a = 1;
  //let a = 2; *동일한 변수명으로 선언이 불가능하여 오류가 발생한다.
  console.log("let a 선언된 변수 확인 ===> " + a);

  if (a == 1) {
    let a = 3;
    console.log("let a 블록내 변수 재선언 ===> " + a);
  }
  console.log("let a 블록처리 후 변수 확인 ===> " + a);
  
  a = 4;
  console.log("let a 변수값 재할당 ===> " + a); 
}

결과 "let a 선언된 변수 확인 ===> 1" "let a 블록내 변수 재선언 ===> 3" "let a 블록처리 후 변수 확인 ===> 1" "let a 변수값 재할당 ===> 4"

 

const

function const_test() {
  const a = 1;
  console.log("const a 선언된 변수 확인 ===> " + a);

  if (a == 1) {
    const a = 3;
    console.log("const a 블록내 변수 재선언 ===> " + a);
  }
  console.log("const a 블록처리후 변수 확인 ===> " + a);
  
  a = 4; //*재할당이 불가능하여 오류가 발생한다.
  console.log("const a 변수값 재할당 ===> " + a);
  
}

결과 "const a 선언된 변수 확인 ===> 1" "const a 블록내 변수 재선언 ===> 3" "const a 블록처리후 변수 확인 ===> 1" "Uncaught TypeError: Assignment to constant variable."

위의 결과를 보듯이 
var 의 경우는 동일한 변수명으로 선언과 재선언, 할당까지 가능했다.
또한 function-scope 방식이기 때문에 function 내부의 if 문 안에서도 변수를 재선언하고 

값을 할당 할 수 있었다.

let 의 경우는 동일한 변수명으로 재선언을 하자 오류가 발생하여 주석처리를 했다.
block-scope 방식으로 인하여 동일한 function 내부에 있는 if 문안에서 변수를 재선언하면

if문 밖에 있는 변수에 영향을 줄 수 없었다.
하지만 같은 block(대괄호) 내에 있는 변수에는 값을 재할당 하는것이 가능했다.

const 는 let과 동일한 특성을 보였으나 같은 block 내에 있는 변수에게 값을 재 할당하는 것이 

불가능했다.

정리

변수	방식	변수명 재선언 여부	변수값 재할당 여부
var	function-scope	가능	가능
let	block-scope	불가능	가능
const	block-scope	불가능	불가능

고정된 변수값을 사용해야하는 경우 const를 사용하고
동일한 변수명을 자주 사용하는 경우 let 을 사용하여 같은 block내의 변수 재선언을 방지한다.
es5 를 사용한 옛날 코드인 경우에는 할 수 없이 var를 사용한다.