Sign Up Login Videos

ES6 Cheatsheet

3

ES6 Cheatsheet

Today I'll be explaining some of the biggest changes in ES6 (the latest version of Javascript). There are lots of really cool new features!

let vs var

ES6 adds a new way to declare variables, the let keyword. This new keyword works similarly to var but there are a couple of differences.

  1. Variables declared using var are accessible using window.varName, variables declared using let are not.
  2. var is scoped to the nearest function block, let is scoped to the nearest enclosing block.

Here's a simple example.

function myFunc() {
    // i NOT accessible here
    for(let i = 0; i < 10; i++) {
        // i IS accessible here
        console.log(i)
    }
    // i NOT accessible here
}

function myFunc2() {
    // i IS accessible here
    for(var i = 0; i < 10; i++) {
        // i IS accessible here
        console.log(i)
    }
    // i IS accessible here
}

Arrow functions

Arrow functions are a shorter way to write functions, they also don't have their own this variable. Here's how we define a normal function.

function myFunc(a, b) {
    return a + b
}

Here's that same function defined using the new ES6 arrow syntax.

var myFunc = (a, b) => { return a + b }

Template Strings

ES6's new template strings allow you to include Javascript expressions in your strings, this is called string interpolation. It also makes it easier to include new lines in your strings.

The difference between a regular string and a string template is simple, instead of double-quotes (") or single-quotes (') we use backticks (`).

Here are some examples.

// First example
var name = "Francis"
console.log(`My name is ${name}`)

// Second example
console.log(`3 + 4 = ${3+4}`)

// Third example
console.log(`This example includes 
newlines!`)

Look how simple it is! We can include any Javascript expression in our strings using the ${} syntax.

Spread operator

The new spread operator is a cool way to unpack or expand an array's elements. Here's some example uses.

var a1 = [1,2,3]
var a2 = [4,5,6]
// We use the spread operator to unpack each arrays elements into our new array
var a3 = [...a1, ...a2] // a3 = [1,2,3,4,5,6]

We unpack an arrays elements by placing 3 dots (...) before the arrays name.

// Print all the elements in an array like this
var a = [1,2,3,4,5,6]
console.log(...a)
// The output of ...a is the same as this console.log(1,2,3,4,5,6)

Classes

The classes that are built into ES6 essentially just enable a different syntax that makes use of Javascript's existing prototype-based inheritance.

One cool thing that Javascript does is load your function definitions into memory before it runs your code, this allows you to call your function at the top of your program and provide its definition later in the program. You can't do this with classes.

You need to define your class before you can use it.

Here's some code showing how to create classes.

class Square {
    constructor(size) {
        this.size = size
    }
    get area() {
        return this.size * this.size
    }
    size() {
        return this.size
    }
}

Here are some things to note:

  1. We define a class using the class keyword.
  2. We define a constructor just by creating a function called constructor.
  3. Use the get keyword before a functions name to create a getter.

This class we just created allows us to create square objects, like this:

var s = Square(10)
console.log(s.area) // Will print 100 to the console

This is a quick overview of ES6. We'll go more in-depth on each topic soon! 😎

  • Javascript

4 Replies

Are you going to make a new video about ES6?

1

Are you going to make a new video about ES6?

@Siddeshwar a new series! The first video of which will be live later tonight!

0

@Siddeshwar a new series! The first video of which will be live later tonight!

0

Two questions:

  1. Are you doing fewer PHP videos for the future of your channel?
  2. Do you know the language, Julia, if so are you going to make a video (similar to the one you did on Go) on it?
0

Two questions:

  1. Are you doing fewer PHP videos for the future of your channel?
  2. Do you know the language, Julia, if so are you going to make a video (similar to the one you did on Go) on it?

@koon

  1. I like PHP, loads more PHP videos coming soon!
  2. I've heard of the language Julia, I've never used it though but I would like to make videos covering more languages like the one I did for Go. 😊
0

@koon

  1. I like PHP, loads more PHP videos coming soon!
  2. I've heard of the language Julia, I've never used it though but I would like to make videos covering more languages like the one I did for Go. 😊
x