이 코드랩은 DevFest WebTech 2019 이벤트를 위해 만들어졌습니다. 해마다 조금씩 변화하고 있는 JavaScript의 새로운 명세를 알아보고 실제로 어떻게 사용 및 활용할 수 있을지 함께 알아봅시다!

CodeLab 과정

이 CodeLab은 아래와 같은 순서로 진행됩니다.

  1. ES6와 ES7에 대해서 알아보기
  2. ES8, ES9, ES10에 대해서 알아보기
  3. ES6~10을 활용해 간단한 검색 기능 만들어보기 feat. RxJS(option)

각 세션은 독립적으로 이루어지니 꼭 순서대로 듣지 않으셔도 되고, 원하는 것만 들으셔도 무방합니다.

ECMAScript?

현재 우리가 쓰고있는 JavaScript는 정보와 통신 시스템을 위해 존재하는 국제 표준화 기구 Ecma International의 ECMA-262 기술 규격에 정의 및 표준화된 ECMAScript와 BOM(Browser Object Model) 그리고 DOM(Document Object Model) 이 세 가지로 이루어져 있어요. 이 중 ECMAScript는 JavaScript의 표준 규격을 담당하고 2015년부터 약 1년을 주기로 명세가 새롭게 추가 및 수정되면서 업데이트 되고있어요.

ES6 & ES7에서 무엇이 달라졌나요?

ES6부터 현재 2019년도에 나온 ES10까지 ECMAScript의 버전 중 ES6에서 가장 많은 변화가 생겼어요. 약 20개 이상의 명세가 추가되었는데 그 중 대표적인 변화를 알아보고 프로덕트에서 유용하게 사용할 수 있는 것들을 직접 활용해 봅시다.

ES6 → http://www.ecma-international.org/ecma-262/6.0/

Arrow functions / Arrow function expressions

→ Regular function 대신 사용할 수 있는 문법적으로 간소화된 함수

→ 주의할 점: 이 Arrow function은 regular function 과 동일한 방식으로 this, arguments, super, new.target keyword에 대한 바인딩이 되지 않습니다.

// 두 함수의 생김새

// Regular Function
function generalFunction(a, b) {
  // ...
}

// Arrow Function
const arrowFunction = (a, b) => {
  // ...
}

어떻게 활용할 수 있나요?

const cats = ['ebony', 'ivory', 'harmony', 'rhythm']

// Statement body
cats.forEach((cat) => {
  console.log(cat)
  registerCat(cat)
})

// Expression body
const wrappedCats = cats.map((catName, index) => ({catName, age: index}))
const olderCats = wrappedCats.filter((cat) => cat.age > 1)
const catHarmony = olderCats.find((cat) => cat.catName === 'harmony')

참고하면 좋은 문서