var, let, const 차이점과 유효범위 (Scope)

작업을 할 때 무의식적으로 var로만 변수를 선언하다가, let이나  const라는 변수를 보면 의아할 것이다. 도대체 왜 변수를 구분해서 쓸까? 사실 ES6 이전에는 let과  const가 존재하지 않았다. ES6에서 let과 const가 추가되었는데 차이점과 사용법에 대해서 알아보도록 하자.

 

 

 

 

목차

1. Scope란?
2. var, let, const 비교표
3. var의 문제점
4. var과 let의 재선언과 재할당
5. var과 let의 참조
6. function scope와 block scope

 

 

Scope란?

Scope란 변수의 유효 범위를 말한다. 선언한 변수가 어디까지 영향을 줄 수 있냐는 말이다. ES6부터 변수에도 종류가 생겼는데 각 변수에 따라 성격이 다르다. 

 

var, let, const 비교표

	var	let	const
재선언	O	X	X
재할당	O	O	X
호이스팅	undefined 출력	참조 에러	참조 에러
유효범위 (Scope)	function scope	block scope	block scope

 

재선언

var, let, const를 사용해 변수를 다시 선언하는 것이다.

 

재할당

이미 선언된 변수에 다른 값을 다시 할당해 주는 것이다. 재할당할 때에는 변수 할당 연산자 '='을 사용한다.

 

호이스팅

함수나 변수를 선언하기 전에 호출해도 에러가 발생하지 않는 현상을 호이스팅(Hoisting)이라고 한다.

모든 함수와 변수는 호이스팅이 일어난다. 하지만 var의 경우 undefined로 초기화 되어 메모리에 할당되지만, let과 const는 초기화되지 않은 상태로 메모리에 할당되기 때문에 선언 전에 호출하면 참조 에러가 발생한다.

 

 

 

 

var의 문제점

• function scope이므로 함수 밖에서 선언된 변수는 전역 변수가 된다.
• 변수가 여러개 중복으로 선언될 수 있으며, 값을 예상 못할 수 있다.
• 변수를 선언하기 전에 참조하면 undefined를 반환한다.

 

이러한 이유 때문에 ES6에서는 재선언과 변수 참조가 불가한 let, 재선언과 재할당과 변수 참조 모두 불가한 const가 나오게 되었다.

 

 

 

 

var과 let의 재선언과 재할당

 

var과 let의 참조

 

 

 

function scope와 block scope

 

scope

function scope 

• 특정 함수 내에서 변수를 선언하면 지역변수이고, 함수 밖에서 선언하면 전역변수이다.
• 함수 범위 내라면 블록 외부에서도 변수 접근이 가능하다.

 

block scope

• 코드 블록 내부에서 변수를 선언하면 지역변수이고, 코드 블록 외부에서 선언되면 전역변수이다.
• 코드 블록인 if, switch 조건문 / for, while 루프 내의 영역에서만 정의된다.
• 코드 블록 단위인 대괄호 {} 안에서 선언된다.
• 대괄호 밖(블록 밖)에서 접근할 경우 참조 오류(ReferenceError)가 발생한다.