5 New JavaScript Features You Should Know
By: Mehdi Aoussiad
Tags: Javascript Tips, Coding, JavaScript, Web Development, Programming

5 New JavaScript Features You Should Know

Photo by JASUR JIYANBAEV on Unsplash

Introduction

JavaScript is the language that every web developer must know. It’s the queen of web development. It has improved a lot in the last few years with the new ECMAScript versions, especially ES6 that makes the development process much easier for developers. That’s why you need to be updated with these features as a JavaScript developer.

In this article, we will show you 5 new JavaScript features that you should know. Let’s get right into it.

1. JavaScript string padding

One of the new features that have been added to JavaScript is string padding. So ECMAScript 2017 added two string methods for that: padStart and padEnd .This allows you to add padding at the beginning and at the end of a string.

Have a look at the examples below:

let str = "5";

str = str.padStart(4,0);

// result is 0005

Now, let’s try to add padding at the end of a string by using padEnd .

let str = "1";

str = str.padEnd(3,0);

// result is 100

Make sure that these string padding methods have two arguments, the first one should be a number that is bigger by 1 than the number of elements you want to add. For example, if you want to add two characters at the end of a string, you have to put 3 in the first argument of the method padEnd .

2. Property descriptors

JavaScript has added a new feature Object.getOwnPropertyDescriptors() . This feature allows you to return each one of the properties on an object with the descriptors included. A descriptor is basically a meta-information that is added to a property, which defines how that property can be used.

Here is an example:

var x = { number1: 1, number2: 2};

console.log(Object.getOwnPropertyDescriptors(x)); /* Prints: { number1: {value: 1, writable: true, enumerable: true, configurable: true},

number2: {value: 2, writable: true, enumerable: true, configurable: true} } */

As you can see, this method gives you a way to get all this descriptor information for an object in a very simple way.

3. JavaScript async functions

Asynchronous functions are executed asynchronously in JavaScript. That means our code can execute multiple tasks at the same time, it doesn’t have to wait for a task to move to another.

Async functions are declared with the keyword async , and the keyword await is permitted within them.

Let’s have a look at the example below:

// async functions can be called befoe declaration.

myDisplay(); async function myDisplay() {

let myPromise = new Promise(function(myResolve, myReject) {

setTimeout(function() { myResolve("I love You !!"); }, 3000);

});

console.log(await myPromise);

} // This will come before the promise even when it is called after.

console.log("This will come before even when it is called after");

// Calling the function. //Output:

// Prints: "This will come before even when it is called after"

// Returns a fulfilled promise "I love You !!"

As you can see, the promise will come after the string, even though we call it before the string in our function. That’s because the promise needs 3000 milliseconds to be executed. The asynchronous code will not wait for it, so the string will come before the promise. Even when the function is called before the declaration, it still working because it’s an asynchronous function.

4. Object values

JavaScript has also introduced the Object.values that returns a single dimension array of the object values.

Have a look at the example below:

const person = {

firstName : "Mehdi",

lastName : "Aoussiad",

age : 19,

eyeColor : "black"

};

console.log(Object.values(person));

// Prints ["Mehdi","Aoussiad",19,"black"]

5. Object entries

The Object.entries are similar to Object.values , but returns a multi-dimension array of the object values and properties(keys).

Here is an example:

const person = {

firstName : "Mehdi",

lastName : "Aoussiad",

age : 19,

eyeColor : "black"

};

console.log(Object.entries(person));

// Prints: [["firstName", "Mehdi"],["lastName", "Aoussiad"],["age", 19],["eyeColor", "black"]]

Conclusion

As you can see, these are just some simple features that you will need to know because it helps a lot. The tools change rapidly and we need to keep learning because it never stops, especially in the tech industry.

Thank you for reading this article, I hope you found it useful.

More Reading