#1: Getting started with ES6

This article will give you a quick introduction to some of the commonly used ES6 features.

Here's the list of all the ES6 features :

Arrows
Classes
Enhanced object literals
Template strings
Destructuring
Default + rest + spread
Let + const
Iterators + for…of
Generators
Unicode
Modules
Module loaders
Map + set + weakmap + weakset
Proxies
Symbols
Subclassable built-ins
Promises
Math + number + string + array + object apis
Binary and octal literals
Reflect api
Tail calls

We'll go through some of the features from the above list.

1. Let and Const

ES6 has introduced two new ways to define variables.One way is to use let and the other is const. Before that we could only define a variable with var.

Let's talk about var first.

With var we can define variables either in global scope or function scope. The scope of var is global when it is defined outside a function. And it is function scoped when it is defined inside a function, which means it will only exist within the function. For example:

var text = "hello";
function fun(){
    console.log(text);
}

fun();
//output : hello;

However, the reverse is not true.

function fun(){
    var text = "hello";
    console.log(text);
}

fun(); //output : hello
console.log(text) //output : Uncaught ReferenceError: text is not defined

Now, we will learn how to define block-scoped variables with let and const.

But wait, what's a block?

A block in JavaScript is anything within a pair of curly braces. For example:

if(true){
    //this is a block
}

{
    //this is also a block
}

A block-scoped variable exist only within its respective block.

let v = "hello";
{
    let v = "hi";
    console.log(v); //output : hi
}
console.log(v); //output : hello

const is also block-scoped. Therefore, the same is true for const.

const v = "hello";
{
    const v = "hi";
    console.log(v); //output : hi
}
console.log(v); //output : hello

Diffence between let and const

With let, we can reassign variables. But that is not the case with const. Once a variable is defined using const, it cannot be reassigned.

let v = 1;
console.log(v); //output : 1
v = 2;
console.log(v); //output : 2 

const c = 10;
console.log(c); //output : 10
c = 30; //output : Uncaught TypeError: Assignment to constant variable.
console.log(c); //this line doesn't execute

2. Arrow Functions

Arrow function (also called fat arrow) is an alternative way to write a function with shorter syntax. For example:

//Normal function
function add(arg1, arg2){
    return (arg1 + arg2);
}

//the above function can also be written like this
const add = function(arg1, arg2){
    return (arg1 + arg2);
}

//Arrow function
const add = (arg1, arg2) => {
    return arg1 + arg2;
};

We remove the "function" keyword and replace it with "=>" at a slightly different location.

An arrow function can be made even shorter when there is :

only one parameter
implicit return.

If there is only one parameter/argument, then we can remove the parenthesis that surrounds the parameters/arguments.

//Arrow function with only one argument
const square = num => {
     return num * num;
}

Arrow functions, by default create a return keyword if there is only one line of code. The following two are the same :

const square = num => { return num * num; }
const square = num => num * num;

3. Enhanced object literals

1.) Property value shorthand

In an object we sometimes assign a value having the same name as of its property/key like this:

const age = 20;
const obj = {
    age : age,
    userName : "Mike" 
}

We could write the same object in a shorter way in ES6. Here's what it looks like:

const age = 20;
const obj = {
    age,
    userName : "Mike"
}

2.) Method shorthand

Methods are functions that are associated with a property. Example:

const obj = {
    addMethod : function(arg1, arg2){ return arg1 + arg2; }
}

With ES6, we get to write methods with shorter syntax, like this:

const obj = {
    addMethod(arg1, arg2) { return arg1 + arg2; }
}

We remove the ( : ) and the function keyword, and it still works the same.

4. Template literals

Template literals are strings which allow you to create multiple line strings and perform string interpolation. Normally, we enclose strings either with single quotes ( ' ) or double quotes ( " ). For Template literals, we use backticks ( ` ). The best part of Template literals is that we can embed JavaScript inside strings using ( ${} ). For example:

//Normal strings
const firstName = 'fName';
const lastName = 'lName';
const fullName = firstName + ' ' + lastName; 

//Template literals
const firstName = 'fName';
const lastName = 'lName';
const fullName = `${firstName} ${lastName}`;

Another advantage of template literals is that you can create multi-line strings easily. For example:

const container = document.querySelector('.container');
const element = 
`<ul>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
</ul>` 

container.innerHTML = element;

5. Object Destructuring

Object destructuring is a feature to extract properties from an object, and assign them to variables.

Let's say you have an object:

const movie = {
    title : "example",
    rating : 8.5
}

Inorder to get the properties title and rating, you had to create two variables and then assign each variable to a value, like this:

let title = movie.title;
let rating = movie.rating;

With destructuring, we can write this in a single line of code.

let {title, rating} = movie;
console.log(title); //output : example
console.log(rating); //output : 8.5

Note : The names inside the curly braces ( {} ) must match with the names of the properties of the object. If not, it will return undefined.

let { releaseYear } = movie;
console.log(movie); //output : undefined

I hope this blog gives you a basic understanding of how some of the ES6 features work.

Thank you for reading :)

Introduction to commonly used ES6 features