ES6, A [brief] History

If you’re like me and didn’t do much front-end development before 2015, you might not know what ES6 features you’ve been using all along. I graduated in 2014 and it wasn’t long before I was a full-swing JavaScript developer. In the beginning I distinctly remember transitioning from vanilla JavaScript and jQuery to React. But around the same time, new nifty core features of JavaScript came out (using a compiler). Iterating over my code and learning as I went along; I utilized these upgrades without giving them the attention they deserved. I’ll have to make up for it now.

Destructuring

Here mozilla goes much deeper into the weeds describing the new features of destructuring in ES6. But in short, it’s a way to pull out a nested value within an object or array and automatically assign it its own variable name. Ignore const for now, we’ll get to that shortly.

Old way:

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
var oneProp = someObject.oneProp;
var anotherProp = someObject.anotherProp;

New way:

const [ first, second, third ] = someArray;
const { oneProp, anotherProp } = someObject;

Key name shorthand

Here I think the example will make this clear enough.

Old way:

var myObj = {
   foo: foo,
}

New way:

const myObj = { foo }; // <-- automatically gives keyname 'foo'

Template Strings

This is the greatest thing ever. Something I use constantly. I couldn’t even imagine cancatenating strings the old way.

Old way:

var fullName = firstName + ' ' + middleName + ' ' + lastName;

New way:

const fullName = `${firstName} ${middleName} ${lastName};`

Block Scoping

In order to better understand the benefits of block scoping one must know both the meaning of scope and hoisting. In ES6 two new ways to declare variables that are scoped were created. let and const . let is mutable like var and const is not.

With hoisting:

// var 'person' is hoisted here
if (eatsCheese) {
   var person = 'cheesy';
}

// even though it was declared inside an 'if'
//   we can still use the variable here
console.log('person: ', person);

Without hoisting:

if (eatsCheese) {
   // 'const' is also block-scoped
   let person = 'cheesy';
}

// gives error, because 'person' is declared and exists only within
//   that 'if'
console.log('person: ', person);

Difference between ‘let’ and ‘const’:

let a = 1;
a = 2;
console.log(a); // prints 2 (this is ok)
const b = 1;
b = 2;
// error, cannot overwrite const
const person = {};
person.nice = true;
// this is ok
const people = [];
people.push('steve');
// this is ok

Arrow Functions

Traditionally written functions ie. function with the function keyword is still seen quite a bit, but I’ve been using arrow functions so long that I don’t remember life without them. The big thing to note is arrow functions have the same this as the outside scope with auto-binding. Whereas traditional function has its own this and often needs to be bound .

Old way:

function addVars (a, b) {
   return a + b;
}

New way:

const addVars = (a, b) => { return (a + b) };
// you can even do
const addVars = (a, b) => a + b; // implicit return (one-liners)
// becomes really useful for click events or passing a function
//   as a prop
<button onClick={() => doSomething()}>my button</button>

Simplified Importing

Importing with import keyword and destructuring the imports.

Old way:

var array = require('lodash/array');

New way:

import { array } from 'lodash';

Default, Rest, and Spread

My personal favorites, that are amazing for array, object and param manipulation in a concise manner.

Default param value:

const myFunc = (firstParam, secondParam = 6) => {
   return firstParam + secondParam;
}
myFunc(1); // returns 7
myFunc(1, undefined); // also 7

Spread:

const myArr = [1,2,3];
const myArr2 = [...myArr, 4]; // [1,2,3,4]
const myObj = {one: 1, two: 2, three: 3};
const myObj2 = {...myObj, four: 4}; 
// myObj2 -> {one: 1, two: 2, three: 3, four: 4};
// Also really useful for passing parameters to a function
myNumberFunction(...myArr) {... 
// same as passing 1, 2, 3, 
//   three separate parameters

Rest:

const myFunc = (x, ...y) => {
   return y;
}
myFunc(...[1,2,3]); // returns [2,3]

Additional Concepts

ES6 Classes

Generator Functions

Conclusion

ES6 has been the greatest improvement in the JavaScript library in recent history. Reviewing and writing about these features makes me really appreciate them a lot more there’s not a single one I haven’t benefitted from directly. If you’re interested in learning more check out the w3schools site on ES6 where they tell you about other nifty features like the Exponentiation Operator.