[ES6] var 와 let / const의 차이

회사에서 이번년도 신규 프로젝트에 TypeScript 와 ES6 이상의 문법을 무조건적으로 사용하기로 결정했기 때문에

(사실 이전부터 ES6 이상을 사용하고 싶었지만, 제일 큰 고객사인 삼성 전자의 IE 사용 때문에 힘들었다.)

차근차근 ES6에 대해서 알아가 보려고 한다.

처음으로 ES5 와 ES6 의 차이를 생각해보자면 변수 선언의 차이라고 생각이 든다.

ES5에서는 모든 변수를 var로 선언했다면 ES6 let 과 const로 나뉘게 된다.

 

ES5를 사용하면서 var 변수만을 사용해 왔는데 var 변수는 단점이 꽤 많이 있다.

대표적으로 나열하자면,

• 암묵적 결합이 가능
• 생략 
• 호이스팅
• 함수 레벨 스코프

위와 같은 단점이 var에 대해서 내가 느낀 단점과, 많은 개발자 분들이 느낀 점이었다.

 

하나씩 예를 들자면,

 

1. 암묵적 결합이 가능하다.

(function() {
	var temp = "This is temp variable";
   	var temp = "This is temp variable2";
    
    console.log(temp);
})();

위의 코드는 즉시 실행 함수를 사용하여 호출하지 않아도 바로 실행이 되는것을 확인할 수 있다.

console에 대한 결과 값이 어떻게 예상될까 ?

정답은 "This is temp variable2" 이다.

 

같은 이름의 변수에 중복으로 할당을 허용한 결과이다. 하지만 이렇게 사용하면 무엇이 문제가 될까?

만약 코드를 몇 십 몇 백 라인이 아닌 몇 만 라인이 넘어간다면 자주 사용하는 변수명에 값이 변경되는 치명적인 결과가 나타날 수 있다.

 

2. 호이스팅

(function() {
	console.log(temp);
	var temp = "This is temp variable";
})();

위의 코드는 변수 선언 전에 변수를 호출하는 코드이다.

에러가 발생할 것 같지만 해당 출력문은 undefined를 출력하게 된다.

 

런타임 이전에 변수 선언 부분만 끌어져 올려진 것처럼 동작하기 때문인데 이것을 호이스팅이라고 부른다.

 

3. 함수 레벨 스코프

(function() {
   if(flag){
    	var temp = "This is temp variable";
    }
    console.log(temp);
})();

위의 코드는 if문에 포함되지 않았어도 temp 변수에 대한 참조가 가능하다.

이렇게 된다면 에러가 발생해 예기치 못한 문제가 발생할 수 있다.

 

이러한 문제들을 해결한 것이 let 과 const 변수 선언이며 아래와 같은 특징이 있다.

 

1. 블록 레벨 단위의 스코프

2. 중복 선언 금지

3. 호이스팅이 동작하지 않는 것 처럼 동작

4. 변수 변경 가능

5. const 재 할당 불가능

 

3번에서 let 선언이 호이스팅을 발생하지 않는 것 처럼 동작한다고 나와있는데 let 키워드로 선언한 변수는 선언 단계와 초기화 단계로 분리된다. 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 만약 초기화 단계가 실행되기 전에 변수에 접근하려고하면 참조 에러(Reference Error)를 발생한다.

 

( let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 지점까지 변수를 참조 할 수 없다.

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 한다. )

 

let temp = 1; // 전역 변수
{
    console.log(temp); // ReferencError 발생
    let temp = 2; // 지역 변수
}

let 키워드로 선언한 변수의 경우, 변수 호이스팅이 발생하지 않는다면 위 예제는 전역 변수 temp의 값을 출력해야 한다.

하지만 let 키워드로 선언한 변수도 여전히 호이스팅이 발생하기 때문에 참조 에러가 발생한다.

 

ES6에서 도입된 let,const를 포함해서 모든 선언을 호이스팅한다.

단, ES6에서 도입된 let,const,class 를 사용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작한다.

 

결론 - 

var 의 단점 

• 함수 레벨 스코프
• 키워드 생략 허용
• 변수 중복 허용
• 호이스팅
• 긴 생명주기
• 암묵적 결합
• 스코프 체인 상 종점에 위치
• 네임스페이스의 오염

여기까지 var 와 let/const 키워드에 대해서 알아보았는데 var 키워드를 이제는 많이 사용하지는 않지만

키워드에 대한 이해를 하고 사용하는가에 대해 중심적으로 생각해보았다.

 

+ 앞으로 진행되는 프로젝트에서 사용되는 기술들에 대한 학습을 블로그에도 기록을 하는 시간을 가져야겠다.

2023년에는 발전하는 해가 되길!!