Quick Overview of Important ES6 Topics

A couple weeks ago I was able to make it out to my first coding-related meetup with UtahJS. David Jungst led a discussion on new topics in ES6 that every modern developer seeking to use the newest technologies should know about. Here are the notes he referenced during his lecture (and that I’ll reference throughout this article).

The ‘Let’ Keyword

Like the var keyword, let defines variables. However, let doesn’t get hoisted like variable declarations do, which can save developers from a bunch of unforeseen headaches. You also can’t redefine the variable that let was used with by reassigning let. What I mean by this is:

let x = true;
let x = false;

will result in a TypeError. The proper way to change the value of x would be

 x = false; 

without using let.
Let is also extremely useful for loops. By using this keyword, let is scoped to the for loop in

for (let i = 0; i < something.length; i++)

The ‘Const’ Keyword

Const is another keyword used to declare variables. It is READ ONLY, which is perfect for assigning values to variables that should not and will notchange. It is common convention to use all uppercase letters and underscores when declaring a const. Ex:

MAX_COLORS = 3;

Const can’t be reassigned.

const MAX_COLORS = 3;
MAX_COLORS = 784;

results in a TypeError. Using this keyword helps prevent magic number syndrome.

Default Parameters

The first improvement to functions comes in the form of default parameters.
Taken from Jungst’s example, the below code will break:

function countColors(colors) {
return colors.length;
}
countColors();
>> TypeError: Cannot read property 'length' of undefined

but now we can set default params.

function countColors(colors = []) {
console.log(colors.length);
}
countColors();
countColors(['Red', 'Blue', 'Green']);
>> 0
>> 3

In the first function call, we receive a length of 0 because that is the default value of an empty array with no length. The second call returns three because we overrode the default param by passing in an array of three colors.
As best practice, anything with default params should be listed last in a function’s parameters.

Key Value Pair Names In Objects

A really helpful update in ES6 saves us some repetitive typing. A lot of times, JavaScript objects have the same name for both the key and respective value. Traditionally, we’d have to type

var a = "foo", 
b = 42,
c = {};
var o = { 
a: a,
b: b,
c: c
};

With ES6, we can simply declare the o variable as

var o = {a, b, c};

String Interpolation

If you haven’t found yourself ever defining a variable as “one variable plus some string plus another variable”, then I’m not sure you’ve been coding in JavaScript :P. A common example of this would be:

var fullInfo = title + ": " + description.;

Now, we can use backticks, dollar signs, and curly braces to achieve this effect.

let fullInfo = `${title}: ${description}`;

LOTS MORE

Alright, so I’ve just barely touched the surface of some new features in ES6. There are some other great updates like the introduction of the class keyword, rest params, and so much more. Go check it all out!