Functions are reusable bits of code which are encapsulated so that you can easily call them by name when you need them. Here’s how they work in JavaScript, with examples.

What are Functions?

When programming, you will need to perform the same set of actions multiple times on different data. For example, you may need to perform a calculation on all of the rows in a table, or update the values in a list of objects.

It is not wise, or practical, to re-write the same code repeatedly throughout your application. Functions are a section of code which are assigned a name, and can accept and return data, allowing them to be re-used by calling them by name and passing data to them, then reading the result.

Declaring Functions in JavaScript

JavaScript functions are defined using the following syntax:

function NAME(PARAMETER){
    return VALUE;
}

Note that:

NAME is the name you wish to give the function
- It should be unique, not shared with any other function or variable
- It must be alphanumeric, and contain only letters, numbers, and underscores
PARAMETER is an optional list of parameters – variables you wish to make available inside the function
- Global variables will also be available within the function
An optional VALUE can be returned from the function for use outside of it
- Global variables modified inside the function will also retain any changes made within the function
Functions can be declared anywhere in code, and will be hoisted, making them available before they are declared

Function Expressions

There is an alternative syntax for defining functions, function expressions. Function expressions allow you to define a function which has the name omitted, creating an anonymous function. The function can then be assigned to a variable rather than being a named function.

let myFunction = function(PARAMETER){
    return VALUE;
}

Why Use Function Expressions?

Functions exist in the global scope. Function expressions however, can exist only in the current scope – meaning that you can declare a function expression inside another function, or a loop, or other scoped block and it will only be available there, rather than clogging up the global scope.

The function is declared, and then forgotten about when it is no longer required as part of normal garbage collection, which can also keep code efficient.

Functions created using function expressions are not hoisted, so they must be declared before they are used.

Arrow Function Expression Syntax

A popular shortcut for declaring function expressions is arrow syntax:

let myFunction = (PARAMETER) => {
    return VALUE
}

It is simply shorthand – rather than writing function(PARAMETER) an arrow => is used between the brackets and curly brackets containing the function code.

Using Functions [Examples]

Below, functions are declared both using function declarations, function expressions, and function expression arrow syntax:

// Declare a function
function multiplyFunction(a, b){
    return a * b;
}

// Assign a function expression to a variable
let addFunction = function(a, b) {
    return a + b;
}

// Assign a function expression to a variable, with arrow syntax
let subtractFunction = (a, b) = > {
    return a - b;
}

The functions are all called the same way:

multiplyFunction(2, 3); // 6
addFunction(2, 3); // 5
subtractFunction(2, 3); // -1

SHARE:

Related Articles

JavaScript Functions Tutorial, With Examples