JavaScript functions in a nutshell
Tags: javascript
Published: 2021-05-23 23:22:43

---
title: JavaScript functions in a nutshell
published: true
date: 2021-03-05 00:00:00 UTC
tags: javascript
canonical_url: https://www.mariokandut.com/functions-in-javascript-explained/
---

This article is about functions in JavaScript. If you are new to JavaScript have a look at the [DataTypes in JavaScript](https://www.mariokandut.com/javascript-data-types-and-data-structures/) first.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#functions-explained)Functions explained

A JavaScript function is defined with the `function` keyword, then the function name follows and then the parentheses `()`, with or without parameters. The code to be executed is placed within the curly brackets `{}`. The same rules as variables apply to function names.

```
function name(parameter1, parameter2) {
  // do something here
}
```

A **function is an object** , and therefore a value. It can be used like any other value in JavaScript. For example:

A function can be returned from a function:

```
function factory() {
  return function doSomething() {};
}
```

A function can be passed to another function as an argument:

```
setTimeout(function() {
  console.log('hello 500ms have passed.');
}, 500);
```

A function can be assigned to an object:

```
const obj = {
  id: 1234,
  printId: function() {
    console.log(this.id);
  },
};

obj.printId(); // logs 1234 in the console
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#this)this

In the above example we are calling `console.log(this.id);` inside the function. `THIS` in the context refers to the object on which the function is called. That is the reason why the above example prints the id to the console when being called.

It's very important to understand that `this` **refers to the object on which the function was called** , not the object which the function was assigned to, for example:

```
const obj1 = {
  id: 1,
  fn: function() {
    console.log(this.id);
  },
};
const obj2 = { id: 2, fn: obj1.fn };

obj1.fn();
obj2.fn();
```

Both obj1 and obj2 to reference the same function, but on each invocation the `this` context changes to the object on which that function was called.`obj1.fn()` will correctly log the id of obj1. `obj2.fn()` should log the id of obj1, what happens because `this` context change, the id of obj2 will be logged.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#call)call()

With the `call` method the `this` context can be set directly on the function, for example:

```
function printId() {
  console.log(this.id);
}

const obj1 = { id: 1 };
const obj2 = { id: 2 };

printId.call(obj1); // prints 1
printId.call(obj2); // prints 2

printId.call({ id: 123456 }); // prints 123456
```

In this case the printId function wasn't assigned to any of the objects, this was set dynamically via the call function.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#arrow-functions)Arrow Functions

An arrow function expression or Lambda function is a compact alternative with some limitations, the differences and limitations are:

- No bindings to `this` or `super`.
- No arguments, or new.target keywords.
- Not suitable for `call`, `apply` and `bind` methods
- Can't' be used as constructors.
- Can't use `yield`, within its body.

Arrow functions don't have a `this` context, when a `this` is referenced inside the arrow function, it refers to the nearest parent non-lambda function. For example:

```
function printId() {
  return offset => {
    console.log(this.id + offset);
  };
}

const obj = { id: 999 };
const offsetter = fn.call(obj);

offsetter(1); // prints 1000 (999 + 1)
```

Another difference to normal functions is that arrow functions, do not have a `prototype` property.

```
function normalFunction() {}
const arrowFunction = () => {};
console.log(typeof normalFunction.prototype); // prints 'object'
console.log(typeof arrowFunction.prototype); // prints 'undefined'
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- Functions are a fundamental building part in JavaScript.
- Functions are objects.
- `this` **refers to the object on which the function was called**
- Use `call()` to set context for functions.
- Arrow functions don't have a binding to `this` or `super`.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

If you want to know more about **Javascript** , have a look at these [Javascript Tutorials](https://www.mariokandut.com/tags/javascript).

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#references-and-big-thanks)References (and Big thanks)

[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [JSNAD](https://trainingportal.linuxfoundation.org/)