Functions in JavaScript

Introduction

The most important element in the JavaScript language is the function. Therefore, it is essential to master functions in JavaScript: the different ways to create them, and the different ways to call them (also referred to as invoke or execute).

A function in JavaScript is a "first-class citizen": it is a value like any other, which can be stored in a variable, passed as a parameter to another function, or returned by a function.

A function is an object (see later for types in JavaScript), which has a superpower: it can be invoked. A function is invoked by adding parentheses at the end of its name.

There are 3 ways to create a function (actually 4, but the fourth is discouraged, so I won't mention it), each with nuances that we will see.

Function Declaration

function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• This is a function declaration;
• createMovie is a function declared with the function keyword (there are other ways to create functions);
• it has 3 parameters (a function can expect from 0 to Infinity parameters, it is strongly discouraged to exceed 3);
• it returns an object (which is not mandatory, it can return nothing - and thus return the value undefined, or return a primitive).

Function Expression

const createMovie = function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• Here, there is no function declaration
• There is a variable declaration createMovie
• to the right of the assignment operator (=), there is a function expression
• it has 3 parameters
• it returns an object

Arrow Function

function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• Here, there is no function declaration;
• there is a variable declaration createMovie;
• to the right of the assignment operator (=), there is an (expression of) arrow function;
• it has 3 parameters;
• it returns an object.

Some Clarifications for Arrow Functions

For arrow functions and only for arrow functions:

• parentheses around parameters are not mandatory if there is one and only one parameter
• braces and the return keyword are not mandatory if there is only one statement:

function noop() {} // parentheses mandatory if no parameters, braces mandatory if there is no statement
const add40 = n => 40 + n // parentheses optional if one and only one parameter, braces and return optional if only one statement

Be careful in some cases:

var createMovie = (id, title, frenchTitle) => {
  id: id,
  title: title,
  frenchTitle: frenchTitle
} // Syntax Error !!!

Here, the braces mean "start of function body", and do not act as an object initializer! So you either need to be more verbose...

function createMovie(id, title, frenchTitle) {
  return {
    id,
    title,
    frenchTitle
  }
}

... or surround the braces with parentheses:

function createMovie(id, title, frenchTitle) {
  return {
    id,
    title,
    frenchTitle
  }
}

Other Subtleties

There are other subtleties regarding the differences between functions and arrow functions that we will not have time to cover in this module. To fully understand these subtleties, you need to understand how the this keyword works in JavaScript.