Modern Javascript II

Kay Ashaolu

More Syntactic sugar

Sugar is nice

Template literals

  • Template literals makes adding variables to your strings much easier
  • Many Languages (like Python and Ruby) has this built into the langauge

Template literals example

let name = "Jon Snow";
let msg = `My name is ${name}`;

Destructuring objects and arrays

Let's just get into an example

Destructuring objects example

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, age} = person



Destructuring objects example explained

  • You can instantly assign variables to the values in a object in one line
  • It's intuitive if you look at an example
  • Can do this a number of ways, but this can reduce lines of code

Destructuring arrays example

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr



Destructuring arrays example explained

  • You can do the same thing with arrays
  • Order of the array that is the result of destructuring matters
  • You can skip what you don't want by leaving that position blank

New Data Structures

  • There are new robust data structures that were introduced in ES6
  • This will be a fast intro into a topic that is typically a Computer Science course
  • However, focus on the situations when the data structure is used


  • There is now a separate object type dedicated to Maps
  • Let's see how we can use it

Maps Example

let NewMap = new Map();
NewMap.set('name', 'John');
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);

NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']

But why don't we use Objects?

When to use Objects
  • Faster for small data structures
  • Can associate functionality to data structure
When to use Maps
  • Adding/deleting lots of keys
  • Preserves order of keys
  • Better at storing lots of data


  • A set is a list of unique items
  • We now have a data structure that ensures uniquness

Sets example

var sets = new Set();
sets.add('a'); // We are adding duplicate value.
for (let element of sets) {

// Output a, b


  • So you will hear a lot of stuff saying that Javascript implements prototypical inheritance
  • Don't worry about it.
  • Let's focus on what a traditional object-oriented class is and how you can use it

What is a Class?

  • A class is the opportunity to define your own type
  • (String, Integer, Function, etc)
  • You can associate state (variables) and functionality (functions) in the same type (think an array)

Class example

class Car {
  constructor () {
    this.fuel = 0
    this.distance = 0
  move () {
    if (this.fuel < 1) {
      throw new RangeError('Fuel tank is depleted')
    this.distance += 2
  addFuel () {
    if (this.fuel >= 60) {
      throw new RangeError('Fuel tank is full')


Class example explanation

  • constructor: A special function that is executed on creation of a new instance of the class
  • this.fuel and this.distance: two variables that will be associated with each instance of the classes
  • this: a reference to the instance of the class being created

Class example explanation 2

  • move and addFuel are functions that are associated with instances of class Car
var car = new Car()