New JavaScript Features That Makes Front-End Development So Much Easier

Sam Chen
Sam Chen
Jan 1 · 3 min read

JavaScript is the language that every front-end developer must know. It’s the king of web development and every front-end developer must know it. It has improved a lot in the last decade with the new ECMAScript versions, especially after ES6 that makes the development process much easier for developers. That’s why today we are going to take a look at a few new features that ECMAScript has to offer.

1. 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 has been introduced to JavaScript in ES8 and it has dramatically changed the way we call API.

Async functions are declared with the keyword async , and the keyword awaitis permitted within them. Let’s have a look at the example shown in the code snippet below:

As we 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 3 seconds 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.

2. JavaScript string padding

One of the new features that have been added to JavaScript is string padding. So ES8 added two string methods for that: padStart and padEnd .This allows us to add padding at the beginning and at the end of a string. Have a look at the examples below:

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

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 that we want to add. For example, if we want to add two characters at the end of a string, we have to put 3 in the first argument of the method padEnd .

3. Property descriptors

JavaScript has added a new featureObject.getOwnPropertyDescriptors() . This feature allows us 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. The following code snippet is an example:

As we can see, this method gives us a way to get all this descriptor information for an object in a very simple way, in which can be very useful when it comes to debugging.

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 shown in code snippet below:

5. Object entries

The Object.entries are similar to Object.values, but returns a multidimensional array of the object values and properties(keys). Let us checkout this example shown in code snippet below:

Conclusion

As we can see, these are just some simple features that we can use to help us make front-end development so much easier. The tools are changing rapidly and we need to keep learning to keep up with the industry standard, and the learning will never end. Thanks for reading and have a wonderful day!

https://www.ecma-international.org/ecma-262/8.0/index.html

The Startup

Get smarter at building your thing. Join The Startup’s +745K followers.