[Javascript] var 키워드를 더 이상 사용하지 않는 이유(let, const 사용 권장)

1. 자바스크립트 ES6에서의 변화 

ES6으로 발전하면서 많은 코드 안정화등의 여러 변화를 가져왔지만, 가장 눈에띄는 변화는 var의 사용자제 및 let,const의 사용 권장이다.

기존(~ ES5)에는 자바스크립트에서 변수생성을 var 키워드를 통하여 행햐였지만,

자바스크립트가 ES6가 되면서 var의 사용을 권장하지 않게되었다.

왜 그럴까?

 

2. var vs let, const

우선 var, let, const의 공통점 및 차이점을 표로 나타내면

var	let	const
변수 생성	변수 생성	상수 생성
Js 초창기부터 사용되어옴	ES6 이후~	ES6 이후~
함수, 전역 스코프 사용	블록 스코프 사용	블록 스코프 사용

여기서 다른 내용들은 특별한 점이 존재하지 않지만, "스코프"가 생소하다.

 

2_1. 스코프란?

스코프란 직역하면 '범위'라는 뜻이다. 이는 프로그래밍적으로 본다면 '변수에 접근할 수 있는 범위'라는 뜻으로 사용된다.자바스크립트에서는 스코프는 전역, 지역 스코프가 존재한다.전역 스코프는 어느 곳에서나 해당 변수에 접근할 수 있음을 나타내고, 지역 스코프는 해당 범위에서만 접근할 수 있음을 나타낸다.

 

그렇다면 위에 표에서 var의 전역스코프 사용은 이해가 된다.하지만 나머지 함수 스코프와 블록 스코프는 무엇을 나타내는것일까?

 

2_2. 함수 스코프 vs 블록 스코프

var은 함수, 전역 스코프를 사용한다고 서술하였다. 이것은 무슨 의미일까?이는 변수의 범위가 함수안이냐 밖이냐로 나뉜다는 뜻이다.

즉, 함수 안에서 선언된 변수는 오직 함수안에서만 접근할 수 있고, 나머지 변수들은 어디에서나 접근 가능하다는 뜻이다.

예를들어 

var dummy = "messi";

if (dummy === "messi") {
  var dummy2 = "pedri";
}

function dummyFn() {
  var dummy3 = "dejong";
}

여기서 전역변수와 지역변수는 각각 몇개일까?

전역변수 -> 2개

지역변수 -> 1개

언뜻 보기에 if문 안에 변수(dummy2)도 지역변수같지만, var을 사용하는한 이또한 전역변수이다.

 

반면 let, const는 블록스코프 개념이 적용된다.

이말은 변수의 범위를 함수단위가 아닌 블록( {} )으로 구분한다는 뜻이다.

즉, if문이든 함수든 블록으로 감싸져있고, 그 안에서 변수가 선언된다면 그 변수는 그안에서만 접근할수있는 지역변수가 된다.

 

2_3. 결론

var을 사용하면 의도와 다른 결과를 불러올수있다(지역변수를 의도하였지만, 전역변수로 인식되는..)

따라서 let과 const를 사용하자!!!

-> (블럭안에서만 사용할 지역변수와 전역적으로 사용할 전역변수의 구분을 더욱 확실히 해줌)

 

3. Hoisting

Hoisting이란?

브라우저가 스크립트를 읽을때 변수를 사용하기 전에 선언을 강제시하는 것

var, let, const 모두 이러한 기능이 존재하지만 var은 undefind로 임의 초기화가되어 오류가 발생하지 않지만, let, const는 오류가 발생한다