JS 변수 선언 방식_ let, var, const의 차이

자바스크립트를 사용할 때면, 변수를 선언하기 위해 어떠한 방식이 필요하다.

가령 num이라는 이름의 변수를 선언하고 싶은데, 바로 num을 쓰고 이 변수에 값을 지정해 주면 안된다.

 

이 방식이라 하면 변수 앞에 let, var, 혹은 const 이 세 개 중 하나를 붙여주어야 하는 것을 의미한다. 물론 한 번 선언된 변수는 후에 선언 방식 없이 변수만으로 사용 가능하다(변수에 값을 변경해줄 때)

 

그렇다면 이 세 개의 차이점은 무엇일까???

아마 자바스크립트를 익숙하게 사용한 사람들은 묘하게 이 차이를 알 것이다. 하지만 말로 설명해보라고 하면 정확하게 설명할 수 있을까? (나의 대답은 No였고) 내가 어렴풋이 알고 있는 개념도 다시 정확하게 정리해보려 한다.

 

우선 변수 선언 방식은 변수가 영향을 미치는 범위라고 할 수 있는 scope와 관련되어 있다.

function-scoped	block-scoped	전역 scope
해당 변수가 함수 내에서만 영향을 미침	if이나 for문 같이 block내로 범위가 한정	코드 전체에 영향
var	let, const	함수나 block 외부에서 변수가 선언될 경우, 해당 변수는 전역 변수가 된다.

 

var, let, const 비교

var

• ES6 이전의 변수
• 재선언 및 값 변경도 가능
• hoisting이 가능하다. 선언부 위로 올라갈 수 있다. 즉 변수가 선언되기 전에 해당 변수에 대해 console.log와 같은 코드로 변수를 사용할 수 있다.( 물론 선언되기 전이라 undefined가 뜨지만, 에러가 나지는 않는다.)

let / const

• ES6 문법에 의해 등장한 변수 선언 방식
• 변수 재선언 불가능
• 물론 hoisting이 가능하나, 이는 사용된 후에 꼭 선언이 되어야 한다. 즉 선언이 되지 않는 상태에서의 사용은 불가능 한 것이다. (tdz(temporal dead zone)으로 인해)
  -> 이에 대한 이유는 JS가 동적타입언어라서, tdz 존이 없다면, 값이 선언되지 않는데도 컴파일 되고, 런타임 시 문제가 발생할 수도 있다. runtime type check를 위해서 필요하다.
  
  ** 동적 타입 언어란, 런타임시에 타입이 결정되는 언어이다. 여기서 런타임은 프로그램이 실제로 실행되는 경우이다.(컴파일은 코드가 컴퓨터가 이해되는 언어로 변경되는 것을 의미)
  
  
• let과 const의 차이
  -> let : 변수 변경 가능 / 선언 후에 값을 따로 할당하는 것이 가능하다
  -> const: 변수 변경 불 가능 / 선언과 동시에 값을 할당해야 한다.

 

* function-scope의 예시

// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

// IIFE를 사용하면
// i is not defined가 뜬다.
(function() {
  // var 변수는 여기까지 hoisting이 된다.
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
})()

 

* 전역변수에 대한 추가 설명

전역변수가 코드 전체에 영향를 미칠 수 있지만, 특정 영역 내에서 같은 이름의 변수가 사용될 경우, 약간의 문제가 발생할 수 있으므로 전역변수 사용에는 주의 해야 한다. 가령 아래와 같은 코드가 있다고 치자

이런 코드의 경우, if문 내의 console.log 결과는 if 문 내의 변수를 읽어서 출력할 것이다. 변수를 읽는 순서가  (내가 속한 범위 내 -> 전역 변수) 이러한 순서로 진행되기 때문이다. 하지만 이렇게 같은 이름의 변수가 코드 내에서 사용되면 오류가 발생할 여지가 있으므로, 주의해야 하는 것이다.