[JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이

[JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이

 

 

 

구분	var	let	const
공통점	변수를 선언하는 방식, 어떤 변수타입이든 선언 가능
차이점	재할당 가능	재할당 가능	재할당 불가능
	재선언 가능	재선언 불가능	재선언 불가능
	function-level-scoped	block-level-scoped	block-level-scoped

 

 

이들의 차이점을 이해하기 위해 예제로 살펴보자.

 

 

 

1. 선언과 할당

 

▶  var

 

- 자바스크립트 가장 많이 사용하는 변수 선언 방식 중 하나인 var는 변수 선언 시 할당되는 값이 유동적으로 변경될 수 있다.

 

 

var color = "RED";
console.log(color);		// output : RED

var color = "BLUE";
console.log(color);		// output : BLUE

 

코드를 보면 같은 'color'라는 같은 변수명으로 2번을 선언했는데도 에러가 나오지않고 각 값이 출력되는 것을 볼 수 있다.

 

C나 JAVA처럼 강형언어와는 다르게 자바스크립트라는 언어는 더 유연하다.

 

 

코드를 구현하기에는 쉬울 수 있지만, 코드가 길어지고 많은 사람이 협업하게 되었을 때 var 변수는 혼란을 가져올 수 있다.

 

내가 number 타입의 변수로 사용하고 있던 것을 다른 누군가가 재선언하면서 string 타입의 변수로 사용한다해도 자바스크립트는 에러로 잡지 않기 때문이다.

 

 

 

하지만 이런 var 선언 방식의 단점을 보완하여 ES6 이후로 let과 const 변수 선언방식이 추가되었다.

 

 

 

▶ let

 

- 이 변수 선언방식은 변수 재할당은 가능하지만, 변수 재선언은 불가능하다.

 

let color = "RED"; 	// output : RED
let color = "BLUE"; 	// output : Identifier 'color' has already been declared
color = "GREEN";	// output : GREEN

 

let을 재선언하여 사용했을 경우 color가 이미 선언되었다는 에러 메세지가 나오는걸 볼 수 있다.

 

 

 

 

▶ const

 

- const는 변수 재선언, 재할당 모두 불가능하다는 특징을 갖고있다.

 

const color = "RED";	// output : RED
const color = "BLUE";	// output : Uncaught SyntaxError: Identifier 'color' has already been declared
color = "GREEN";	// output : Uncaught TypeError: Assignment to constant variable.

 

 

 

 

 

2. 함수 레벨 스코프(Function-level scope)와 블록 레벨 스코프(Block-level scope)

 

 

- 함수 레벨 스코프 (Function-level scope)

 

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

즉, 함수 내부에서 선언한 변수는 지역변수이며 함수 외부에서 선언한 변수는 모두 전역변수이다.

 

 

- 블록 레벨 스코프 (Block-level scope)

 

모든 코드 블록(함수, if 문, for 문, while 문, try/chatch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내무에서 선언한 변수는 지역변수이다.

 

 

 

예제를 살펴보자.

 

var num = 10; // 전역 변수

console.log(num); // 10

{
	var num = 900; // 전역 변수
}

console.log(num); // 900

 

블록 레벨 스코프를 따르지 않는 var 선언방식 특성 상, 코드 블록 내의 변수 num은 전역 변수이다.

 

그런데 이미 블록 밖에 전역 변수 num이 선언되어 있다. var 로 선언한 변수는 중복 선언이 허용되므로 위의 코드는 문법적으로 아무런 문제가 없다.

 

단, 코드 블록 내의 변수 num은 전역 변수이기 때문에 전역에서 선언된 전역 변수 num의 값 20을 새로운 값 900으로 재할당하여 덮어쓴다.

 

 

 

그렇다면, 블록 레벨 스코프를 따르는 let이나 const는 어떻게 될까?

 

 

let num1 = 123; // 전역 변수

{
	let num1 = 456; // 지역 변수
	let num2 = 456; // 지역 변수
}

console.log(num1); // 123
console.log(num2); // ReferenceError: bar is not defined

 

 

위 예제에서 코드 블록 내에 선언된 변수 num1는 블록 레벨 스코프를 갖는 지역 변수이다.

 

전역에서 선언된 변수 num1과는 다른 별개의 변수인 것이다.

또한 변수 num2도 블록 레벨 스코프를 갖는 지역 변수이다. 따라서 전역에서는 변수 num2를 참조할 수 없다.