Best of Modern JavaScript — Callable Entities

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at functions and classes in JavaScript.

Generator Functions

Generator functions are new to ES6.

They’re denoted by the function* keyword.

The value of this in a generator function is handled the same way as in traditional functions.

We can’t call a generator function as a constructor.

If we do, we’ll get a TypeError .

We can define them as function expressions:

const foo = function*(x) {
  //...
};

Or we can define them as function declarations:

function* foo(x) {
  //...
};

Generator functions only return generator objects.

Method Definitions

Method definitions are functions that are defined in object literals.

For instance, we can write:

const obj = {
  add(x, y) {
    return x + y;
  },

  sub(x, y) {
    return x - y;
  },
};

We defined the add and sub methods in our obj object.

Also, we can define methods in classes.

For example, we can write:

class Calc {
  add(x, y) {
    return x + y;
  }

  sub(x, y) {
    return x - y;
  }
}

There’re no commas after each method in a class.

We can call super or methods of super in class methods.

Generator Method Definitions

Generators can be added as methods in an object or a class.

The syntax is the same as regular methods.

For instance, we can write:

const obj = {
  * gen() {
    //...
  },
};

In classes, we can write:

class Gen{
  * gen() {
    //...
  }
}

We can use this and super like any other class methods.

Arrow Functions

Arrow functions don’t have their own value for the following variables:

• arguments
• super
• this
• new.target

They take the value of them from the surrounding scope.

They can’t be used as constructor.

If we try to use it with the new keyword, we’ll get a TypeError.

Classes

Classes is easier to use the syntax for constructor functions.

We can define them with methods by writing:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return `${this.x}, ${this.y}`;
  }
}

We create the Point class with the toString method and a constructor.

To create a child class of the Point class, we can use the extends keyword:

class ThreeDPoint extends Point {
  constructor(x, y, z) {
    super(x, y);
    this.z = z;
  }

  toString() {
    return `${super.toString()}, ${this.z}`;
  }
}

We called super in the constructor to call the parent Point constructor.

And we called super.toString() to call the Point instance’s toString method.

Classes can’t be called as functions or methods.

Constructor follows subclassing syntax.

The base class has its own this .

And subclasses has a this with the properties of the parent class instance and its own instance.

We’ve to call super before we can access this .

Dispatched and Direct Method Calls

We can call dispatch method call by calling a method on the instance.

For instance, calling arr.splice(1, 1) is calling splice on the arr array instance.

A direct call is calling a function with call or apply .

For instance, we can write:

Array.prototype.splice.call(arr, 1, 1)

or:

Array.prototype.splice.apply(arr, [1, 1])

to call splice with arr as the value of this and the arguments either as arguments or in an array.

Conclusion

There’re many kinds of callable entities in JavaScript. They include functions, methods, generator functions, and classes.