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}`;
console.log(msg);
					

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

console.log(firstName);
console.log(age);

					

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

console.log(a);
console.log(b);
console.log(d);
console.log(e);

					

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

Maps

• 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?

Sets

• 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');
sets.add('b');
sets.add('a'); // We are adding duplicate value.
for (let element of sets) {
 console.log(element);
}

// Output a, b
					

Classes

• 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.fuel--
    this.distance += 2
  }
  addFuel () {
    if (this.fuel >= 60) {
      throw new RangeError('Fuel tank is full')
    }
    this.fuel++
  }
}

				

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()
car.addFuel()
car.move()
car.move()
				

Questions