Better JavaScript — Function Calls

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.

Call Functions with Different Numbers of Arguments with apply

The apply method lets us call a function with a value of this and an array with the arguments.

For instance, we can write:

const min = Math.min.apply(null, [1, 2, 3]);

The first argument is the value of this , which can be anything since Math.min is a static method.

And the rest are the arguments.

This lets us call a function with a variable number of arguments.

We can also use it by getting the values from within the function.

For instance, we can write:

const buffer = {
  state: [],
  append(...args) {
    for (const a of args) {
      this.state.push(a);
    }
  }
};

We get the args which have the arguments.

Then we push the items into the this.state array.

Then we can use it by writing:

buffer.append.apply(buffer, [1, 2, 3]);

Use the Rest Operator to Create Variadic Functions

We can use the rest operator to get all the arguments of a function.

For instance, we can write:

function average(...args) {
  let sum = 0;
  for (const a of args) {
    sum += a;
  }
  return sum / args.length;
}

We get the array of arguments from the args array generated from the rest operator.

Then we can loop through the items and get the sum.

And then we divide it by the length of the args array.

This is better than using the arguments objects to get arguments.

Don’t Use arguments to Create Variadic Functions

The rest operator replaces the arguments object to get a variable number of arguments.

So we shouldn’t write:

function average() {
  let sum = 0;
  for (const a of arguments) {
    sum += a;
  }
  return sum / args.length;
}

Instead, we should use the rest operator instead.

It also only works with traditional functions and not arrow functions so its use is limited.

Never Modify the arguments Object

The arguments object looks like an array, but it’s not an array.

It doesn’t have any array methods.

However, with the call method, we can call array methods like:

const shift = [].shift;
shift.call(arguments);

But if we have:

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

function call(obj, method) {
  const shift = [].shift;
  shift.call(arguments);
  shift.call(arguments);
  return obj[method].apply(obj, arguments);
}

call(obj, 'add', 1, 2, 3)

That would get us the error ‘Uncaught TypeError: Cannot read property ‘apply’ of undefined’.

This means we can’t change the arguements object to call an object with arguments.

Use bind to Curry Functions

The bind method lets us return a function with a value of this inside it.

It can also be used to return a new function with some arguments of the existing function applied.

For example, if we have the following function:

function add(x, y) {
  return x + y;
}

Then we can use bind to create a function with the first argument applied by writing:

const add2 = add.bind(null, 2);

the first argument is the value of this .

And the subsequent arguments are the arguments for the function.

Then we can use it by writing:

const sum  = add2(3);

And sum would be 5.

Conclusion

apply and bind are useful for changing the this value of the function and applying arguments.

apply calls the function and bind returns a new function with the values applied.