JavaScript Promises

“I Promise a Result!”

“Producing code” is code that can take some time

“Consuming code” is code that must wait for the result

A Promise is an Object that links Producing code and Consuming code

JavaScript Promise Object

A Promise contains both the producing code and calls to the consuming code:

Promise Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Continue reading JavaScript Promises

Asynchronous JavaScript

“I will finish later!”

Functions running in parallel with other functions are called asynchronous

A good example is JavaScript setTimeout()

Asynchronous JavaScript

The examples used in the previous chapter, was very simplified.

The purpose of the examples was to demonstrate the syntax of callback functions :

Example

function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

 

In the example above, myDisplayer is the name of a function. Continue reading Asynchronous JavaScript

JavaScript Callbacks

“I will call back later!”

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Continue reading JavaScript Callbacks

JavaScript Static Methods

Static class methods are defined on the class itself.

You cannot call a static method on an object, only on an object class.

Example

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}

const myCar = new Car("Ford");

// You can call 'hello()' on the Car Class:
document.getElementById("demo").innerHTML = Car.hello();

// But NOT on a Car Object:
// document.getElementById("demo").innerHTML = myCar.hello();
// this will raise an error.

Continue reading JavaScript Static Methods

JavaScript Class Inheritance

Class Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class :

Example

Create a class named “Model” which will inherit the methods from the “Car” class :

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

 

The super() method refers to the parent class. Continue reading JavaScript Class Inheritance

JavaScript Classes

ECMAScript 2015, also known as ES6, introduced JavaScript Classes.

JavaScript Classes are templates for JavaScript Objects.

JavaScript Class Syntax

Use the keyword class to create a class.

Always add a method named constructor():

Syntax

class ClassName {
  constructor() { ... }
}

Example

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

The example above creates a class named “Car”. Continue reading JavaScript Classes

JavaScript Closures

JavaScript variables can belong to:

The local scope or The global scope

Global variables can be made local (private) with closures.

Closures makes it possible for a function to have “private” variables.

Local Variables

A local variable is a “private” variable defined inside a function.

A function can access all variables in the local scope. Continue reading JavaScript Closures

JavaScript Function bind()

Function Borrowing

With the bind() method, an object can borrow a method from another object.

The example below creates 2 objects (person and member).

The member object borrows the fullname method from the person object :

Example

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Continue reading JavaScript Function bind()

JavaScript Function apply()

Method Reuse

With the apply() method, you can write a method that can be used on different objects.

The JavaScript apply() Method

The apply() method is similar to the call() method (previous chapter).

In this example the fullName method of person is applied on person1 :

Example

const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person1 = {
  firstName: "Mary",
  lastName: "Doe"
}

// This will return "Mary Doe":
person.fullName.apply(person1);

Continue reading JavaScript Function apply()

JavaScript Function call()

Method Reuse

With the call() method, you can write a method that can be used on different objects.

All Functions are Methods

In JavaScript all functions are object methods.

If a function is not a method of a JavaScript object, it is a function of the global object (see previous chapter).

The example below creates an object with 3 properties, firstName, lastName, fullName. Continue reading JavaScript Function call()