var / let / const 차이점

자바스크립트를 사용할 때 항상 변수선언에 크게 생각안하고 개발을 했었는데

최근에 3시간을 날려버린 이후 재발방지차원에서 정리해보려한다. 

 

'var는 오래되었고 요즘은 let으로 바꿔서 사용한다.'라는 말을 들은 적이 있다.

var로 선언한 변수는 let으로 선언한 변수와 유사한데 대부분의 경우에는 let -> var, var <- let으로 바꿔도 큰 문제없이 작동이 된다.

그런데 왜 바뀌게 되었을까?

 

var

1. var는 블록스코프가 없다. 

블록은 {}으로 바인딩된 코드청크이다.

var로 선언된 변수의 스코프는 함수스코프이거나 전역 스코프이기 때문에

블록 기준으로 스코프가 생기지 않아 밖에서도 접근이 가능하다.

if (...) {
  var hi = "안녕하세요."; // 
}
alert(hi); // 안녕하세요.(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

 위와 같이 if문뿐만 아니라 반복문에서도 동일한 문제가 발생한다.

 

2. var는 중복선언을 허용한다.

    var user = 'joey'
    console.log(user) // joey

    var user = '조이'
    console.log(user) // 조이

var로 같은 변수를 여러번 중복으로 선언이 가능하다. 첫번째 선언 이 후 한번 더 선언했어도

에러가 나오지 않고 다른 값을 출력하게된다.

(작은 단위의 테스트일 경우 편하지만 큰 프로젝트 내에서는 에러 찾기가 어렵다.)

 

3. 선언하기 전에 사용할 수 있다.

var는 함수 내에서 어디에 선언이 되더라도 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다.

이렇게 변수가 끌어올려지는 현상을 '호이스팅'이라 하는데 var로 선언된 모든 변수는 함수의 최상위로 호이스팅된다.

하지만 할당은 호이스팅 되지않기 때문에 문제가 될수있다.

function sayHi() {
  var phrase; // 선언은 함수 시작 시 처리된다.

  alert(phrase); // undefined

  phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리.
}

sayHi();

 

위와 같은 문제로 인해 ES6 이후, 이를 보완하기 위해서 도입된 선언방식이 let, const이다.

 

 

let

1. 블록범위

let으로 선언된 변수는 해당 블록 내에서만 사용가능하다. 

if (...) {
  var hi = "안녕하세요."; // 
}
alert(hi); // hi is not defined.(if 문이 끝났으면 변수접근 안됨)

 

2. 재선언 불가

 let test = "Hi";
 let test = "Hello"; // error: Identifier 'test' has already been declared
 
 let test = "Hi";
 test = "Hello"; //가능

3. 호이스팅

var와 동일하게 let선언도 맨 위로 호이스팅된다. 하지만 undefined 처리 되는 var와 다르게 let은 Reference Error(참조오류) 발생한다.

 

 

const

let과 const의 차이는 immutable 여부이다.

const로 선언된 변수는 일정한 상수 값을 유지한다.

 

1. 블록범위

const도 let처럼 선언된 블록범위 내에서만 접근이 가능하다.

 

2. 업데이트 및 재선언 불가.

모든 const 선언은 선언하는 당시에 초기화되어야한다.

 const test = "Hi";
 const test = "Hello"; // error: Assignment to constant variable. 
 
 const test = "Hi";
 const test = "Hello"; // error: Identifier 'test' has already been declared

하지만 객체의 경우는 다르다.

    const test = {
        message: "Hi",
        times: 1
    }
    
  //아래와 같은 작업은 불가
      test = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.
    
    //아래와 같은 작업은 가능
    test.message = "hello~~";

3.  호이스팅

const도 맨위로 호이스팅되지만 , 초기화 되지 않는다.

 

 

정리

• var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다.
• var 변수는 범위 내에서 업데이트 및 재선언할 수 있다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다. 
  const 변수는 업데이트와 재선언 둘 다 불가능하다.
• 세 가지 모두 최상위로 호이스팅된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고
  let과 const 변수는 초기화되지 않는다.
• var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야한다.