[WIL | 항해99] 2주차- ECMAScript가 뭔가요(ES3 ~ ES8 추가 기능 설명)

🍕ECMAScript가 뭔가요?

ECMAScript는 말 그대로 Ecma라는 기관이 만든 script언어이며, ECMA-262표준을 따르고 있다. 

좀 더 엄밀히 따지자면 JS는 언어이고, ECMA 스크립트는 규격, 표준, 스펙을 말한다. 

*ECMA(European Computer Manufactures Association)

ECMA internatinal은 정보통신기술(ICT), 전자제품(CE)를 위한 국제 표준 기구이다. ECMAScript의 언어 규격인 ECMA-262외에 C#, C++, Dart, JSON 등 여러 시스템을 위한 표준을 책임지고 있다.

ECMA-262는 규격이며, ECMAScript는 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름이다.

ECMAScript는 엄연히 프로그래밍 언어이며, 'ES6 표준을 따른다' 라는 말은 ECMAScript 2015가 사용중인 ECMA 규격을 따른다는 말이다. 

• ECMA-262 : ECMASCript 언어 규격(흔히 자바스크립트로 불림)

 

🍕ECMAScript의 버전?

ES5, ES6 ES2020등은 ECMAScript가 배포된 버전이다. 2015년 이후 매년 새로운 버전이 배포되고 있다.

5판까지는 ECMAScript 5(=ES5)라는 명칭을 사용했지만, 6판부터는 빠른 배포주기를 반영하기 위해 숫자 대신 연도를 붙여 ECMAScript 2015(=ES6) 같은 명칭을 사용한다.

 

Q. 최신 버전은 IE에 호환되지 않는다는데 그러면 ES6 이상 버전은 못 쓰는 거 아닌가요?

A. 트랜스파일러인 바벨(Babel)을 사용하면 가능합니다. 그러니 ES6이상의 최신 문법도 배워야 합니다.

추가설명: ES6 표준 문법은 IE에서 지원되지 않지만, 트랜스파일러(Babel)를 이용해서 하위 문법을 따르는 코드로 쉽게 변경할 수 있기 때문에 호환성 문제도 없다. (프로젝트의 지원 대상 브라우저가 IE11 이하 버전을 포함하고 있다면 그때는 우리의 무기 바벨을 사용할 때이다. 프로젝트의 코드베이스는 ES6로 가독성 있고 간결하게 유지하고 실제로 브라우저에서 사용하는 코드들은 바벨로 트랜스파일 된 ES5 코드를 사용하는 것이다.

바벨(Babel)은 자바스크립트 컴파일러이다. Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다. 출처: 바벨 공홈

 

🍕버전별로 알아보기 

버전 별로 간단히 설명하자면 아래와 같다.

 

🌚ES3(1999)

우리가 흔히 아는 JS이다. 함수 단위의 스코프, 호이스팅, 모듈화 미지원, 프로토타입, 클로저 등등 자바스크립트의 기본적인 특징들이 들어있다.

 

(ES4는 거절되고, 바로 ES5가 나왔음) 

🌚ES5(2009)

 

1. 배열과 관련해서 새로운 메소드들이 생겼다. 대표적으로 forEach, map, filter, reduce, some, every 와 같은 메소드가 생겼다. 이 메소드들은 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과가 있음
2. object에 대한 getter/setter 지원
3. 자바스크립트 strict 모드 지원(세심한 문법 검사를 제공)
4. JSON 지원(과거 XML을 사용하다가, json이 뜨면서 지원하게 됐다.)
5. bind() 메소드가 생겼다. (this를 강제로 bind 시켜주는 메소드)

🌚ES 2015(ES6)

• 원래는 ES6였는데 사람들이 2016년도에 나온걸로 헷갈려해서 ES2015로 변경했다고 함 

추가된 기능은 아래와 같다. 

1. let, const 키워드 추가
   • 함수 scope를 가진 var키워드 대신 block scope를 가진 let과 const 키워드를 추가했다. 상수형 키워드가 없어 전부 대문자로 변수를 표현했다면 ES6부터 const를 사용하면 됩니다. 
2. arrow 문법 지원 
   • arrow 문법은 두 가지 장점을 제공 1) 코드의 간결함 2) this를 동적으로 바인딩하지 않음(다르게 말하면, this는 해당 scope의 this와 같다.)
   • 장점 2번 추가설명:  arrow문법을 쓰게 되면 this를 바인딩하지 않고 선언된 scope의 this를 가리킨다는 장점
3. iterator / generator 추가
4. module import /export 추가 
5. Promise 도입(Callback Hell을 해결해줄 기법이 추가됐다!)
6. Default, Rest 파라미터
7. 해체 할당, Spread 연산자(...) 
8. 템플릿 리터럴 ` ` 
9. 호이스팅이 사라진 것 같은 효과
10. 함수 단위 스코프에서 블록 단위 스코프로 변경

🌚ES7 

1. 거듭 제곱 ** 
2. 포함여부를 판별하는 Array.includes( ) // true, false 반환  

 

🌚ECMA 2018(ES8)

대표적으로 어싱크 어웨잇 추가

1. async - await (ES6의 Promise처럼 Callback Hell을 해결하기 위해 등장 뿐만아니라 좀 더 직관적이고 단순하게 코드를 만들 수 있다.)

• 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 
• 자세한 내용은 https://joshua1988.github.io/web-development/javascript/js-async-await/ 의 주소를 참고하여 공부하자
• 프로미스(Promise)를 사용하는 객체에게 동기화를 통하여 기다리게 할 수 있습니다.
• async는 기다려야하는 함수에게 붙여주며, await는 프로미스(Promise)가 실행되는 구간에 붙여줍니다.
• 이러한 방법은 콜백 지옥, then 지옥에서 벗어나게 해 주지만 async를 통해 기능이 정체되므로 사용시에 성능에 대해 반드시 고려를 해야 합니다.

function endAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('끝~');
    }, 2000);
  });
}

async function waitPromiseFunction() {
  console.log('시작했습니다.');
  var result = await endAfter2Seconds();
  console.log('기다려준 상태로 끝났습니다 : ', result);
}

waitPromiseFunction();

 

2. String.padStart() , padEnd() 문자 앞 뒤 간격을 조절 할 수 있음

//앞으로 10칸
console.log("hello".padStart(10)) // "          hello"

//뒤로 10칸
console.log("hello".padEnd(10)) // "hello          "

3. Key와 value로 되어있는 객체(json형식)에 대해서 손쉬운 반복문이 가능하다.

let datas = {
  data1 : "데이터1",
  data2 : "데이터2",
  data3 : "데이터3",
};


//#1. key와 인덱스를 통한 출력
Object.keys(datas).forEach((key, index) => {
  console.log(key, datas[key]);
});

//#2. 데이터만 출력
Object.values(datas).forEach((value) => {
  console.log(value);
});

//#3. 객체를 배열로 변환(key가 0번째, 데이터가1번째 순서로)
Object.entries(datas).forEach((value) => {
  console.log(value);
});

---

참고 사이트:

https://lts0606.tistory.com/466

ES7, ES8 기능 정리(ECMAScript 7, ECMAScript 8)

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

ECMA SCript?란? (ES란?)

https://sumini.dev/til/006-ecmascript/

ECMAScript란? 개념부터 디테일까지