이 코드랩은 DevFest WebTech 2019 이벤트를 위해 만들어졌습니다. 해마다 조금씩 변화하고 있는 JavaScript의 새로운 명세를 알아보고 실제로 어떻게 사용 및 활용할 수 있을지 함께 알아봅시다!
이 CodeLab은 아래와 같은 순서로 진행됩니다.
각 세션은 독립적으로 이루어지니 꼭 순서대로 듣지 않으셔도 되고, 원하는 것만 들으셔도 무방합니다.
현재 우리가 쓰고있는 JavaScript는 정보와 통신 시스템을 위해 존재하는 국제 표준화 기구 Ecma International의 ECMA-262 기술 규격에 정의 및 표준화된 ECMAScript와 BOM(Browser Object Model) 그리고 DOM(Document Object Model) 이 세 가지로 이루어져 있어요. 이 중 ECMAScript는 JavaScript의 표준 규격을 담당하고 2015년부터 약 1년을 주기로 명세가 새롭게 추가 및 수정되면서 업데이트 되고있어요.
ES6부터 현재 2019년도에 나온 ES10까지 ECMAScript의 버전 중 ES6에서 가장 많은 변화가 생겼어요. 약 20개 이상의 명세가 추가되었는데 그 중 대표적인 변화를 알아보고 프로덕트에서 유용하게 사용할 수 있는 것들을 직접 활용해 봅시다.
→ 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')
참고하면 좋은 문서