Assign a Function to a Variable in JavaScript

Assigning a function to a variable allows us to use the function as a value, pass the function as an argument, or return it from other functions.

In this blog post, we will dive deep into the syntax, benefits, and best practices of assigning a function to a variable in JavaScript.

There are several ways to assign a function to a variable in JavaScript:

1. Using the function expression (anonymous function)
2. Using arrow function
3. Using function declaration

Using the function expression (anonymous function)

A function expression is a way to define a function as a value and assign it to a variable. It is also known as an anonymous function because it doesn’t have a name associated with it.

Here is a syntax for a function expression:

var functionName = function(parameters) {
   // Function body
}

Below is an example of a function expression that adds two numbers:

var addNum = function(a, b) {
    return a + b;
}

console.log(addNum(2, 4));   // Output: 6

When functions are stored in variables, they can be invoked or called using the variable name followed by parentheses.

Using arrow function

An arrow function is a concise and efficient way to write functions in JavaScript. It provides a shorter syntax compared to traditional function expressions.

Below is the syntax for the arrow function:

var functionName = (parameters) => {
   // function body
}

Below is an example of an arrow function that adds two numbers:

var addNum = (a, b) => {
    return a + b;
}

console.log(addNum(2, 4));   // Output: 6

An arrow function doesn’t require the use of the function keyword, and if the function body consists of a single statement, we can omit the return keyword and curly brackets.

Let’s take a look at an example:

var addNum = (a, b) => a + b;

console.log(addNum(4, 4));   // Output: 8

Note: The use of the const keyword is recommended for arrow functions to ensure immutability, but let or var can also be used.

Using function declaration

We can also assign a function to a variable using a function declaration. In this method, we first declare a function using a function keyword and assign it to a variable.

Here is an example:

function hello() {
    console.log("hello bro");
}

var greet = hello;

greet();

Now, the variable greet holds a reference to the hello function. We can call the function using the variable name followed by a parentheses greet().

Difference between function declaration, function expression, and arrow function

We will only discuss hoisting in this guide.

Hoisting:

Hoisting in JavaScript is a behavior where variables and function declarations are moved to the top of their respective scopes during the compilation phase. This means that variables and functions can be accessed and used before they are declared.

Function declarations in JavaScript are hoisted meaning they can be called before they are declared. 

Let’s take a look at an example:

// Function called before it is defined
hello();  // Output: Hello bro

function hello() {
    console.log("Hello bro");
}

Function expressions in JavaScript are not hoisted meaning they must be defined before they are called. Otherwise, it will throw an error.

Let’s take a look at an example:

// function called before defined. Thrown an error
greet();

var greet = function() {
    console.log("Hello bro");
}

// greet();  // Works fine if called here

Arrow functions in JavaScript are also not hoisted. So they must be defined before they are called.

Let’s take a look at an example:

// function called before defined. Thrown an error
greet();

var greet = () => {
    console.log("Hello bro");
}

// greet();  // works fine if called here