Using Some ES6 JavaScript

This is something I worked on as part of my 100 days of code challenge during week 3.

I invested a bit of development time into a project I've been thinking of for a long time but left it neglected at the beginning stages.

It's a Javascript split-testing library.

I'm perfectly capable of reading and writing JS code with plenty of real world experience working with it. It's not one of my strongest skills though so I took this as an opportunity to improve and learn some more things. 

Javascript and ES6

When people say modern Javascript what they often mean is ES6 Javascript. The 6th edition was finalized in 2015 and is called ECMAScript 2015.

Sadly even though it's been around for some time browser implementation was slow to start and there is no backporting being done in many cases for older browser versions.

Modern browsers support ES6 code fairly well. Chrome, Opera, Safari, Firefox and even Edge have good levels of support – older browser versions do not and there's essentially no support for it on any version of IE.

Developers want to take advantage of the newer features that ES6 offers. They write ES6 code then compile it to ES5 compatible code – systems like babel make that easy. I wanted to take advantage of the new paradgrims too..

New Methods and Features in ES6 I Was Excited About

Deciding to go full ES6 in this project allowed me to take advantage of some features that I had previously only made minimal or no use of. There are 3 things I discovered in ES6 that made writing JavaScript a vastly more pleasant experience.

  • Native Classes to build with.
  • Variable and Function scoping inside blocks with let.
  • Default value assignments for function declarations.

I'm excited to work with those features all the time. Classes especially.

In ES5 you could use variables with objects, custom prototypes and anonymous functions to get similar Classes-like behaviors. To me that method always seemed to create very convoluted and hard to read code so native Classes are very welcome.

There is a couple of other very nice additions that I'm looking forward to using in future and in code refactors.

  • Rest and Spread Operators – ...variable.
  • Template Literals with raw string access.
  • Constants – Immutable Variables
  • String Searching.

Doing Things the ES6 Way

There are a few things in this project that I done differently to in the past and in ES6 they are much cleaner.

Merging Objects

While working I wanted to merge some objects. Previously I'd done that with a custom function that iterates through all prototypes of an object and merged them into another object. ES6 has a method for doing just that in a single line.

let defaults = {the defaults};
/**
 * Merge 2 (or several) objects together.
 *
 * This merges myObject into the object containing the defaults.
 * and returns the updated destination object only.
 */
this.myObject = Object.assign( defaults, this.myObject );

Better Sub-String Methods

A lot of work takes place with strings and string manipulation. In my latest project I had the pleasure of searching for values inside strings using much cleaner methods.

let myString = 'a string';
// there's a `startsWith` method now and it includes an index spot. This returns true because we start at index 4. There is also an `endsWith` that behaves similarly.
if ( myString.startsWith( 'ring', 4 ) ) {
    console.log( 'found "ring" at end of ' + myString );
}
// my favorite is `includes`. Previously I would have used indexOf or a regex for complex strings for this.
if ( myString.includes( 'tri' ) {
    console.log( 'Found "tri" inside of . + myString );
}