What’s new in ES2017 (ES8)

Hey guys! 👋

A year passed and JavaScript team announced just another version of our favourite language, this time called ES2017 or ES8.

It is packed with a bunch of yummy stuff 😋, so let’s get right to it!

Photo by Alex Kotliarskyi on Unsplash

This year’s version brings better way of handling objects, strings and an update for functions that you’re gonna absolutely loove 😍.

Table of contents:

  1. {object} updates
  2. “string” updates
  3. function() updates

1. Object updates

1.1 Object.values()

Do you recall doing this?

Example #1:

const values = [];
const countries = {AU: "Austria", BE: "Belgium", US: "United States"};

Object.keys(countries).forEach(key => {
    values.push(countries[key]);
});

console.log(values); // => prints ["Austria", "Belgium", "United States"];

Well, with the new update, you’re gonna call just this one method and it’s done!

The new object method is .values() that will give you a possibility of accessing all of the object’s values in an array as shown in the example below.

Example #2:

const countries = {AU: "Austria", BE: "Belgium", US: "United States"};

const values = Object.values(countries);

console.log(values); // => prints ["Austria", "Belgium", "United States"];

…easy peasy lemon squeasy, right? 😎

1.2 Object.entries()

Very similar to the first update with aforementioned update, the .enteries() will give you a possibility of transforming an object into array with the key as a [0] item and the value as a [1] in the result array.

const countries = {AU: "Austria", BE: "Belgium", US: "United States"};

const entries = Object.entries(countries);

console.log(entries); // => prints [["AU", "Austria"], ["BE", "Belgium"], ["US", "United States"]];

2. String updates

These two functions are going to make your life sooo easier! Have a look!

2.1 .padStart()

So, you need a “two characters long” string, but you’ve got only 1 character, what do you do? You concatenate the two string, well, if you’re working for example with time in JavaScript, you know the pain it brings.

Consider the following example:

let hours = "8";
let minutes = "5";

if(parseInt(minutes) < 10) {
    minutes = `0${minutes}`;
}

const time = `${hours}:${minutes}`;

Who wants to do that like million times when coding, so string padding will allow you to just call a single method and it will be solved for you!

Look at the example below:

const hours = "8";
const minutes = "5".padStart(2, 0);

const time = `${hours}:${minutes}`;

Right? Riiiiight? Riiiiiight? 😆

2.2 .padEnd()

The same as with .padStart() applies to .padEnd() and it will padd the string not from its beginning, but from it’s end.

Example #1:

const price = "10,9";
const formattedPrice = hours.padEnd(5, 0);

console.log(formattedPrice); // => prints 10,90

3. Function updates

3.1 async/await

The first and foremost, you’re gonna absolutely looove this one!

Have you ever need to use setTimeout to accomplish some kind asynchronous operation? Did you create a callback hell with jQuery.ajax() or “promise” hell for that matter?

Well, JavaScript in my opinion got a very powerful weapon, but consider the following example:

$.ajax("/path", {data: formData}).done(doneHandler).fail(failHandler);

//or promises

const promise = new Promise((resolve, reject) => {});
promise.then(successHandler);
promise.then(successHandler2);
promise.catch(failHandler);

Example #2:

In JavaScript, it was impossible to do just the following:

const response = $.ajax("/endpoint");

if(response.status === true) {
    //do the stuff
}

Well, it kind of was. You could have done a synchronous XMLHttpRequest call, but during the execution while the browser waits for the response, a user was unable to interact with the website 😂 .

Anyways, what was impossible to be done up until now, will be possible and I personally think, this is going to be one of the most important JavaScript updates of all time, consider the following example:

Example #3:

const doHttpGetRequest = async (path, params) => {
   //use some js library, e.g. $.get();

    return new Promise((resolve, reject) => {
        $.get(path, params).done(response => {
            resolve(response);
        }).fail(() => {
            reject();
        });
    });
};

const response = await doHttpGetRequest("/ajax/getArticle", {
    id: 10,
    fields: ["title", "body"]
});

Right? Riiiiight? Riiiiiight? 😆

Wrapping up

So, what do you think? Looking forward to the updates or being conservative? Me personally can’t wait to use async/await to improve code reliability and also removing really useless bunch of code from the codebase (from various promises and so )

Also, this is one of the many signs JavaScript’s embarked on some interesting journey. I mean ES2015 and ES2016 were really breakthroughs of what happened in JavaScript in the past couple of years and I can’t wait, what’s coming next!

If you’d like to check out the older updates of JavaScript, you can find them in our archive page.

And also if you liked this article, don’t forget to share it with people you like (or maybe also people you don’t like, maybe you’ll became friends! 😆 ).

I will be doing more articles like this in the future and if you want to get notified about them and everything else I release, subscribe to my newsletter right here.

Anyways, thanks for reading and I’ll see you in the next article! 🤓

Yours in coding,

Ivan