Good Parts of JavaScript — Function Invocation

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.

In this article, we’ll look at some good parts of JavaScript functions.

Function Invocation

Functions have to be invoked for them to do something.

They may or may not be called with arguments. In addition to arguments that we pass in, there’s so the this and arguments value.

this is the object that the function resides or the instance of the constructor.

It can also be the function that it’s in.

The invocation operator is a pair of parentheses with the arguments separated by commas.

If there are too many arguments, the extra arguments are ignored.

This means that the signature of the function doesn’t have to match the arguments that are passed in.

There’s no type checking on argument values. This means that we can pass on anything.

Therefore, we should be careful when we’re passing in parameters to a function.

The Method Invocation Pattern

When a function is stored in an object, then the function is called a method.

When a method is invoked, this is bound to the object.

We can call a method by using the dot notation or bracket notation.

For instance, given the following object:

const obj = {
  value: 0,
  increment(val) {
    this.value += val;
  }
};

We can write the following:

obj.increment(2);

Then obj.value will be increased by 2 since this is set to obj in the increment method.

Methods that are in the object context of this are called public methods.

Function Invocation Pattern

JavaScript functions can be standalone functions.

For instance, we can create a function as follows:

const add = (a, b) => {
  return a + b;
}

Then we can call it as follows:

add(1, 2);

Traditional functions are bound to the global object, so this of a traditional function at the top level would be window in the browser.

However, arrow functions aren’t bound to this , so it’ll be undefined at the top level.

Therefore, we should use arrow functions as much as we can so that the value of this would be the same as what it is on the outside.

So we can write:

const obj = {
  val: 0,
  foo() {
    const helper = () => {
      this.val = 1;
    }
  }
}

to access this.val in a nested function.

this is still obj within the helper arrow function.

If we use a traditional to define helper , we can write:

const obj = {
  val: 0,
  foo() {
    const that = this;
    const helper = function() {
      that.val = 1;
    }
  }
}

We’ve to assign this to that so that this will be obj rather than helper .

Constructor Invocation Pattern

JavaScript is a prototypical inheritance language. Objects can inherit properties directly from other objects.

There are no classes in JavaScript. Classes are just syntactic sugar.

JavaScript’s prototypical inheritance will confuse people coming from languages with classical inheritance.

JavaScript has the new operator like other object-oriented languages.

However, it’s just used to call a function in a special way.

It creates a hidden link to the value of a constructor’sprototype member.

The new prefix modifies the behavior of the return statement.

Functions that are used with the new prefix are called constructors.

They’re kept in variables with a capitalized name.

If we invoke a constructor without the new prefix, we would have issues with the value of this being not what we expect.

We don’t get any warnings about this other than unexpected behavior, so we need to be careful.

To define a constructor function, we can write:

const Foo = function(string) {
  this.status = string;
};

The code above is the most basic constructor function. It just takes a string parameter and set string to this.status .

Then we can invoke it by writing:

const foo = new Foo('good');

Then foo.status is 'good' .

To add an instance method, we can write:

const Foo = function(string) {
  this.status = string;
};

Foo.prototype.getStatus = function() {
  return this.status;
};

then we call foo.getStatus() to return 'good' .

Conclusion

There are multiple ways to call functions in JavaScript.

Methods are functions that are in an object. We can call it with the dot or bracket notation.

Also, we can create a constructor by using the function keyword.

To define instance methods, we can add it in the prototype property of the function.