Learn to Use Function as Variable in JavaScript

Introduction to Functions as Variables in JavaScript

When diving into JavaScript, one quickly encounters different ways to declare functions. A common question arises: what’s the difference between var functionName = function() {} and function functionName() {}? This article will explore these two methods, often referred to as function expressions and function declarations, clarifying their distinctions, advantages, and potential pitfalls.

Understanding Function Expressions

Function expressions in JavaScript are a versatile way to define functions. They are particularly useful when you need to assign a function to a variable. Consider this example:

let greet = function(name) {
  return `Hello, ${name}!`;

console.log(greet("Alice")); // Output: "Hello, Alice!"

In this scenario, the function is created and assigned to the variable greet. This approach offers flexibility, such as reassigning the variable to a different function later.

Exploring Function Declarations

Function declarations, on the other hand, are more traditional and straightforward. They are hoisted to the top of their scope, making them accessible throughout the scope:

console.log(welcome("Bob")); // Output: "Welcome, Bob!"

function welcome(name) {
  return `Welcome, ${name}!`;

This code snippet demonstrates how a function declaration can be invoked even before its definition in the code, thanks to JavaScript’s hoisting mechanism.

Comparing the Two Methods

The primary difference lies in when the functions are defined. Function expressions (var functionName = function() {}) are defined when the execution reaches that line of code. Conversely, function declarations (function functionName() {}) are defined at the start of the surrounding function or script due to hoisting.

Pros and Cons

Each method has its advantages. Function expressions offer more control and flexibility, while function declarations provide clarity and consistency. However, function expressions can lead to errors if called before they are defined, and function declarations might lead to unexpected results due to hoisting.

Practical Examples

Let’s consider a practical scenario:

let calculateSum = function(a, b) {
  return a + b;

let calculateProduct;
console.log(calculateSum(2, 3)); // Outputs: 5

calculateProduct = function(a, b) {
  return a * b;

console.log(calculateProduct(2, 3)); // Outputs: 6

Here, calculateSum and calculateProduct demonstrate the dynamic nature of function expressions.


In conclusion, understanding the difference between function expressions and declarations is crucial for effective JavaScript coding. Both have their place in a developer’s toolbox, and knowing when to use each can greatly enhance the functionality and readability of your code.


What is the basic function syntax in JS?

In JavaScript, a basic function is declared using function functionName() {} syntax, defining the function’s name and body.

Can a function in JavaScript be used as a variable?

Yes, functions in JavaScript can be assigned to variables, known as function expressions, e.g., var myFunction = function() {};.

How do you declare a function in JavaScript?

A function in JavaScript is declared with the function keyword, followed by the function name and parentheses, e.g., function myFunction() {}.

Can you assign a function to a variable in JavaScript?

Yes, in JavaScript, you can assign a function to a variable, creating a function expression, like let myFunc = function() {};.

Leave a Comment