[WIL] 2주차 → ES란?, ES5 & ES6의 차이점

2주차에는 주특기 시작하기 전에 주특기 언어에 익숙 해지기 위해서 알고리즘 문제를 풀었다.

처음에는 문제를 어떻게 접근 해야 할 지 몰라서 고민이 많았는 데 하나씩 풀어 나가다 보니 자신감이 많이 붙은 것 같다!! 다음주에도 하루에 1,2문제씩은 풀어볼 생각이다.

 

2주차 키워드에 맞춰 중요하다고 생각 되는 부분을 정리하면서 한 주를 마무리 할 예정이다!!

 

1. JavaScript의 ES란?

👉 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었습니다.

자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데,

이 두 스크립트(JavaScript, Jscript)가 너무 제각각이라, 표준이 필요하게 되었습니다.

 

표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었습니다.

 

👉 ES란 ECMA Script의 약자입니다. ES5는 ECMA Script5의 규격을 따른다고 생각하면 됩니다.

 

👉 JavaScript와 ECMA Script는

둘 다 Script라는 키워드가 불리지만, JavaSript는 언어이고, ECMA Script는 규격, 표준(스펙)을 의미합니다.

 

2. ES5/ES6 문법 차이

 

👀 ES5
ES4는 너무 급변하는 내용이 있었던지 거절되고, 그 후에 점진적인 개선을 하고자 5가 나왔습니다.

기본적으로 IE9부터 본격적으로 지원을 하지만 es5-shim을 사용하면 하위 버전에서도 특정 기능들을 지원해줍니다.

(추가된 기능)

 

👉 배열과 관련해서 새로운 메소드들이 생겼는데 대표적으로 forEach, map, filter, reduce, some, every와 같은 배열 메소드(배열함수)가 생겼습니다.

이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과가 있습니다.

 

👉 object에 대한 getter/setter 지원

 

👉 자바스크립트 strict 모드 지원(더욱 세심하게 문법 검사를 합니다.)

 

👉 JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원하게 되었습니다.)

 

👉 bind() 메소드가 생겼습니다. (this를 강제로 bind 시켜주는 메소드입니다.)

 

👀 ES6(ES 2015)

(추가된 기능)

 

👉 let, const 키워드 추가
기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였습니다. 때문에 block scope를 가진 let과 const 키워드를 추가하였습니다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제합니다.

 

👉 arrow 문법 지원(화살표 함수)

arrow 문법은 두 가지의 장점을 제공합니다.

첫 번째는 익숙하면서 편하고 간결해진 코드를 작성할 수 있습니다.

두 번째는 this를 바인딩하지 않습니다.

(this를 동적으로 바인딩 하지 않는다는 말과 같고,  arrow 문법을 쓰게 되면 this를 바인딩 하지 않고 선언된 scope의 this를 가리킨다는 장점이 있습니다.)
https://velog.io/@parksj3205/2019-08-30-1208-%EC%9E%91%EC%84%B1%EB%90%A8

ES6 문법 맛보기 - 화살표 함수(arrow function)

 

👉 iterator / generator 추가

 

👉 module import / export 추가

 

👉 Promise 도입 ( Callback Hell을 해결해 줄 기법이 추가 되었습니다.)

 

👉 Default, Rest 파라미터

 

👉 해체 할당, Spread 연산자

 

👉 템플릿 리터럴(템플릿 문자열)

https://www.zerocho.com/category/ECMAScript/post/5759b3a732522e883c6f6ddb

(ECMAScript) ES2015(ES6) 템플릿 문자열(template string)

 

👉 호이스팅이 사라진 것 같은 효과

 

👉 함수 단위 스코프에서 블록 단위 스코프로 변경

(ES5에서는 함수 안에서만 지역변수를 생성 할 수 있었는 데 ES6부터는 if문, for문 등 블록({}) 안에서도 지역 함수를 생성 할 수 있게 되었습니다.

 

https://usefultoknow.tistory.com/m/entry/ECMA-SCript%EB%9E%80-ES%EB%9E%80

ECMA SCript?란? (ES란?)