Template Literals

Template literals gives us an easy way of printing strings in JavaScript.

They also give us an easy way of having variables.
For example,

Let fName = ‘John’;
Let lName = ‘Kioko’;
Const fullName = ` ${fName} ${lName} `;
Console.log(fullName);

From the above example, we are using template literals to concatenate our fName and lName variables and then assigning them to the fullName Variable.

Previously we would have achieved the same result as shown below;

Const fullName = fName + ‘ ‘ + lname;

Template literals gives us a clean way of having a multi-line strings as shown below;

Const fullName = ` ${fName} 
${lName} `;

Object Destructuring:

Object destructuring allows us to access the keys of an object without having to reference it all the time;

Example of an object,

Const player = {
    name : “Victor Wanyama”,
    club : “MLS”,
    address : {
        city : “Florida”
}
};
Destructuring our object,
Const {name, club, address : {city} = player;

Object Literals

ES6 has put emphasis in writing less code while being readable and maintainable.

Object literals allow us to write less code while being descriptive.

An example of a normal object;

function addressMaker(city, state) {
    const newAdress = {city: city, state: state};
        console.log(newAdress);
}
addressMaker('Austin', 'Texas');

This is how our object looks after re-writing it using object literals;
function addressMaker(city, state) {
    const newAdress = {city, state};
       console.log(newAdress);
}
addressMaker('Austin', 'Texas');

For…of loop

The for…of loop is a new feature of JavaScript that was introduced in the later version of ES6.

It allows us to iterate over an entire iterable (strings, Array, sets etc).

The syntax of the for…of loop:

For(element of the iterable){
Body 
};

Example of a for…of Loop;

let incomes = [62000, 67000, 75000];
for (const income of incomes) {
    console.log(income);
}

Spread Operator

The spread operator( … ) is used to expand or spread an iterable or an array. For Example,

let contacts = ["Mary", "Joel", "Danny"];
let personalFriends = [ ...contacts ];
contacts.push("John");
console.log(personalFriends);

In the above example we have our array of contacts and then we are creating another array of personalFriends which copies the elements of contacts.

We then push another element to our first array contacts and on printing it we see that our new element has been included into the contacts array.

Printing our first array;

console.log(contacts);

Result;

["Mary", "Joel", "Danny" “John”];

But if we print our other array that we created by copying the elements of our first array contacts using … spread operator, we see that John is not included.

Printing personalFriends array:

console.log(personalfriends);

Result:

["Mary", "Joel", "Danny"];

Arrow Functions

This new ES6 feature gives us a cleaner way of creating functions as compared to regular functions. For example;

This function

Let a = function ( b , c){
Return b + c;
}

Can be written in arrow function as;

Let a = (b, c) => b + c;

Default Params

Default params allows us to give a value to our function paramete.r for example,

const leadSinger = (artist = "someone");

such that when we are calling the function without providing it with a value, it will default to the value provided to the parameter instead of giving us undefined. An Example,

const leadSinger = (artist = "someone") => {
console.log (`${artist} is the lead singer of Cold Play`);
}
leadSinger ();
output;
"someone is the lead singer of Cold Play"

Includes()

The includes() method checks to see if an element is included and returns a Boolean value of true or false.

In the below example we are using includes() to check if a recipe is in the array then prints the relevant console message;

const listIngredients =  [ "flour", "sugar", "eggs", "butter" ];
if ( listIngredients.includes("chocolate")) {
console.log("We are going to make a chocolate cake" )
} else {
    console.log ("We can't make a chocolate cake because we are missing the ingredient chocolate”);
}

Let & Const

Let & const are block scoped declarations.

Let variables can be updated but not re-declared. Const variables can neither be updated nor re-declared.

Import & Export:

This allows us to follow the solid principles and do dependency injection and more object orientated programming.

It essentially allows our code to be more modular in nature which lends it to be more easily organised.

Classes

A class is a blueprint of an object. You can create an many objects from a class.

Creating classes in JavaScript is similar to creating constructor functions.

A constructor function is defined as shown below:

// constructor function 
function dog () {
    this.breed = 'germany',
    this.color = ‘white’
}

// create an object
const dog1 = new dog();

When creating clases, you replace the function keyword with the class keyword. For example,

//A dog class 
class dog () {
    constructor(breed, color){
            this.breed = breed;
          this.color = color;
    }
}

// create an object
const dog1 = new dog(‘germany’, ‘white’);

The class keyword is used to create a class. The properties are assigned in a constructor function.

JavaScript Map

Maps in javascript are similar to objects, they allow us to store elements in a key/value pair.

Elements in a map are inserted in an insertion order. A map can contain objects, functions and other data types as keys.

To create a map we use the new map() constructor. For example,

// create a Map
const map1 = new Map(); // an empty map
console.log(map1); // Map {}

Javascript Sets

Sets are similar to arrays in that they allow us to multiple items like numbers,strings, objects, etc. Sets cannot contain duplicate values.

To create a javascript set, you need to use the new set() constructor. For example,

Const set1 = new set();

Conclusion

This article covers ES6 features. If there is any that you feel has been left out and you would like it to be covered, leave a comment.