Better JavaScript — Different Kinds of Functions

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at ways to improve our JavaScript code.

Know the Difference Between Function, Method, and Constructor Calls

We should understand the difference between function, methods, and constructors.

These are all functions but they serve different purposes.

Functions are some pieces of reusable code that we can call.

They might take inputs and return something.

For instance, a function is something like:

function hello(username) {
  return `hi ${username}`;
}

Then we can call it by writing:

hello('james');

Methods in JavaScript are functions that are in objects.

For instance, we can write:

const obj = {
  hello() {
    return `hi ${this.username}`;
  },
  username: 'jane smith'
};

We have the obj.hello method.

this is obj since the method is in the obj object.

Then we can call it by writing:

obj.hello();

and we get 'hi jane smith' returned.

We can define a function outside the object and then add it as a method.

For instance, we can write:

const hello = function() {
  return `hi ${this.username}`;
}

const obj = {
  hello,
  username: 'jane smith'
};

Then obj.hello() returns the same result.

We can reuse hello to define a method in another function.

For instance, we can write:

const hello = function() {
  return `hi ${this.username}`;
}

const obj = {
  hello,
  username: 'jane smith'
};

const obj2 = {
  hello,
  username: 'may wong'
};

Then when we call:

obj2.hello()

it returns ‘hi may wong’ .

A function with this isn’t useful outside an object.

For instance, if we have:

const hello = function() {
  return `hi ${this.username}`;
}

console.log(hello())

Then we get 'hi undefined' if we call hello directly since this is window if strict mode is off.

If we have strict mode on:

const hello = function() {
  'use strict';
  return `hi ${this.username}`;
}

then we get something different.

We get ‘Uncaught TypeError: Cannot read property ‘username’ of undefined’ since this is undefined at the top level with strict mode on.

Another use of JavaScript functions is constructors.

They let us create objects of a given type.

For instance, we can write;

function Person(name) {
  this.name = name;
}

Then we can create a new Person instance with the new operator.

For instance, we can write:

const james = new Person('james');

Then james.name is 'james' .

Higher-Order Functions

Higher-order functions are functions that take a function as a parameter or return a function.

For instance, the sort method of the array instance is a higher-order function.

We can use it by writing:

const sorted = [3, 1, 2, 5, 5, 9].sort((a, b) => a - b);

Then sorted is [1, 2, 3, 5, 5, 9] .

We passed in a callback to the sort method so that it’s used for sorting the numbers in the array.

a and b are the entries in the array being processed.

Conclusion

Different kinds of functions do different things.

Higher-order functions are functions that takes a function as a parameter or returns a function.