Function context in JavaScript
Tags: javascript, node, web, programming
Published: 2018-12-23 14:06:58

---
title: Function context in JavaScript
published: true
description: In this post we will take a look at context inside a JavaScript function, how to assign context to a function with some examples.
tags: js, node, web, programming
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kyaljkvk2jp5dc2z4wi0.jpg
---

If you know any object orientated language you will be very familiar with the **this** keyword. In these languages ["this"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) refers to the current instance of the class. While this is true in JS, you might have also seen it being used inside functions. The value of this is also called context in JS.

The function context depends on how the function is being called. Also, arrow functions don't have their own scope, the scope of it's containing element is passed to it.

JavaScript also allows you to change the context of the function using call(), apply(), bind() methods. These methods are the properties that exist on a function object.

### The [call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) method

Using it you can pass context and arguments to a function.

Syntax

```js
functionName.call(contextObject, funtcion args)
```

Lets us say you have the following functions

```js
function multiplyByN(n) {
  console.log(this.multiplier * n)
}
```

If you run this you will get NaN as the output since this does not have a context, making multiplier to be undefined.

Now if you want to give the function context using call you would do the following

```js
multiplyByN.call(context, n)
```

so if you want to multiply 3 by 2

```js
multiplyByN.call({ multiplier: 2 }, 3)
// Output: 6
```

### The [apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) method

The apply method works in a similar way but here the arguments are passed as an array.

```js
multiplyByN.apply({ multiplier: 2 }, [3])
// Output: 6
```

### The [bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method

Bind returns you a new method with the value of the context bound to it.
Here is the syntax

```js
boundFunction = functuinName.bind(context)
```

So the above example will become

```js
multiplyBy2 = multiplyByN.bind({ multiplier: 2 })
multiplyBy2(3)
// Output: 6
```

Out of these three, bind() is very interesting since it returns a new function with the context we specified. This allows you to pass this new function to array methods, callbacks. This way you can have reusable function blocks.

Let's take a look at a detailed example.
Let's calculate the return amount you will receive on your 1year savings.
Now the purpose of this example is to demonstrate the use of bind() method, the calcReturns() function is very basic, you can change it to whatever you like.

```js
let savings = [2000, 3000]

let calcReturns = function(ammount) {
  return ammount + ammount * (this.interest / 100)
}

let calWith3percent = calcReturns.bind({ interest: 3 })

savings.map(calWith3percent)

// Output: [ 2060, 3090 ]

```

This would have not been possible if we had interest as an argument, as the callback of the array function has its own arguments

or if you want to check for different interest rates than

```js
let interests = [3, 4, 7]

interests.forEach(interest => {
  let calculate = calcReturns.bind({ interest: interest })
  console.log(savings.map(calculate))
})

// Output: [ 2060, 3090 ] [ 2080, 3120 ] [ 2140, 3210 ]
```

With some proper logic in the calculate returns function you can have a pretty decent investment calculator.

### Why would you use context you can pass parameters to the function?

Yes, you can just use arguments most of the times, but as you can see from the examples above at times using context will allow you to write very reusable code. You should check [this StackOverflow post](https://stackoverflow.com/questions/15318904/javascript-what-is-the-benefit-of-using-function-context-vs-passing-as-paramete) to get much more clarity on it.

That's it for this post, you can read more about using bind() in [this post](https://medium.com/@kartik2406/how-to-make-most-of-javascript-map-filter-reduce-9bdf42836b8a) which I had written a long while back.

If you like this post do share it :).