[JavaScript] var vs let vs const

 

var의 경우 ES5까지 사용하던 변수 생성 방법이다.

그리고 let과 const는 ES6부터 변수와 상수를 생성하기 위하여 사용하고 있다.

오늘은 이 세 가지에 대해 차이점을 살펴보고자 한다.

 

---

 

먼저 위에서 언급했지만 var와 let의 경우 공통적으로 변수를 생성한다.

그리고 const의 경우 상수를 생성한다는 것이 명확한 차이점이라고 볼 수 있다.

그렇다면 var와 let의 차이점에는 무엇이 있는가?

둘 다 공통적으로 변수를 생성한다면 굳이 있을 필요가 없지 않을까?

하는 생각이 들 수 있을 것 같다.

 

var은 javascript의 초기부터 지속적으로 사용해 오던 것으로 함수 & 전역 scope이다.

그리고 let과 const의 경우에는 Block Scope라고 할 수 있다.

 

그렇다면 Block Scope와 함수 & 전역 scope의 차이는 무엇일까?

 

let name = 'Max';

function greet(){
	let age = 30;
	let name = 'Manuel';
	console.log(name,age);
}

console.log(name,age);
greet();

먼저 코드를 작성해서 실행해 보면 웹페이지에 오류가 발생한다.

바로 다음 consoel.log(name,age); 코드 때문인데 age는 greet이라는 function 내에 정의된 변수이기 때문이다.

 

즉, 오류가 발생하는 구간은 함수 밖의 console에서 발생하며

age는 function이라는 블록 내에서만 유효한 변수가 되는 것이다.

그렇다면 여기서 한 개 더 살펴볼 수 있는 것이 있다.

let name = 'Max'; 을 잘 살펴보면 전역 변수로 한 번 그리고 지역변수로 한 번 선언한 것이 확인된다.

그렇다면 다음과 같은 코드는 오류가 발생할까?

 

let name = 'Max';
let name = 'Jane';

function greet(){
	let age = 30;
	let name = 'Manuel';
	console.log(name,age);
}

console.log(name,age);
greet();

해당 코드는 동일한 전역 변수를 두 번 선언했기 때문에 오류가 발생한다.

두 코드의 차이점은 바로 전역 변수와 지역변수 or 전역 변수와 전역 변수라는 차이에 있다.

이처럼 전역변수는 지역변수에서 다시 재정의 되어도 문제가 되지 않는데 이는 Shadowing의 역할 덕분이다.

 

Shadowing이란 함수 바깥의 변수는 잠시 가려지고

함수 내에서는 정의된 변수가 역할을 진행한 뒤

해당 함수가 끝나면 전역 변수가 다시 사용되는 것을 의미한다.

 

다음은 Error가 발생하지 않는 정상적인 코드이다.

let name = 'Max';

function greet(){
	let age = 30;
	let name = 'Manuel';
	console.log(name,age);
}

console.log(name);
greet();

이곳에서 Shadowing을 조금 더 살펴보면

처음 console.log(name)에 의하여 찍히는 결과 값은

전역 변수 name의 Max이다.

그리고 함수가 호출된 후 함수가 실행될 경우 console.log(name, age)가 실행되고,

이때 결과 값은 Manuel,30 이 되는 것이다.

 

다시 돌아와서 var에 대해 동일한 코드를 통하여 설명하고자 한다.

먼저 정상적인 코드의 let을 모두 var로 바꿀 경우 오류가 발생하지 않는다.

var name = 'Max';

function greet(){
	var age = 30;
	var name = 'Manuel';
	console.log(name,age);
}

console.log(name);
greet();

 

해당 값은 위에서 말했던 결과 값과 같이 차례대로 출력되는데

다음 상황에서는 문제점이 발생한다.

var name = 'Max';
var name = 'Jane';

function greet(){
	var age = 30;
	var name = 'Manuel';
	console.log(name,age);
}

console.log(name);
greet();

먼저 greet() 함수의 호출은 정상적으로 Manuel,30이라는 결과 값이 뜬다.

다만, 함수 호출 이전 console을 출력했을 때 name의 값은 Jane이 되는 것이다.

이처럼 var의 경우 동일한 scope에서 이미 선언한 변수를 다시 선언할 경우

에러가 발생되지 않고 해당 값으로 변경된다는 것이다.

 

이것보다도 더한 문제점은 다음 코드에서 발생한다.

var name = 'Max';

if(name=='Max'){
	var hobbies = ['Sports','Cooking'];
	console.log(hobbies);
}

function greet(){
	var age = 30;
	var name = 'Manuel';
	console.log(name,age);
}

console.log(name,hobbies);
greet();

다음과 같은 코드는 오류가 발생하지 않고 다음과 같은 출력을 진행한다.

코드 출력

즉, if문 안의 hobbies는 하단 console.log(name,hobbies); 에서도 동일하게 작용한다는 의미이므로

var로 선언한 hobbies가 전역 변수로 선언됐다는 의미이다.

어디에나 있는 전역변수가 되었기 때문에

이후 function인 greet안에 추가로 선언했을 때도

정상적으로 hobbies가 작동한다는 의미이기도 하다.

 

만약 if문 안의 var를 let으로 바꾸었을 경우에는 어떨까?

그렇게 되면 if문 안의 console.log 는 정상적으로 작동하겠지만,

먼저 선언된 console.log(name,hobbies); 는 작동하지 않고 오류를 발생시킨다.

 

var과 let, const의 가장 큰 차이는 위에서 나온다.

var의 경우 전역과 함수 밖에 구분하지 못하지만

let과 const의 경우 {}를 기준으로 인식한다.

즉 중괄호가 블록을 표시한다는 의미이다.

※ const Person = {}과 같은 key:value 쌍을 선언하는 곳에서는 let을 사용할 수 없다.

 

블록 단위 외에서는 사용할 수 없기 때문에 데이터 제어에 조금 더 용이하다.

 

---

 

🌸 해당 글은 Udemy에서 진행하는 JavaScript 완벽가이드를 수강하고 작성하였습니다.

🌸 오타와 내용적인 실수는 댓글로 언제든지 부탁드립니다. 🙏🏻