JavaScript의 ES란?, ES5/ES6 문법 차이

ES란, ECMA Script를 말한다.

ECMA는 유럽 컴퓨터 제조업자 협회의 줄임말이라고 한다. 뒤에 script는 직역하면 대본이라는 뜻이니까 컴퓨터언어 내에서의 규격같은 거라고 이해했다.

 

 

JavaScript는 언어이고, ES는 표준, 문법등을 뜻한다.

그리고 꾸준하게 언어의 문법이 바뀌다보니, ES5, ES6 이런식으로 구분을 한다. 가장 최근에 바뀐 것은 ES6이다.

깨알지식으로는 ES6가 2016년에 시작된 것 같지만, 2015년부터 바뀐 문법이다. 그래서 ES2015라고도 한다.

 

 

 

그렇다면 2009년에 나온 ES5와 ES6의 차이점에는 어떠한 것들이 있을까?

 

 

 

• let, const 키워드 추가

이전에는 var 키워드만을 사용했다. var는 함수스코프를 가지고, TDZ에 해당하지 않는다. 복습할 겸, 좀 더 써보면 var 키워드를 사용하여 변수를 선언에 있어서 let과 const와 똑같이 호이스팅이 되는 점은 똑같다. (호이스팅은 코드 최상위에서 미리 선언되는 것) 하지만 var만이 let과 const와 다른 점을 가지고 있는데, 그것은 초기화단계이다. 1,2,3단계로 변수를 할당하기까지의 과정을 나누어 봤을 때, var키워드 만이 1단계에서 선언과 초기화가 동시에 진행될 수 있다. 그래서 let과 const는 선언을 먼저하면, 오류가 발생하지만 var키워드는 undefined로 출력이 되는 것을 알 수 있다. 하여튼, let 과 const 키워드가 추가되었다. const는 상수형 키워드라 한 번 할당하면 그 값을 변경할 수 없다. 기존에 없던 상수형 키워드라 유용하게 쓰일 것 같다.

 

 

 

• Arrow 문법 지원

화살표함수가 생겼다. 나는 당연하게도 화살표함수가 처음부터 있을 거라 생각했는 데, 생긴 지 얼마  안 된 문법이였다.

 

 

 

 

 

그렇다면 화살표함수는 왜 사용하고, 기존의 function과 무슨 차이가 있을까?

 

 

 

 

 

• 첫번째로는 당연하게도, 코드의 간결성이다.

기존 function을 사용할 때와 달리, 타이핑 수가 8 -> 2로 줄어들었다. 매우 깔끔하고, 기분이 좋아진다.

그리고 화살표함수를 사용할 때, 코드가 한 줄일 경우, return을 생략하는 것이 가능하다..!

let sum = (a, b) => a + b;

//위랑 아래를 비교해보자

let sum = function(a, b) {
    return a + b;
};

 

 

• 화살표 함수는 중복된 매개변수 이름을 선언할 수 없다.

function Func2 = (a, a) => {
	return a + a
}
Func2(1, 2); // Syntax Error

function Func3 (a, a) {
	return a + a
}
Func2(1, 2); // 4

 

 

 

• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

일반함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 따라서 일반 함수에서는 this가 바인딩 된다.
일반함수 실행시에는 전역(window) 객체를 가리킨다.
그리고 메서드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
일반 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것은 아니고, 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

반면에 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정되며, 화살표 함수의 this는 언제나 상위 스코프의 this를 가리키게된다. 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

 

 

• 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다. (일반함수는 인스턴스 생성가능)

인스턴스를 생성할 수 없다는 것은 prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다.
그리고 화살표 함수는 생성자 함수로서 호출을 할 수 없다.

const Func = () => {};

new Func(); // Type Error. Func is not a constructor