The Most Useful Features in the Latest Javascript (Since ES6)

22 July 2019 by Anna Danilec

In June 2015, after six years of break, there was a significant update of Javascript which brought lots of new features. Since that time every year we a new edition with a set of new features which are supposed to help developers and make our work more efficient. To help you keep track on what is going on with Javascript versions, I’m going to list the most useful features grouped by the edition and add some code examples for a better overview.

ES6 (ECMAScript 2015)

1. Arrow functions (=>)

// traditional function expression var numbers = [ 2 , 6 , 40 ]; var twiceNum = numbers . map ( function ( number ) { return number * 2 }) // arrow functional var numbers = [ 2 , 6 , 40 ]; var twiceNum = numbers . map (( number ) => number * 2 ); // lexical this var greenBtn = document . getElementById ( ‘ greenBtn ’ ); greenButton . addEventListener ( ‘ click ’ , function () { this . style . backgroundColor = “ red ” ; // no more binding })

2. Classes

// Class class Person { constructor ( firstName , lastName , age ) { this . firstName = firstName ; this . lastName = lastName ; this . age = age ; } sayHi () { return ‘ Hi , my name is $ { firstName }. Nice to meet you . ’ ; } }

3. Template strings

var name = ‘ Peter ’ , city = ‘ London ’ ; // Before ES6 var greeting = "Hello, my name is " + name + ". I am from " + city + "." ; // After ES6 var greeting = ‘ Hello , my name is $ { name }. I ’ m from $ { city }. ‘

Smart and easy, right?

4. Let and Const

// Let — variable is available only in the block of code function calculate ( x ) { var y = 0 ; if ( x > 10 ) { // let y is only available in this block of code let y = 30 ; return y ; } return y ; }

5. Promises

const checkResult = () => new Promise ( resolve , reject ) => { setTimeout ( resolve , 500 )} checkResult () . then (( result ) => { console . log ( result ); }) . catch (( error ) => { console . log ( error ); })

ES7 (ECMAScript 2016)

1. Array.prototype.includes

var fruits = [ 'banana' , 'apple' , 'grape' , 'nut' , 'orange' ]; var favoriteFruit = 'banana' ; // Before ES7 function isFruit ( fruit ) { if ( fruits . indexOf ( fruit ) !== - 1 ) { return true ; } else { return false ; } } isFruit ( favoriteFruit ); // returns true // After ES7 fruits . includes ( favoriteFruit ); // returns true

2. Exponentiation Operator

// Before ES7 (loop case) function calculate ( num , exponent ) { var res = 1 ; for ( var i = 0 ; i < exponent ; i ++ ) { res *= num ; } return res ; } // After ES7 const calculate = ( num , exponent ) => num ** exponent ;

Easy, right?

ES8 (ECMAScript 2017)

1. Object.values() and Object.entries()

var person = { name : ‘ Jenny ’ , age : 24 , country : ‘ UK ’ , city : ‘ London ’ , } // Object.values() var arrJenny = Object . values ( person ); // returns [‘Jenny’, 24, ‘UK’, ‘London’]; // Object.entries() var arrJennyEntries = Object . entries ( person ); // returns [[‘name’, ‘Jenny’], [‘age’, 24], [‘country’, ‘UK’], [‘city’, ‘London’]];

2. String.prototype.padEnd() and String.prototype.padStart()

var string = ‘ Alice ’ ; // padStart() — we assume our string needs to have 10 characters string . padStart ( 10 , ‘ o ’ ); // returns ‘oooooAlice’ // padEnd() string . padEnd ( 10 , ‘ o ’ ); // returns ‘Aliceooooo’;

3. Async function (async/await)

function delayResult () { return new Promise ( resolve => { setTimeout (() => { resolve ( ‘ Done ’ ); }, 5000 ) }) } async function getResult () { var result = await delayResult (); return result ; } getResult ();

ES9 (ECMAScript 2018)

1. Asynchronous iteration

for await ( let book of books ) { console . log ( book ) };

2. Rest operator

const fruits = { orange : 1 , apple : 10 , banana : 4 , } const { orange , … rest } = fruits ; console . log ( rest ); // { apple: 10, banana: 4 }; // in the function function getFruits ( apple , … rest ) { return rest . banana ; }

3. Promise.prototype.finally

const checkResult = () => new Promise ( resolve , reject ) => { setTimeout ( resolve , 500 )} checkResult () . then (( result ) => { console . log ( result ); }) . catch (( error ) => { console . log ( error ); }) . finally (() => { console . log ( ‘ Promise finished ! ’ ) })

Conclusion

We went through the most useful, not every, updates of Javascript since ES6 in 2015. There are a lot of changes you may not know until today. Remember, that it’s very important to use it to make your programming knowledge updated and your code smarter, shorter, and cleaner. Also, join Javascript Course to master your knowledge.

Thank you for reading, Anna from Duomly

Related readings 📖

How to pass the machine learning interview?

What do you need to learn to become a front-end developer?

20 Essential Python Tips and Tricks You Should Know