JavaScript functions in a nutshell

This article is about functions in JavaScript. If you are new to JavaScript have a look at the DataTypes in JavaScript first.

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
}

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

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

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.

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.

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'

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.

If you want to know more about Javascript, have a look at these Javascript Tutorials.

References (and Big thanks)

MDN, JSNAD