Functions in JavaScript

08 Feb, 2020

A function is a JavaScript procedure — a set of statements that performs a task or calculates a value.

Function declarations

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

  1. The name of the function.
  2. A list of parameters to the function, enclosed in parentheses and separated by commas.
  3. The JavaScript statements that define the function, enclosed in curly brackets, {...}
function multiply(x, y) {
  return x * y;
}

Function Expressions

While the function declaration above is syntactically a statement, functions can also be created by a function expression.

Such a function can be anonymous; it does not have to have a name. For example, the function multiply could have been defined as:

const multiply = function (x, y) {
  return x * y;
}

multiply(5, 10) // 50

Function scope

Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined.

let a = 5, b = 10;

function multiply() {
  return a * b;
}

multiply(); // 50

Closures

Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).

However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function.

function sum (a, b) {
  if(b === undefined) {
	  return function (b) {
	    return a + b;
	  }
  }
  return a + b;
}

sum(2)(5)

Arrow functions

An arrow function expression (previously, and now incorrectly known as fat arrow function) has a shorter syntax compared to function expressions and does not have its own this, arguments, super, or new.target. Arrow functions are always anonymous.

Two factors influenced the introduction of arrow functions: shorter functions and non-binding of this.

// shorter functions
const multiply = (a, b) => a * b;
multiply(2, 5) // 10

// syntax 
const variable = (parameters) => {...statements}