4 useful features of ES6, ES7 and beyond

When I first got into web development I’d never been a big fan of Javascript as it seemed like a long process to get the simplest things done - date formatting, string manipulation, XHR requests for example. This is the reason jQuery was so appealing to people because, by design, it abstracts these into high level functions. For many websites or systems though, it’s an overkill.

Javascript ES6 has been an official standard since June 2015 now, and ES7 since June 2016. It’s made Javascript fun again (for me anyway) with a bunch of features to make colossal changes to the way we develop front-end code. There are some huge updates to modern JS which you will definitely have heard of if you’ve Googled for more than 10 minutes such as arrow functions, modules, let & const statements. I wanted this post to be about the lesser known features and functions which help with the small things.

Includes

This is a small function from the latest ES7 release (just one of a small handful of new features compared to the large ES6 array of features). It determines whether an array contains an element and simply returns true or false. See example below:

;["snap", "crackle", "pop"].includes("snap") //true

There were a few ways to do this before, such as using the indexOf function, but it makes code so messy sometimes. Sure, there are even libraries like Lodash which I also love, but having a native feature baked into JS is great.

Polyfill: includes - Mozilla

Fetch

A much larger and more used feature of modern JS, although it’s specified in the Living Standard from the WHATWG community as opposed to the EMCAScript from Emca International like most other JS features.

Aside from the ugly as hell old style XHR requests, the other popular way of sending requests to the server is via jQuery AJAX. This is often the only feature of jQuery I use nowadays, so the fetch API is great to reduce those kilobytes going over the wire by removing jQuery completely.

fetch("https://www.jaygould.co.uk/process.php")
  .then((resp) => {
    return resp.json()
  })
  .then((y) => {
    console.log(y)
  })

The above is a simple example which requests info from a server side PHP page. This response (resp) isn’t a JSON or HTML by default like jQuery AJAX calls. It returns a promise, which then must be converted to the correct format and passed to the next function in the chain with then().

Polyfill: fetch - GitHub

Multi-line strings

This one is widely used, but I wanted to add it in as it is incredible. Gone are the days of the following when all HTML content is on one line.

$var = '<div class="wrap"><span class="inner">Span content</span></div>'

Now with multi-line strings, we can simply use back ticks to spread the content over multiple lines:

$var = `
    <div class="wrap">
      <span class="inner">Span content</span>
    </div>
  `

Simple and effective!

Async/await

This feature has not yet been completely standardised at the time of writing this but has been around as a draft in evergreen browsers. It’s relatively complicated for the scope of this post so I’ll cover the basics and go into detail another time.

Async/await is about providing asynchronous functionality to JS, similar to that of callbacks and promises. The huge benefit of async/await compared to traditional methods like callbacks is that it looks more like synchronous code, making it more natural to read:

const request = async () => {
  console.log(await getData())
  return "fin!"
}

request()

As you can see, it provides a much cleaner and concise way of providing functionallity which would otherwise be something like the below:

const request = () =>
  getData().then((data) => {
    console.log(data)
    return "fin!"
  })

makeRequest()

While on the topic, another great way of adding asynchronous functionality to JS is via Observables. This is my favorite pattern, and has been used in other languages initially, and eventually bought to JS with the use of RxJS. I discovered it in Angular 2, and it’s excellent! It can provide much more to the developer besides just asynchronous development.

Polyfill: async/await - Babel

That’s it folks! As always, check caniuse before jumping straight into using these in production projects. Most of the time there are decent polyfills of which I’ve added a few above.