ES2015

The new way to define variables

var = “something”; is becoming a thing of the past. The new ways to define variables are:

const –

use this when the variable your are assigning is a constant – i.e. the value won’t change throughout your project.

let –

generally use this if you are scoping a variable at a block level that is subject to change.

These are both block scope variables.

${Template Strings}

We can now interpolate values and expressions in a string with the new Template String syntax which wraps a variable you’d like to insert in a string with ${}. To use you need to wrap inside a “ (back tick) block. Another feature to note is that expressions can be evaluated on the fly, ${4 + 9} would become 13.

String Search Methods

Javascript almost becomes plain English and rather than trying to work with indexOf/ regular expression workarounds ES2015 introduces some really useful methods when working with strings.

startsWith() –

use this when you need to check if a string starts with a specific set of characters.

endsWith() –

use this when you need to check if a string ends with a specific set of characters.

includes() –

use this when you need to check if a string includes a specific set of characters.

You can include a second parameter which defines the index from where the search should start (the default value is 0). For example, if the following method was used:

startsWith(“Hello”,5);

The value would only equal true is the start index of the word hello was greater than 5.  “This Hello” would equal true but “Hello” would equal false.

The second parameter for the ends with caps the string to a certain length. So if you used a second parameter of 20 the evaluation would only be true if the characters that had an index of 20 matched.

Arrow Functions

As ES2015 has been widely adopted by modern browsers we can now use a more concise way to write functions. Arrow functions reduce the amount of code required and also helps to eliminate scoping issues as it prevents you from reassigning what’s in the functions variable.

Functions with zero arguments

const sayHi = () => console.log("Hi");

Functions with a single argument

In the example below I have converted a very simple function declaration into an arrow function. As this example passes in only one parameter we are able to further reduce the syntax by omitting the parenthesis around the argument. Furthermore because the statement returns only one line we are also able to omit the curly braces.

//function sayHi(name) {
//  alert("Hi, "+name)
//}

//const sayHi = (name) => {
  //console.log("Hi, "+name)
//}

const sayHi = name => console.log("Hi, "+name);

Functions with multiple arguments

When passing in multiple arguments the parenthesis is still required:

const sum = (a, b) =>  console.log(a+b);

Default Parameters

ES2015 brings the ability to define default parameters.

const sum = (a = 5, b = 2) => console.log(a+b);
sum(); // returns 7
sum(undefined, 6); // returns 11
sum(6, undefined); // returns 8

Classes

Classes are blueprints for creating objects that share similar objects and methods. They’re more convenient to write and easier to read.