항해99 2주차 Weekly I Learn ( ES, ES5 vs ES6 )

2week KeyWord

 

JavaScript의 ES란?

1) ES의 탄생 배경

 브라우저의 전쟁 시절 개발자들은 치열한 경쟁의 시대에 살았다.

넷 스케이프 사의 자바스크립트를 이어 MS사에서도 IE 3에 JScript 라는 이름으로 자바스크립트를 탑재하였다. 자사의 웹브라우저 사용자를 늘리기 위해 서로 기능을 넣어가다보니 JavaScript와 JScript는  시간이 지날 수록 달라지는 경향을 보였다. 이러한 깊은 대립 상황으로 European Computer Manufactures Association (ECMA, 현 ECMA International) 에서는 이러한 자바스크립트에 대한 표준을 내리게 된다. 또한 ECMA에서는 자바스크립트의 표준 및 다른 표준안도 정하기에 구분을 위해 262라는 숫자를 붙였고 ECMA262 는 자바스크립트 표준 규격이라고 할 수 있다.

2) ES

 ES란 JavaScript라는 언어의 규격, 표준 즉 스펙이다.

 IE8에서는 ES3 스펙을 준수하고, IE9에스는 ES5 스펙을 준수한 것이다. JS는 사실 10일이라는 짧은 기간에 만들어진 언어기 때문에 지속적으로 버전이 업그레이드가 필요했고 기능이 늘면서 ES3(1999), ES5(2009), ES6(2015)가 생겨났다. 현재 2019년 12월 기준으로 ES10까지 나와있기때문에 ES6이 최신 규격이라고는 할 수 없다. 그렇다면 왜 지금은 ES6인가? ES5 / ES6의 차이를 알아보자!

 

ES5 / ES6 문법 차이

1) 왜 ES6인가?

1	1997/6		초판
2	1998/6		ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경.
3	1999/12		강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등.
4	버려짐		4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.
5	2009/12		더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.[3]
5.1	2011/6		ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.
6	2015/6	ES2015	6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 "ECMAScript Harmony" 혹은 "ES6 Harmony" 등으로 불리기도 한다.
7	2016/6	ES2016	제곱연산자 추가, Array.prototype.includes
8	2017/ 6	ES2017	함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.
9	2018/6	ES2018	Promise.finally, Async iteration, object rest/spread property 등.
10	2019/6	ES2019	Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.

 먼저 ES6은 ES5 이하 내용에서 문제가 되었던 부분들이 해결되었고, 많은 기능들이 추가되었다. 이는 가독성과 유지보수성 향상으로 이어졌고, React 나 Vue 등 유명 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었다. 

 이러한 이유로 우리는 ES5에서 ES6으로, ES6에 주목하고 관심을 갖게 되었다.

2) ES5와 ES6의 문법에서의 차이는?

1. let, const 키워드 추가

- 기존의 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했고, 이 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가 되었다.

 

2. Arrow function 추가

- 화살표 함수라고 하는 함수를 간결하게 나타낼 수 있는 표기를 만들었다. 가독성 및 유지 보수성이 올랐고, 화살표 함수에선 매개변수가 하나일 때 () 괄호 생략 가능, {} 소괄호 및 return 도 생략 가능하다.

// ES5
function sum (a, b) {
			return a+b;
            }
            
            
// ES6
const sum = (a, b) => a+b;

 

3. Default parameter 추가

- 기존에 함수의 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6 이후 default parameter가 추가되었다.

 

4. Template literal 추가

- ES6 이전 문자열 관리는 불편했는데 이 기능의 추가로 간편해졌다.

- 사용법은 ` ` (백틱) 이다. ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식을 삽입 가능하다.

- 공백을 사용하는 불편함도 사라졌다.

// ES5
var firstName = 'Kim'
var lastName = 'Jeff'
var is = 'My name is' + firstName + ' ' + lastName + '.'

// My Name is Kim Jeff.


// ES6
const MyName = 'My name is ${firstName} ${lastName}.'
console.log(myName);

// My Name is Kim Jeff.


// ES5 공백의 불편함
console.log("제" + " " + "블로그에" + " " + "방문해주셔서" + " " + "감사합니다")

// ES6 공백도 있는 그대로 인식!
console.log("제 블로그에 방문해 주셔서 감사합니다")

 

5. Multi-line string

- 문자열이 라인을 넘어가게 되면 관리가 불편했다. 

- 백틱을 사용하게 되면 여러 라인의 문자열도 문제가 없다.

 

6. Class (클래스)

- 객체 생성 방식 중 하나로 자바스크립트는 프로토 타입 기반의 객체 지향 프로그래밍이다.

- 생성자 함수와 동작하지 않으며, 클래스가 엄격하여 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작하게 된다.

 

7. 모듈

- 모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드들이다.

 

8. 디스트럭처링 할당

- 디스트럭처링이란, 비구조화, 파괴를 뜻하는 단어로 크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것이다.

 

9. 프로미스

- 비동기통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용했다. 결과론적으로 콜백헬을 발생시켰고, 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 되었다.

 

10. string 메서드(includes, startsWith, endWith)

- 문자열 메서드가 추가되었다. 포함되어 있는지(includes) 시작되는지(startsWith) 끝나는지(endWith)

true / false 값을 리턴하며 문자열 메서드들로 검사 로직을 수행할 수 있다. (ex. 이메일에 포함되는지, 김 씨로 시작하는지, 끝나는 지 등)