ES6 Basic Features

ES6 (or ECMAScript 6) is newer standard of JavaScript which provides some exciting new features.

Variable Declaration

Traditionally when using JavaScript you would declare variables with the var keyword. Creating a variable with var gives it function scope, which means it is accessible anywhere inside of a given function if that’s where it was declared. But if you were to declare a variable with var outside of a function (or within a conditional statement), it would then have global scope. Conversely, let and const both have block scope which means that their scope is confined to any curly braces {} they are inside.

In addition, you can redeclare the same variable with var, which you cannot do with let or const.

VAR

var car = 'Volvo';
// variable car is accessible globally

function get_car() {
var car = 'Toyota';
// variable car is accessible only within this function
}

if ( color === 'blue' ) {
var car = 'Lexus';
// variable car is accessible globally

var color = 'blue';
var color = 'red';
// this is allowed
}

var car = 'Volvo';

// variable car is accessible globally

function get_car() {

var car = 'Toyota';

// variable car is accessible only within this function

}

if ( color === 'blue' ) {

var car = 'Lexus';

// variable car is accessible globally

var color = 'blue';

var color = 'red';

// this is allowed

}

LET / CONST

let car = 'Volvo';
// variable car is accessible globally

function get_car() {
let car = 'Toyota';
// variable car is accessible only within this function
}

if ( color === 'blue' ) {
let car = 'Lexus';
// variable car is accessible only within this block statement

let color = 'blue';
let color = 'red';
// this will throw an error
}

let car = 'Volvo';

// variable car is accessible globally

function get_car() {

let car = 'Toyota';

// variable car is accessible only within this function

}

if ( color === 'blue' ) {

let car = 'Lexus';

// variable car is accessible only within this block statement

let color = 'blue';

let color = 'red';

// this will throw an error

}

There are also important differences between let and const. With let you are able to reassign the value, which you cannot do with const:

LET

let color = 'red';
color = 'blue';
// this is allowed

let color = 'red';

color = 'blue';

// this is allowed

CONST

const color = 'red';
color = 'blue';
// this will throw an error

const color = 'red';

color = 'blue';

// this will throw an error

String Concatenation

ES6 allows you to concatenate variables into strings by using the backtick instead of quotes. You can then pass in a variable prefixed with dollar sign inside curly braces:

JS

let color = 'red';
let text_string = `the roses are ${color}`;

1 2	let color = 'red'; let text_string = `the roses are ${color}`;

Fat Arrow Functions

One important difference between regular JavaScript functions and functions using the fat arrow syntax is that the this keyword is not rebound using the fat arrow syntax, while it is for the traditional function format:

Normal Function

const button = document.querySelector('#button_id');

button.addEventListener('click', function() {
	console.log(this);
	// this = button element
})

const button = document.querySelector('#button_id');

button.addEventListener('click', function() {

console.log(this);

// this = button element

})

Fat Arrow Syntax

const button = document.querySelector('#button_id');

button.addEventListener('click', () => {
	console.log(this);
	// this = window object
})

const button = document.querySelector('#button_id');

button.addEventListener('click', () => {

console.log(this);

// this = window object

})

Rest Parameters / Spread Operators

The ES6 spread operator is a very useful tool while working with arrays. By passing an array called args as ...args into a function you can iterate over all elements in the array without typing them explicitly.

Spread Operator

function threeParameters(x, y, z) { }
var args = [0, 1, 2];
threeParameters(...args);

function threeParameters(x, y, z) { }

var args = [0, 1, 2];

threeParameters(...args);

Destructuring

Destructuring allows you to quickly create variables from the properties of an object or array. You just use a variable declaration keyword (var, let, or const) followed by the names of the properties within curly braces and assign it as equal to the object or array:

Destructured Variables

const person = {
    person_name: 'Leon',
    job_name: 'Web Dev',
}

const {person_name, job_name} = person;

// person_name = 'Leon'
// job_name = 'Web Dev'

const person = {

person_name: 'Leon',

job_name: 'Web Dev',

}

const {person_name, job_name} = person;

// person_name = 'Leon'

// job_name = 'Web Dev'

Equivalent Declarations

const person = {
    person_name: 'Leon',
    job_name: 'Web Dev',
}

const person_name = person.person_name;
const job_name = person.job_name;

// person_name = 'Leon'
// job_name = 'Web Dev'

const person = {

person_name: 'Leon',

job_name: 'Web Dev',

}

const person_name = person.person_name;

const job_name = person.job_name;

// person_name = 'Leon'

// job_name = 'Web Dev'