What is new with ECMAScript6+ (ES6)

Dia Bhavsar
3 min readMar 12, 2021

This article covers the basic features of ECMAScript6+, for more details refer the official document here.

Lets know some basics about ES6 —

ECMA Script stands for — “European Computer Manufacturers Association”.

“ECMAScript” is a standard version of JavaScript. Earlier they had different version of a language for different browsers, to standardize it into one ECMA Script enters the room, basically to make web browser more efficient and powerful. It gives developer more flexible tool/ feature to work with. It is more like to reduce your long line of code with some simple, short, manageable code. It doesn’t change what’s we already know about JavaScript.

So whenever there is upgrade with JavaScript all the web browser follow certain guideline to support the new version, that all about ECMA. Lets talk about some awesome features we gonna use.

#Let And Const —

So earlier we only had var keyword for variable declaration, it gives “functional scope” to the variable, with new ES6 let variable provides the “block scope”.

This means that declaring let variables in a for loop, inside an if or in a plain block is not going to let that variable “escape” the block, while var is like you can access the variable before declaring it .

— First “const” is not like never gonna change variable here, The “primitive” value of the constant can not be changed but the properties of constant object, arrays can be changeable.

— “const” variable is more like “let”, only it can not be re-assigned once declared.

#Destructuring With(Array, Object, Async/Await)—

So when you have a long list of array or object and need some important properties only, instead of iterating through it all Destructuring will come very much handy.

#Arrow Functions —

This is a cool way of writing a functions. Much more simple, also the normal functions work the same way as before.

#Importing/Exporting modules —

Importing other files or modules is very common, also it is a good practice to import all your assets like images, fonts and other css files through import. When you make a production build it directly gets added to your build folder.

Exporting classes, small reusable functions, variable/const or some models is possible using export. You easily access it whenever required.

#The spread operator (…) —

I just love this (…), To expand your array, object or string it works amazing. basically merging your array with the new one you don’t have to use concat() anymore. It work pretty well with the strings also, converting string into array and all.

Easy to clone objects also merge existing data with new object.

Thank you for reading it, I hope it helps.

--

--

Dia Bhavsar

Front-end Web developer. Interested in React, Angular, Node, Typescript.