1. ES란?
자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었습니다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제가각이라, 표준이 필요하게 되었습니다.
표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었습니다.
JavaScript의 탄생
옛날 Netscape에서 먼저 JavaScript라는 명칭이 아닌 Netscape Navigator를 내놓으며 정적이 아닌 동적인 웹사이트를 원하게 되었고 Brendan Eich와 함께 Mocah라는 언어를 만들게 되었다.
Mocha 이는 LiveScript라는 이름으로 바뀌게 되었고, 전세계 웹 브라우저 시장을 점령하게 되었다. 그때 바로 유행하던 개발 언어가 바로 Java였기에 Java의 이름을 따와 JavaScript가 되었다.
ECMAScript 4까지의 험난한 여정
MS 사에서는 이런 Netscape 성장에 긴장을 하게 되었고, Netscape Navigator를 Reverse engineering( 실제 타겟을 분석하여 그 구조 분석을 통해 발견하는 과정 : 위키백과 )하여 JScript라는 언어를 탄생하여 Internet Explorer에 탑제하게 된다.
그 시절, 개발자들은 사용자가 어느 웹 브라우저에서도 동작할 수 있는 웹 사이트를 개발하여야 했기 때문에 각 브라우저마다 새로운 언어를 배워야했고 고통 받았다.
JavaScript는 Ecma International 국제 기구에 등록하여 표준 규격을 잡기 위해 노력하였지만, MS사는 Windows 운영체제에 IE( Internet Explorer )를 탑제해 판매했기 때문에 웹 브라우저 시장에서 독보적인 존재가 되었고, JavaScript 규격을 따르지 않고 독자 노선을 타게 된다.
JQuery
이렇게 계속해서 Netscape 사와 MS사 간의 갈등은 계속되었고, ECMAScript 4버전에서 더이상 진척이 없게 된다.
그 동안 FireFox가 생기게 되었고, Netscape, MS, FireFox 의 3사가 계속 경쟁하게 된다.
하지만 경쟁만 할 뿐, 통합 규격이 없게 되자 개발자들끼리 모여 다른 브라우저에 상관없이 개발할 수 있는 개발 언어를 위한 커뮤니티가 생성되었고 이를 통해 JQuery 등의 Open API가 탄생하였다.
Chorme의 등장과 ECMAScript 5 규격
2008년, 획기적인 성능을 가진 브라우저가 탄생하게 되는데 바로 그것이 Google의 Chrome 이다.
Chrome은 JIT( Just-In-Time compilation ) 이라는 엔진을 탑제하여 JavaScript 를 빠른 속도로 실행할 수 있었고, 사용자들은 Chrome 브라우저로 눈길을 돌리게 된다.
NetScape, MS, FireFox는 그제서야 성능 개선이 필요하다는 것을 깨닫게 되고, 2009년 4사( NetScape, MS, Firfox, Chrome )이 모여 탄생한 규격이 바로 ECMAScript5이다.
그리고 ECMAScript 5에서 기능이 추가되어 2015년 ECMAScript 6가 나오게 된다.
2. ECMAScript 5와 ECMAScript 6 차이
JavaScript의 변화 주기(출처: https://www.swyx.io/writing/js-third-age/)
아직까지도 JavaScript의 표준 규격은 계속해서 추가되고 있다. 그렇다면 왜 ECMAScript 5와 ECMAScript 6를 비교해서 공부를 하게 되는 것일까?
ECMAScript5는 사용자( 개발자 )들이 JavaScript를 탐험하고 새로운 영역으로 확장시킨 시기라고 할 수 있다.( 특히, 4사가 다 합작해서 규격을 잡았으니 오죽 더 그랬으리라 추측해본다. )
ECMAScript5의 단점을 보완하고 새로운 기술을 적용한 것이 ECMAScript6이다.
지금부터 ECMAScript6에 추가된 내용을 살펴보겠다.
1. const, let 추가
재할당과 함수 스코프로 인해 오류가 발생할 수 있었던 var 키워드에서 const, let 키워드가 추가되었다.
이로 인해 버그나 코드에 안정성을 추가하였다. ( 물론, 이로는 부족하기 때문에 TypeScript가 생겨났다. )
2. Arrow function( 화살표 함수 ) 추가
기존에 function 키워드를 작성해서 만들었던 함수에서 추가되어 =>로 함수를 간결하게 나타낼 수 있는 Arrow function( 화살표 함수 )가 추가되었다.
가독성 및 유지보수성이 올라갔다고 하지만 아직 JavaScript가 익숙하지 않은 나에게는 많은 어려움을 겪고 있다.
다음 코드를 보자
function AddNumbers (num1, num2) {
return num1 + num2;
}기존의 함수를 ECMAScript5에서 이렇게 사용했다고 하면
AddNumbers( num1, num2 ) => num1 + num2;ECMAScript6에서는 function 키워드를 빼버리고 한줄로 작성할 수 있다.
( 물론, Arrow function은 다양하게 있다. )
3. Default parameter 추가
기존 함수를 작성할 때, Default parameter를 작성하기 위해서는 함수 내부에서 로직을 추가해줘야 했으나, ECMAScript 6에서는 이런 번거로움을 해결하였다.
// ECMAScript 5
// ECMAScript 5이기 떄문에 변수 선언 키워드를 var로 지정하였다.
function AddNumbers( num1, num2 ){
var num1 = num1 || 10;
var num2 = num2 || 20;
return num1 + num2;
}
// ECMAScript 6
function AddNumbers( num1 = 10, num2 = 20 ){
return num1 + num2;
}4. Template literal 추가
문자열을 표현하기 위해 ECMAScript5는 +와 ""를 사용했어야 했지만, ECMAScript 6에서는 Back tic( ESC 키 바로 밑의 문자 ` )를 사용하여 간결하게 표현할 수 있다.
// ECMAScript 5
// ECMAScript 5이기 떄문에 변수 선언 키워드를 var로 지정하였다.
var name = "jigom";
var age = 35;
console.log("나의 "+name+"이구요." + "나이는 "+age+"입니다.");
// ECMAScript 6
const name = "jigom";
const age = 35;
console.log(`나의 ${name}이구요. 나이는 ${age}입니다.`);5. Class 추가
이전의 JavaScript는 함수와 객체를 이용하여 class 처럼 사용하였다. 이번 ECMAScript 6에서 class를 추가하여 기능을 명확히 하였다.
마치며
내가 생각했을 때에 큼지막한 부분들을 정리해보았다. 아직 구조적으로 정리가 덜된 ECMAScript 6의 기술들이 몇개 더 있을 것으로 생각한다. JavaScript의 규격은 앞으로 계속 나올 것이며, 이에 대응하기 위해서 개발자는 꾸준하게 공부하고 신기술을 습득하려는 자세를 가져야 할 것 같다.
