es5와 es6

es의 역사를 알아보자! 아 재밌겠다!

자바스크립트의 탄생 -> 브라우저 대전 -> 표준화 필요성의 대두 -> es5 -> es6

위의 순서대로 es에 대해 알아보고자 한다. 흐름을 기억하면 이해가 쉬워지기 때문이다.(개인적으로는 그렇다..)

자바스크립트가 태어났다!

넷스케이프에서 일하던 브랜든 아이크에 의해 무려 10일 만에 탄생한 언어이다. 최초의 자바스크립트의 이름은 Mocha, 이후엔 LiveScript 그리고 JavaScript가 되었다고한다. 여기서 Java와 JavaScript의 상관관계가 나타난다. 두 언어는 서로 아무 관련이 없지만 Java의 인기를 등에 업으려고 마케팅 수단으로 JavaScript로 이름이 붙여졌다고 한다.
(아... 드디어 Java와 JavaScript가 무슨 사이인지 알게 되었다.)

브라우저 대전..!(어차피 우승은 구글)

1차전(다윗 vs 골리앗)

1) 넷스케이프는 JavaScript와 CSS를 개발하여 선풍적인 인기를 얻게 되었다.
2) 이에 MS가 J스크립트라는 언어를 개발하여 JavaScript에 대항했다.
3) 기술은 넷스케이프가 이기고 있었지만, MS가 윈도우에 IE를 기본으로 넣으면서 점유율을 높여갔다.
4) 결국 넷스케이프는 망했고 이에 대항하기 위해 남은 개발자가 모질라 재단을 설립한다.

결론 : 넷스케이프 vs MS => MS 승!

2차전 (복수혈전? 아니.. 메시 등장)

1) 분노에 찬 모질라 재단이 파이어폭스를 만들게 되면서, IE와의 경쟁을 이어갔다.
2) 그러다 구글이 크롬을 만들게 됩니다. 크롬은 V8 JavaScript 엔진을 개발해 엄청난 성능을 보여주며 점유율 1위에 달성한다.

표준화 필요성의 대두(제발 그만해 이러다 다 죽어..)

넷스케이프는 JavaScript를, MS는 J스크립트를 만들었다. 각 브라우저마다 서로 다른 언어를 사용했기 때문에 제대로 호환이 되지 않아 같은 코드여도 제대로된 동작을 하지 않았다.
너무나도 당연하게, 표준화의 필요성이 커졌고 넷스케이프가 Ecma international에 표준화를 요청합니다.
(Ecma international은 C++, 파일구조, json 등 다양한 표준을 제정하는 기구라고 합니다.)

es5와 es6

es5

es5는 JavaScript가 표준화 된 이후, 새로운 언어 기능이 추가된 업데이트이다.

주요 기능들은 다음과 같다.

• use strict 모드
• map, filter, forEach, reduce, indexOf 등
• Json.parse, stringfy 등
• Date.now 등
  (더 추가된 기능들이 엄청 많긴하다..)

es6

es13까지 나와 있는 현재, 아직까지도 왜 es6를 중요한 업데이트라고 보는 것일까?
2009년에 표준화된 es5가 나온 이후에 새로운 언어기능이 포함된 업데이트였기 때문이다. 그래서 아직까지도 es5와 es6에 대해서 많이 회자되고 있는 것이다.

그래서 어떤 점들이 달라졌다는 걸까?

const와 let
변수 var의 단점을 극복하기 위해 const와 let이 탄생했다.
var와 다른 점은 재선언, 재할당, 유효범위이 두드러진다.

Arrow function(화살표 함수)
조금 더 간단하고, 쉽게 표현이 가능한 화살표 함수가 생겨났다. 더욱 간단하고 쉽게 쓸 수 있었지만 몇 가지 단점이 존재한다.

• 생성자(Constuctor)를 사용할 수 없다.
• this, super가 없다.
• 익명함수로만 만들 수 있다.
• new 사용이 어렵다. => this를 사용할 수 없기 때문.

템플릿 리터럴
+를 통해 문자열을 연결해왔지만, 이제 템플릿 리터럴인 백틱을 사용하여 문자열과 변수를 표현할 수 있게 되었다.

Class
class 키워드를 통해 JavaScript에서 객체를 생성할 수 있는 클래스 선언이 가능해졌다. 이에 따라, constructor 메서드로 생성자를 정의하고, this로 인스턴스에 접근하고 new키워드로 인스턴스 객체 생성이 가능해졌다.

Promise
비동기 함수를 호출했을 때, 동기 함수처럼 사용할 수 있는 JavaScript 객체이다.

Promise는 pending, fulfilled, rejected 중 하나의 상태를 가진다.

• pending : 비동기 요청에 대한 응답을 대기하는 상태
• fulfilled : 응답이 왔을 때, 성공하면 fulfilled
• rejected : 실패하면, rejected

pending 때, fulfilled 상태가 되면 then 메서드의 인자로 전달된 함수를 호출한다.
pending 때, rejected 상태가 되면 catch의 메서드의 인자로 전달된 함수를 호출한다.

구조 분해 할당
배열이나 객체의 속성을 해체해, 변수에 할당하는 표현식이다.

const num = [1,2,3,4,5];

let [a,b,c,d,e] = num;
console.log(a); // 1

const obj = {
	name : "하이",
  	age : 10
};

let {name : a, age : b } = obj;
console.log(a, b); // 하이 10

Spread Syntax
배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다고 하는데, 말이 참 어렵다..

let a = [1,2,3];
let b = [...a,4,5,6];
console.log(b) // [1,2,3,4,5,6]

let a = "hello"
let b = [...a];
console.log(b) // ["h","e","l","l","o"]

그 외에도 많은 문법이나 언어 기능이 추가된 것들이 많다..

정리

es5와 es6를 비교했을 때 달라진 점은 무엇인가요?

1. const와 let
2. 화살표 함수
3. 템플릿 리터럴
4. class
5. promise
6. 구조 분해 할당
7. spread 연산자 등이 있습니다!