This is going to be a short tutorial on some of the cool new stuff ES6 brings to Javascript. If you’re unfamiliar with ES5’s iteration of Javascript, don’t worry! I’ll explain the differences as I go along. Let’s just dive in!

The ‘let‘ Keyword

let‘, as opposed to ‘var‘ is a cool addition to ES6. In essence, ‘let‘ binds your variable assignment to the scope in which the assignment is declared. The easiest way to understand the difference is to look at an example:

if (true) {
  var name = 'Max';
  let nameTwo = 'Kris';
}

// prints 'Max'
console.log(name);
// "ReferenceError: nameTwo is not defined"
console.log(nameTwo);

As you can see here, let scopes the variable nameTwo to the if block, making it inaccessible in the global scope. This is useful for making sure that variables remain accessible only within the inner scope in which they are declared.

The ‘const‘ Keyword

const‘ does pretty much what you expect it to do, as well as something you may expect it not to allow. Obviously we are declaring a constant, however sometimes things may not remain constant if your variable type is passed by reference, such as an object or an array. Let me explain again in code:

const NAME = 'Kris';
// "TypeError: Assignment to constant variable."
NAME = 'Max';

const NAMES = ['Kris', 'Max'];
NAMES.push('Mike');
// ['Kris', 'Max', 'Mike']
console.log(names);

The reason the array can undergo mutations, while the string cannot is due to the nature of the variable types. Although ‘const‘ makes the value/reference a constant, it does not put such a restriction on the values a reference type may refer to. In this case, the values of an array – which indeed can change.

Arrow Functions vs Regular Functions

Although arrow functions are generally seen as cleaner or more concise, that is not the main difference between them and ES5 functions. The main difference between an arrow function and a regular function, is that arrow functions keep their context within the scope in which they are declared. That means that wherever you declare an arrow function, the this keyword will refer to that context and always that context – no matter where you call it. A regular function, on the other hand, may change its context based on the scope in which it is called.

Let’s look an an example:

var button = document.querySelector('button');

var arrowFunction = () => {
  console.log(this);
} 

function regularFunction () {
  console.log(this);
}

// [window Object]
button.addEventListener('click', arrowFunction);
// [object HTMLButtonElement]
button.addEventListener('click', regularFunction);

As you can see here, the arrowFunction refers to the [window Object] in which it is declared, while the regular function refers to the context in which it is called – in this case, an [object HTMLButtonElement].

What else is new with arrow functions?

Well, they don’t require parentheses when they only contain one argument. Furthermore, they don’t require curly braces when they return only one thing. FURTHER more, such functions can fit on one line. For example, these two functions are identical:

var oneParameterArrow = a => a+1;

function oneParameterReg (a) {
  return a + 1;
}

// 2
console.log(oneParameterArrow(1));
// 2
console.log(oneParameterReg(1));

Pretty cool, but what else is new with functions? Well, they can take default values now. Let’s take a look.

var defaultParams = (a=1, b=a) => 1+a;
// 2
console.log(defaultParams())

var defaultParams = (a=b, b=1) => 1+a;
// "ReferenceError: b is not defined"
console.log(defaultParams())

As we can see here, the first one takes a default parameter for a, and then assigns b to a – all is well. However, in the second line we have a ReferenceError letting us know that b is not defined when we try to assign it to a. That’s because parameter default values are assigned in order, just as you would expect with one assignment after another line-by-line. That’s pretty much all you really need to know about arrow functions!

The Spread Operator (…)

For this, I’m just going to show an example right away:

var spreadFunction = (...params) => {
  console.log(params);
}

// [1,2,3,4]
spreadFunction(1,2,3,4);

The spread operator (denoted by three dots), takes the parameters that a function receives and converts them into an array. As you can see, our function is given 4 arguments, which are then logged to an array of those exact 4 parameters. Pretty self explanatory, but extremely useful and worth mentioning.

Classes

The last thing (and probably the simplest) is classes. For anyone coming from Java, Python, C++ or C#, you all know what a class is. However, this sort of class is overlaid on top of Javascript’s prototypal inheritance. In fact, they are just special functions that appear as classes to the user. But, for all intents and purposes, we can treat them like classes – and they look just like classes as well! For those of you unfamiliar with ES5, you had to use Javascript’s prototypal system to ‘mock’ classes through functions themselves. Now, you no longer have to… well, on the surface at least.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

var door = new Rectangle(100,40);
// [object Object] {
//   height: 100,
//   width: 40
// }
console.log(door);

That’s it! That’s all there really is to knowing the basics of ES6. There are tons of other features I’ve left out, however these are the basics. If you would like to learn more, I highly recommend visiting the Mozilla Developer Network (MDN) for more information.

Cheers.

Advertisements