열정 실천

[JavaScript] var를 쓰지 않는 이유 - 함수스코프, 호이스팅 본문

개발 공부/JS

[JavaScript] var를 쓰지 않는 이유 - 함수스코프, 호이스팅

구운오니 2023. 7. 19. 14:49

 

 

ES6에서 변수를 선언하는 문법인 letconst를 지원하면서 var의 사용을 지양한다. 

 

더보기

📢 ES6란? 

ECMAScript 6의 약자로 2015년에 도입된 최신 버전의 JavaScript이다. 

 

 

👀👀

 

그럼 왜 var를 쓰면 안되는가?!

 

 

var를 쓰면 안되는 3가지 이유 

 

1. 같은 이름의 변수를 중복해서 선언이 가능하다.

var a = 5;
var a = 10; 
console.log(a);  // 10

 같은 이름의 변수를 중복해서 선언할 수 있고, 가장 마지막에 선언된 값을 저장하고 있다. 

 

 

 

 

 

2. 호이스팅이 발생한다. 

 

📢호이스팅이란? 

해당 변수의 선언부를 스코프 최상단으로 올려버리는 것

 

 

해당 코드는 

var a = 123;
function func() {
	console.log(a); // undefined
	var a = 456;
	console.log(a); // 456
}
func();

 

var 호이스팅에 의해 아래와 같이 인식된다. 

 

var a = 123;
function func() {
 	var a;
  	console.log(a); // undefined
  	a = 456;
  	console.log(a); // 456
}
func();

 

호이스팅으로 인해 a의 메모리상 주소는 존재하지만 아직 값이 정의되지않아 undefined 가 출력된다.

 

 

 

 

 

3. 함수 스코프이다. 

 

블록스코프가 아닌 함수스코프이기 때문에

블록 안에서 var를 선언했다 하더라도 블록 밖에서 해당 변수에 접근이 가능하다. 

 

 * 컴퓨터 언어들의 변수 선언 문법은 대부분 블록스코프이다.

 * var를 대체하기 위해 나온 let, const가 블록스코프이다. 

 

for(var i=0; i<10; i++){
	console.log(i);   // 1 2 3 4 
}
console.log(i);  // 5

블록스코프라면 for문 밖의 console.log(i);에서 i에 접근할 수 없어 오류가 나는데, 

함수스코프인 var로 선언되어 for 블록 밖에서 i를 접근하여 5가 출력된다. 

 

 

 

 

스코프, 함수스코프, 블록스코프 알아보기 👉👉  https://guun-oni.tistory.com/80

 

 

 

 

 

 

▶ 다음 포스팅 내용 :: var, let, const의 차이