티스토리 뷰

✔️ ES (ECMA Script) :  Javascript의 표준 규격

- JavaScript의 탄생과 표준이 정해지다-

JavaScript는 1990년대 Netscape사의 브렌던 아이크(Brendan Eich)에 의해 최초 개발.
선풍적인 인기를 끌기 시작하자 Microsoft사에서도 IE3(인터넷 익스플로러3)에 JScript라는 이름으로 JavaScript를 탑재.

그러나 둘의 내용이 매우 달라서 같은 기능을 구현해도 개발자들이 해야할 일과 시간이 훨씬 늘어나게 됨.
서로 사용자를 늘이기 위해 여러 기능을 추가해 Javascript와 JScript는 갈수록 다른 경향을 보였고, 

결국 European Computer Manufacturers Association (ECMA, 현 ECMA International)에서 Javascript에 대한 표준을 정하게 됨. (Ecma International은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구)

- ECMAScript

ECMAScript는 Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어. 스크립트 언어가 준수해야 하는 규칙, 세부 사항 지침을 제공함. ECMA에서는 JavaScript의 표준 뿐만 아니라 다른 표준안도 정하기 때문에, 구분하기 위해 숫자를 붙였고 이것이 262. 즉, ECMA 262는 자바스크립트의 표준 규격.

like Ecm 인터내셔널 = 국립국어원, ECMA-262 = 표준어, ECMAScript = 맞춤법

- ECMAScript 와 JavaScript의 관계

JavaScript는 1996년에 만들어졌고, JavaScript의 표준화를 위해 1997년에 ECMAScript가 만들어졌음. 당시 기준에서 JavaScript는 ECMAScript 사양을 따르고 있었기 때문에, JavaScript는 ECMAScript 사양을 준수하고 있던 언어의 예시였다.

, ECMAScript JavaScript 기반으로 하는 동시에, JavaScript 역시 ECMAScript 기반으로 한다

✔️ ES5/ES6 문법 차이

- ES5(2009)

1. 배열 관련 새로운 메소드들 탄생

: forEach, map, filter, reduce, some, every 등

 

2. object에 대한 getter/setter 지원

: accessor property(접근자 프로퍼티) 'getter(획득자)' ‘setter(설정자)’ 메서드로 표현됨. 객체 리터럴 안에서 getter setter 메서드는 get set으로 나타낼 있다.

let obj = {
 get propName() {
   // getter, obj.propName을 실행할 때 실행되는 코드
 },

 set propName(value) {
   // setter, obj.propNAme = value를 실행할 때 실행되는 코드
 }
};

getter 메서드는 obj.propName을 사용해 프로퍼티를 읽을 때 실행됨

setter 메서드는 obj.propNAme = value으로 프로퍼티에 값을 할당 실행됨

 

3. Javascript strict 모드

 

4. json(JavaScript Object Notation) 지원

It is an open standard format that uses human-readable text to convey data objects consisting of attribute–value pairs, array data types, or any other serializable value or "key-value pairs".

5. bind( )

: this를 강제로 bind 시켜주는 메소드. Functions provide a built-in method bind that allows to fix this.

- ES6 (ES 2015)

1. hoisting 개선.
: 기존에는 var키워드를 사용하면 호이스팅이 빈번하게 일어났는데, 이를 방지하기 위해 블록 스코프를 가진 let, const 키워드 추가.

 

2. Arrow function 추가
: this 바인딩 하지 않고, 선언된 scope this 가리킴.

 

3. iterator / generator 추가

Iterator 메소드에는 hasNext(), next(), remove()가 있다.

generator 메소드에는 next(), return(), thorw()가 있다.

 

4. module import / export 추가

- export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다(모듈 내보내기).

- import 지시자를 사용하면 외부 모듈의 기능을 가져올 있습니다(모듈 가져오기).

Module 특수한 키워드나 기능과 함께 사용되므로 <script type="module"> 같은 속성을 설정해 해당 스크립트가 모듈이란 브라우저가 있게 해줘야 합니다.

 

5. Promise 도입
: JavaScript 비동기적 언어로, Callback Hell 해결해 기법.

비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 있음.

But 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스) 반환

*Callback Hell

: JavaScript 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

 

6. Default, Rest 파라미터

Default Parameter value

함수를 호출할 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지는 않는다. 함수는 매개변수의 개수와 인수의 개수를 체크하지 않는다. 인수가 부족한 경우, 매개변수의 값은 undefined이다.

Rest Parameter

이름 앞에 세개의  ... 붙여서 정의한 매개변수. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

 

7. 해체 할당, Spread 연산자

spread 연산자는 특정 객체 또는 배열의 값을 다른객체나 배열로 복제하거나 옮길때 사용.

React에서는 state 특정부분만 변화시키거나최초의 상태를 유지하며 데이터를 추가하는 등의 경우.

 

8. Template literals
내장된 표현식을 허용하는 문자열 리터럴. String interpolation ${변수명} 형식 문장에서 변수에 할당된 값이 들어가 출력됨

// es5
var first = 'hong'
var last = 'gildong'
var name = 'My name is ' + first + ' ' + last + '.'
// My name is hong gildong.

// es6
const name = `My name is ${first} ${last}.`
// My name is hong gildong.

 

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

기존의 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했다.

이런 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가되었다.