Functions in JavaScript

What Are Functions in JavaScript?

A function in JavaScript is a potentially reusable set of expressions and statements which accepts an input of zero or more parameters and returns a value.

A function can be defined (aka declared) in two ways. The first way - available in both ES5 and ES6 - is to use 1) the function keyword along with optional function name, 2) zero or more function parameters enclosed in parenthesis and separated by commas, and 3) the block of code denoted with curly braces.

function sum(a, b) {
  return a + b
}

sum(2, 2) // => 4

A function without a name is considered to be an anonymous function.

(function(a, b) {
  return a + b
})(2, 2) // => 4

const sum = function(a, b) { return a + b }
sum(2, 2) // => 4

Returning Values

To return a specific value the keyword return has to be used. If no return value is specified a function returns this for constructor functions called with new and undefined for all other functions.

Passing Arguments

Primitive data types (such as numbers, strings, or booleans) are passed by value. Non primitive data types (such as objects or arrays) are passed through passing copied values of their references. Therefore, all arguments of any data types are passed by value.

It means that any changes to a value of an argument are not effective outside of the enclosing function body however that does not mean that it is not possible to change the object referenced by the argument.

const enterpriseCaptains = { best_captain: 'Picard' }

function replaceCaptains(captains) {
  captains = { best_captain: 'Hook' }
}
replaceCaptains(enterpriseCaptains)
enterpriseCaptains // => { best_captain: 'Picard' }

function changeCaptain(captains) {
  captains.best_captain = 'Janeway'
}
changeCaptain(enterpriseCaptains)
enterpriseCaptains // => { best_captain: 'Janeway' }

First Class Citizens

Functions in JavaScript are first class citizens which mean they can be a) passed as arguments to other functions, b) values returned by other functions, and c) pointed to by variables or stored as object property values.

When a function accepts another function as an argument and/or returns a function it is called a higher order function. Otherwise, it is called a first order function.

An example of a higher order function is a map function.

const numbers = [1,2,3]

numbers.map(function(number) { return number * 2 }) // => [2,4,6]

Hoisting

Function declarations are hoisted, initialized with the declared value and can be called in a given scope before their actual declaration. Compare it to hoisting of var, let, and const.

sum(2, 2) // => 4

function sum(a, b) { return a + b }

Recursion

A function can call itself in three ways: 1) through calling its declared name, 2) through calling the reference to itself, and 3) through calling arguments.callee from within its body.

Closures

Functions in JavaScript are closures which mean they carry with themselves variables, constants and function declarations declared outside of their bodies but used within their bodies.

Arrow Functions

Another way of declaring a function to a function keyword is using an arrow function notation that was introduced in ES6.

const sum = (a, b) => { return a + b }
sum(2, 2) // => 4

The curly braces and the return keyword can be omitted in a one line arrow function in which case the function always returns its body's expression.

const sum = (a, b) => a + b
sum(2, 2) // => 4

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.