Let & Const

Means that the identifier can’t be reassigned

const name = 'Shane'

Means that the identifier may be reassigned. Such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.

let age = 23

Key difference between var and let

Aside from the above, here are some other differences.


Variables declared with var are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

function scoping() {
  var a = "a";
  let b = "b";
  // a, b
    let c = "c";
    var d = "d";
  // ReferenceError - block scope
  // No probs - function scope

For loop

let is only visible in the for() loop and var is visible to the whole function.

function allyIlliterate() {
    //tuce is *not* visible out here

    for( let tuce = 0; tuce < 5; tuce++ ) {
        //tuce is only visible in here (and in the for() parentheses)
        //and there is a separate tuce variable for each iteration of the loop

    //tuce is *not* visible out here

function byE40() {
    //nish *is* visible out here

    for( var nish = 0; nish < 5; nish++ ) {
        //nish is visible to the whole function

    //nish *is* visible out here


Unlike var, let is not hoisted. Attempting to access a var before it is declared will result in "undefined", whereas accessing a let will result in ReferenceError.

function hoisting() {
  // undefined, ReferenceError
  console.log(a, b); 
  var a = "a";
  let b = "b";

Global property

let does not create a property on the global object.

var a = "a";
let b = "b";

// a
// undefined

N.B. you have to initialize your const and let identifiers before using them as typeof won't work.

Arrow functions

Shorter syntax for writing function expressions

// ES5
var nameIs = function(name) {
   return name

// one parameter
var nameIs = name => {return name}

// More than one parameter
var nameIs = (x, y) => {return name}

// No parameter
var nameIs = () => {return name}

// Self invoking
(() => {

With array methods

var names = [
    name: 'shane',
    age: 13
    name: 'paul',
    age: 21

var sorted = names.map(
  names => names.age


arr.forEach((item) => {

Spead Operator

Inserting array

const mid = [3, 4];
const arr = [1, 2, ...mid, 5, 6];

// [1, 2, 3, 4, 5, 6]

using Math.max on an array

const arr = [2, 4, 8, 6, 0];
const max = Math.max(...arr);


Copying an array

const arr = ['a', 'b', 'c'];
const arr2 = [...arr];


Template literals

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}`);
// "Fifteen is 15"


ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes.

Constructor - The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class.

Static - The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

Super - A constructor can use the super keyword to call the constructor of a parent class. The super keyword is used to call functions on an object's parent.

class Button {
  constructor(el) {
    this.el = el;
    this.el.addEventListener('click', evt => this.start());
  start() {

// External file
export default Button;
import Button from './Button';

const a = new Button(document.getElementById('a'));

Extending classes

class Polygon {

    constructor(name, height, width) {
        this.name = name;
        this.height = height;
        this.width = width;

    // Only accessible from inside
    static sayheight() {
        console.log('Hi, I am a ', this.height + '.');

    sayName() {
        console.log('Hi, I am a ', this.name + '.');


let p = new Polygon('John', 300, 400);

class something extends Polygon {
  speak() {
    console.log(this.name + ' roars.');

let a = new Polygon('Paul', 300, 400);

See the Pen ES6 Classes by Shane Prendergast (@webknit) on CodePen.


The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

// module 'person.js'
class Person {

    constructor(name) {
        this.name = name;


export const Person = Person;
import {Person} from 'person';

ES6 Arrow functions - Sitepoint
ES6 - Zell Liew
ES6 Cheatsheet - DrkSephy
Classes (ES6) Sample - Google Chrome
JavaScript ES6+: var, let, or const - Eric Elliot
Template Literals - Exploring JS