ECMAScript 6: Beginner Guide Part 1

This is the first series in the ECMAScript 6 beginner guide. In this series of talk I want to discuss and share my thoughts on the new features and code snippets that I have gone through exploring this new standard.

ECMAScript 6 also knows as ES6 and ECMAScript2015 has brought lot of new features to the language. As of June 2015 ECMAScript 6 is officially rolled out as standard. I have listed few of them in below list

  • arrow functions
  • classes and extends
  • enhanced object literals
  • template strings
  • destructuring
  • default + rest + spread
  • let + const
  • iterators + for..of
  • generators
  • modules
  • module loaders
  • map + set + weakmap + weakset
  • proxies
  • symbols
  • subclassable built-ins
  • promises
  • math + number + string + object APIs

Since sadly no browsers are fully supported the standards yet , we have to depends on the transpilers like Babel.js .

What is “Transpilers” ?

Transpiler translates ECMAScript 6 to ECMAScript 5, so that current browser is able t o understand the code for production. This allows developer to use the latest features of language without waiting browser to support these features.

What is babeljs ?

Babel.js is almost defacto tool for developers for trying and understanding the new features of the language. Babel.js developed by Australian developer Sebastian McKenzie who works for Facebook. It established itself as defacto tool as it supports almost all the new features and it generates the ES5 code fairly sensible and simple to understand. We are using Webpack for module bundler and automate the process of transpiling.

What is Webpack ?

Webpack is the one of the best tools available tool for front-end development. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS etc.

Requirement of this series

  • Fairly good understanding of the ECMAScript 5
  • Basic knowledge on HTML and CSS
  • Basic knowledge on node packaging system (npm).

Stay tuned for future series of “ECMAScript 6: Beginner Guide”, in next session we shall setup the development environment to explore the new features of the ECMAScript 6.