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 재선언
	var fruit = 'banana'
	console.log(fruit);
	// => banana
	var fruit = 'apple'
	console.log(fruit);
	// => apple
	// var 재할당
	fruit = 'grape'
	console.log(fruit);
	// => grape
	// let 재선언
	let fruit2 = 'banana'
	console.log(fruit2);
	// => banana
	let fruit2 = 'apple'
	console.log(fruit2);
	// => Uncaught SyntaxError: Identifier 'fruit' has already been declared
	// 이미 선언된 변수라는 에러가 나온다.
	// let 재할당
	fruit = 'grape'
	console.log(fruit2);
	// => grape

view raw variable.js hosted with ❤ by GitHub

 

var과 let의 참조

	// var 참조 시점과 할당 시점
	console.log(fruit); // 변수 참조1 (Hoisting 가능)
	// => undefined (변수가 선언된 것은 인식하였지만 아직 정의되지 않은 변수)
	var fruit; // 변수 초기화
	console.log(fruit); // 변수 참조2
	// => undefined (변수가 선언된 것은 인식하였지만 아직 정의되지 않은 변수)
	fruit = banana; // 할당
	console.log(fruit); // 변수 참조3
	// => banana
	// let 참조 시점과 할당 시점
	console.log(fruit2); // 변수 참조1 (Hoisting )
	// => fruit5 is not defined (변수가 선언된 것을 인식하지 못한다.)
	let fruit2; // 변수 초기화
	console.log(fruit2); // 변수 참조2
	// => undefined (변수가 선언된 것은 인식하였지만 아직 정의되지 않은 변수)
	fruit2 = 'grape'; // 할당
	console.log(fruit2); // 변수 참조3
	// => grape

view raw variable2.js hosted with ❤ by GitHub

 

 

 

function scope와 block scope

 

scope

function scope 

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

 

block scope

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