var , let , const 의 차이

var, let, const 의 차이에 대해 예제와 함께 알아보자.

 

---

개요 

Javascript 에 ES2015(ES6) 가 도입되면서 , 비약적으로 많은 발전이 있었다.

그 중 하나는 scope 에 따라 달리 쓰게되는 let, const 이다. 이전에 함수나 변수를 정의하기 위해 사용되었던,

var 의 대체재 이다.  그렇다며 ㄴ왜 ES6 에서는 var 를 사용하지않고, let, const 를 사용하게 되었을까?

 

셋의 차이를 알기 위해선 먼저, 이때까지 우리가 사용해 왔던 var 에 대해 먼저 알아볼 필요가 있을 것 같다.

---

순서

1. var
2. var의 문제점
3. let이란
4. const
5. Summary

---

 

 

1. var

우선 변수 선언에 대해서 말하기 이전, scope 란 무엇인지에 대해 간략하게 설명할 필요가 있을 것 같다.

 

Scope 란, 변수나 함수가 어느 범위 내에서 사용가능한지를 나타내는 것

 

그렇다면 var는?

var의 scope는?  전역 변수가 될 수도 있고, 지역변수가 될 수도 있다.
한마디로, 크게 구분되어 있지 않다는 얘기이다.

 

예를 들면, 함수 내에 정의가 되어있다면, 기 함수 내의 지역변수가 되는 것이고, 함수 밖에 있다면, 그 var 변수는 전역변수가 되는 것이다. 

 

var glovalVariable = "Hello, Korea!"; // 전역 변수

function localVariableSeoul(){
  var seoulVariable = "Hello, Seoul!"; // 지역 변수
  console.log(globalVariable); 
}

function localVariableBusan(){
  var busanVariable = "Hello, Busan!"; // 지역 변수
  var busanVariable = "Hello, Busan2"; // 덮어씌울 수 있다.
  console.log(globalVariable);
}

console.log(glovalVariable); // "Hello, Korea!"
console.log(seoulVariable); // 에러 발생
console.log(busanVariable); // 에러 발생

 

여기서, glovalVariable 의 경우에는 다른 함수내에서도 사용이 가능하다.

다만, 함수내에 지정된 seoulVariable, busanVariable 의 경우에는 함수 밖에서는 사용할 수 없다.

 

그렇다면 var의 문제점은 무엇일까?

 

 

 

 

 

2. var의 문제점 

코드를 보며 확인해보자.

var problem = "This is not problem.";

function thisIsProblem(){
  var problem = "PROBLEM";
  console.log("PROBLEM : ", problem); // PROBLEM
}

console.log("global : ",problem); // This is not problem

thisIsProblem();

console.log("global : ",problem); // This is not problem

이 경우에 global 함수, local 함수 모두에 problem 이라는 함수가 사용되어, 코드상에 문제가 생길 수 있다. 물론 위의 경우에는 단순히 소스코드의 파악이 가능하나, 코드가 조금이라도 길어지게 된다면, 코드에는 예상치 못한 버그들이 즐비하게 될 것이다.

 이러한 애매모함을 해결하기위해 let, const 가 도입되었다.

 

 

 

 

 

3. let이란?

Let 은 코드블럭 사이에서만 사용되는 함수이다. (블록이란 일반적으로 { } 안에 있는 코드 블락을 의미한다)

 

if(true){
  let variable = "Hello, Seoul";
  console.log(variable); // Hello, Seoul
}
console.log(variable); // X

 

또한, let 은 다시 선언될 수 없으며, 업데이트만을 허용한다.

let variable = "Hello, Seoul!";
variable = "Hello, busan"; // O
let variable = "Hello, error!"; // X

하지만, 

 

let variable = "Hello, World";

if(true) {
  let variable = "Hello, Block"; // O
  console.log(variable); // Helo Block
}

console.log(variable); // Hello, World

위의 예제 처럼, 다른블록에 코드가 사용될때에는 새롭게 선언되어질 수 있다. (사실상 다른 변수)

 

 

 

 

 

 

4. const 

let 과 동일하게 const 역시 코드블럭 사이에서만 사용될 수 있는 함수이다.

다만 차이점으로는 const 는 업데이트 및 재 선언이 되지 않는다.

const constVariable = "this can't be updated";

// 재선언 되지 않는다.
const constVariable = "updated"; // X

// 수정되지 않는다.
constVariable = "updated"; // X

 

하지만 const 로 선언된 object (예 json) 의 경우에는, 업데이트가 허용될 수 있다. (안함을 추천)

const obj = {
  "Hello" : "World!"
};
obj.Hello = "X";

const obj = {
  "Hello" : "Should not update"
}

 

 

 

 

 

5. Summary

종합해보면, 

• var는 전역변수, 지역변수 구분하지 않는 반면에, let 과 const 는 지역 변수로서 정해진 scope 내에서만 사용이 가능하다

	지역 변수	전역 변수
var	구분 없음	구분 없음
let	O	X
const	O	X

 

• var, let, const 모두 호이스팅이 된다. 하지만 호이스팅 시 차이가 있다. (호이스팅이란?)

	Hoisting? (최상위 선언)	Initialized (할당)
var	O	O : undefined
let	O	X : ReferenceError
const	O	X : ReferenceError

• var, let, const 의 재선언 혹은 수정이 다르다.

	재선언	수정
var	가능	가능
let	가능	불가능
const	불가능	불가능
const내의 object ( variable.key )	가능	가능

 

• var, let, const 의 초기 선언 시, const 는 항상 값을 지정해주어야한다.

	초기 값 지정 필수
var	X : var variable;
let	X : let variable;
const	O : const variable = "This should initialized like this"

 

 

 

 

 

 

링크:

(호이스팅이란?)

JAVASCRIPT - HOIST (호이스트) 란