[Java Script] var, let, const 차이점

JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자.

 

	var	let	const
중복선언	O	X	X
호이스팅	O	O	O
재할당	O	O	X
선언과 초기화	초기화를 안해도 undefined	초기화를 안하고 참조하면 TDZ구간	선언과 동시에 초기화 해야함
스코프	함수레벨	블록레벨	블록레벨

 

[변수 선언]

자바스크립트에서 변수가 무엇인가?

변수(variable): 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

 

자바스크립트는 managed language 이기 때문에 개발자가 직접 메모리를 제어하지 못한다.

그래서 변수를 통해서 값에 접근을 한다.

변수명은 변수의 값이 아닌 메모리 주소를 기억한다.

그리고 변수명으로 부르면 그 주소에 저장된 값을 반환한다.

값을 저장하는 것: 할당

변수에 저장된 값을 읽어들이는 것 : 참조

변수명을 자바스크립트 엔진에 알리는 것 : 선언

 

 

변수는 var, let, const로 선언할 수 있고 호이스팅이 된다.

변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다.

호이스팅 : 변수의 선언이 코드의 맨 위로 올라가서 젤 먼저 실행되는 것

 

1) var

• 선언과 동시에 초기화가 일어나서 초기화하기 전에 참조하면 undefined이다.
• 같은 이름으로 재선언 가능

console.log(hyeonju) // output: undefined
var hyeonju

 

2) let

• 선언과 초기화 단계가 분리되어서 직접 초기화를 해주기 전에 참조하면 에러가 난다.
• name이라는 선언은 호이스팅이 됐지만 초기화는 그 밑에서 됐기 때문!
• 같은 이름으로 재선언 불가 , 재할당 가능

console.log(name) // ReferenceError: Cannot access 'hi' before initialization

let name = 'hyeonju'

 

3) const

• 선언과 동시에 초기화를 해주어야한다.
• 그리고 let과 같이 직접 초기화 해주기 전에 참조하면 에러가 난다.
• 재선언 불가, 재할당 불가

console.log(hi) //ReferenceError: Cannot access 'hi' before initialization
const hi = 'hyeonju'

 

 

---

 

[스코프]

• 스코프 : 식별자(변수명, 함수명, 클래스명)의 유효범위.
• 선언된 위치에 따라 유효 범위가 달라짐.
• 전역 스코프 : 어디서든지 참조 가능
• 지역 스코프 : 지역 내에서만 참조 가능

 

• 블록레벨 스코프 : 코드 블록(if, for, while ...) 지역 스코프 안에서 작동
• 함수레벨 스코프 : 함수의 코드 블록만을 지역 스코프로 인정

 

• var: 함수레벨 스코프
• let, const : 블록레벨 스코프

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

a는 전역 변수이다.

그래서 if블록 안에 있는 a도 전역이 돼서 5가 나온다.

 

코드가 길어질 수록 디버깅의 문제가 있기 때문에 let, const를 쓰는 것을 권장한다.

 

 

[참조]

1. https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
2. https://poiemaweb.com/es6-block-scope

• https://www.howdy-mj.me/javascript/var-let-const/
• https://medium.com/korbit-engineering/let%EA%B3%BC-const%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EB%90%A0%EA%B9%8C-72fcf2fac365