JavaScript ES6: Even more new abstractions to improve your code

August 02, 2018 0 Comments

JavaScript ES6: Even more new abstractions to improve your code

 

 

JavaScript ES6, also known as ECMAScript 2015, has a number of really cool new features that can improve the quality of your code. Yesterday, Glad covered five new features in ES6 that will likely improve the code you write.

So I figured, why not cover five more?

For those of you skimming, here they are in list form:

  1. Let + Const
  2. For … of loop
  3. Spread
  4. Maps
  5. Promises

Let is just another way to declare variables, only difference is Let is block-scoped, that is when used to declare a variable inside a block, the value of that variable isn’t accessible outside that block.

Let in Action

Const allows you to set a value to a variable that would remain the same throughout the lifecycle of the app.

const foo = 20;

With ES6, a new way to iterate over each of the values in an array was introduced called the for ... of loops.

It also makes it easier to iterate through elements of a collection.

Example showing for of in action

This will log the direct values of the array without having to fetch it through the key colors[i] as it’s usually done.

The Spread operator, which is also known as the ... operator was introduced in ES6. It makes working with objects much easier as it helps with two things:

  1. Spreading an array or object into another array or object,
  2. Joining multiple parameters into an array.

To spread an array or object into another:

As mentioned above, the spread operator also comes in handy with passing parameters to a function using an array:

Maps are similar arrays. They hold a key-value pair but allow you to specify your own index and this index specified are unique.

Maps in Action

Note: To use Maps across many browser you would need a polyfill as not browsers have it implemented.

Promises give us a way to handle asynchronous operations and processes in a synchronous manner. With this we can write non-dependent code easily.

It’s been argued that promises are not needed, and one can just use async, callbacks etc. However, Javascript ES6 now has a standard implementation of promises that can be used easily.

Note: Not all browsers support Promises out the box so you would need to have a polyfill for this to use cross browsers.

ES6 has so many cool and amazing features some you might use and some you might not have an immediate use for them but they are still worth checking out.

If you would like to check out more of this features, Luke Hoban’s created an es6features repo that has a list of all cool features ES6 has to offer.

Incase you found this article helpful, don’t forgot to share and go berserk on that clap button.

Cheers!!!

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

Try it for free.


Tag cloud