ECMAScript 6 정리

모던 웹을 위한 JavaScript + jQuery 입문 책을 참고하여 작성한 내용입니다.

주의 ECMAScript6에서 추가된것은 모든 버전의 인터넷 익스플로러에서 동작하지 않는다.

 

1) let 키워드와 const 키워드

ECMAScript5까지는 '식별자에 값을 넣어 활용하기 위한 기능'이 var키워드를 사용한 변수 밖에 없었다.

ECMAScript6부터는 'let 키워드를 사용한 변수', 'const 키워드를 사용한 상수'라는 개념이 추가되었다.

키워드	구분	선언위치	재선언
var	변수	전역 스코프	가능
let	변수	해당 스코프	불가능
const	상수	해당 스코프	불가능

ECMAScript5 까지는 var키워드를 사용한 변수 밖에 없었는데, ECMAScript 6부터 상수라는 개념이 생긴 이유는 성능향상 때문이다. 상수는 변할 가능성이 없으므로 '변한다'라는 속성과 관련된 처리를 할 필요가 없다. 

 

var 키워드로 선언한 변수와 let 키워드로 선언한 변수의 차이

특정 변수를 사용할 수 있는 유효 범위를 '스코프(유효 범위)'라고 한다. 대괄호로 감싼 부분이 스코프이다.

 

//전역스코프
{
   //스코프 A
   {
      //스코프 B
   }
}

일반적인 프로그래밍 언어에서는 "특정 스코프 안에서 선언한 변수는 해당 스코프 안에서만 사용할 수 있다"라는 규칙이 있다. 따라서 다른 프로그래밍 언어에서 아래의 코드처럼 작성하면 오류가 발생한다.

--> C언어에서는 "블록"이라고 했는데, 특정 블록안에서만 사용하는 변수는 그 블록안에서 선언하라고 했었지.. 왜냐하면 블록을 빠져나가면 해당 변수는 메모리에서 사라지니까- 

 

//전역스코프
{
	//스코프 A
    var val = 'helloWorld!';
	{
    	//스코프 B
        alert(val);	//C언어도 여기까지는 실행 가능하다.
    }
}
alert(val);			//C언어에서 에러나는 부분. 블록을 벗어나면 val이라는 변수는 사라지기 때문

하지만 자바스크립트 에서는 오류가 발생하지 않는다.. 헉.. 헐...... 자바스크립트의 var키워드는 '전역 스코프 위치'에 변수를 선언하는 키워드이기 때문이다.

 

일반적으로 스코프 내부에 선언한 변수는 해당 변수를 생성한 이후 스코프 내부에서 사용하고, 스코프를 벗어날 때는 제거해야 메모리 등의 시스템 자원을 적절하게 이용할 수 있다. 하지만 자바스크립트의 var 키워드는 그렇지 못하다!

> 반면 let 키워드는 스코프 내부에서만 변수를 사용할 수 있도록 한다!

 

NOTE. var 키워드의 비동기 함수 문제

var 키워드의 특성은 다양한 실수를 유발할 수 있다.

//1초 * i초 후에 i를 출력. 
//0초후에 0, 1초후에 1, 2초후에 2를 출력할것이라 예상.
for(var i = 0; i < 3; i++){
	setTimeout(() => {
    	alert(i);
    }, 1000 * i);
}
/*-> 하지만 실제 결과는 1초에 3을 세 번 출력하게 된다.*/

for(let i = 0; i < 3; i++){
	setTimeout(() => {
    	alert(i);
    }, 1000 * i);
}
/* - > let을 사용하면 의도한 대로 0, 1, 2 를 차례로 출력하게 됨!*/

하지만 예상과는 달리 1초라는 시간을 두고 3을 3번 출력한다! 1초후에 i를 출력할때 i의 값은 전역 스코프에 3으로 존재하기 때문에 해당 값을 출력하는 것이다. 

--> setTimeout 콜백은.. 메인스레드 코드가 전부 실행한 후에 실행된다고 했던것 같은데.. 그거랑 관련이 있는건가.

 

참고로 ECMAScript6을 ECMAScript5로 변환해주는 바벨등의 모듈은 let키워드를 단순하게 var키워드로 치환해 준다. 따라서 이처럼 setInterval(), setTimeOut()함수 등의 비동기 함수를 사용했을때 문제가 발생 할 수 있다. 기억하도록 한다.

 

+ 2장 끝부분에 "학습할때 가장 많이 하는 실수는 가장 어렵고 재미없는 부분에서 긴 시간을 보내는 것이다" 라는 말이 있는데 이말에 매우 공감했다. 어떤 내용은 한참을 끙끙대며 노력해도 이해가 가지 않아서, 결국 뒷장의 나머지 부분에 대한 학습을 포기한적이 있다. 하지만 이런 내용은 실제로 프로젝트에서 사용하면 그동안의 고민이 무색해 지리만큼 쉽게 이해가 된다. 예전에 내가 자주 하던 실수다. 일부에 매몰되지 말자. 즐겁게 공부하자!