JavaScript Function Expression

Introduction

In JavaScript, functions are a core concept used to organize and reuse code. While most beginners start with function declarations, another equally important and widely used approach is the function expression.

Function expressions provide flexibility and are heavily used in modern JavaScript, especially when working with callbacks, event handlers, and frameworks like React.

In this guide, you’ll learn everything about JavaScript function expressions, including syntax, types, examples, real-life use cases, common mistakes, and interview questions.

What is a Function Expression?

A function expression is a function that is assigned to a variable. Unlike function declarations, function expressions are not defined using a standalone statement—they are part of an expression.

function expression does not follow the Hoisting Rule, while a normal function follows the Hoisting Rule.

If you call the function first, after that defined the function expression then it will show an error.

Syntax of Function Expression

const functionName = function(parameters) {
   // code to execute
   return value;
};

Example:

const greet = function() {
   console.log("Hello, World!");
};
greet();

In the example above, the function is stored in the variable greet.

Output:

Function Expression with Parameters

When you pass parameters into a function Expression.

const greet = function(name) {
   return "Hello " + name;
};
console.log(greet("John"));

Output:

Function Expression vs Function Declaration

Function Declaration and Function Expression Example:

Function Declaration:

sayHello();

function sayHello() {
   console.log("Hello");
}

Output:

Function Expression:

sayHello(); // Error

const sayHello = function() {
   console.log("Hello");
};

Output:

Note:  Function expressions are not hoisted, so they cannot be called before definition.

Types of Function Expressions

There are many types of Function Expressions.

1. Anonymous Function Expression

A function without a name.

const add = function(a, b) {
   return a + b;
};

2. Named Function Expression

A function with a name inside the expression.

const factorial = function fact(n) {
   if (n <= 1) return 1;
   return n * fact(n - 1);
};

Note: The name fact is only accessible inside the function.

3. Arrow Function Expression (ES6)

A shorter version of a function expression.

const multiply = (a, b) => a * b;

Function Expression as Callback

Function expressions are widely used as callbacks.

setTimeout(function() {
   console.log("Executed after 2 seconds");
}, 2000);

Real-Life Examples

I will show you some Real Life Examples.

1. Button Click Event

document.getElementById("btn").addEventListener("click", function() {
   alert("Button clicked!");
});

2. Array Methods

multiple of 2 on each element of the Array.

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
   return num * 2;
});

Advantages of Function Expressions

You will see some advantages of Function Expressions

1. More flexible than declarations
2. Useful in callbacks and events
3. Can be anonymous
4. Better control over execution
5. Supports functional programming

Disadvantages of Function Expressions

You will see some disadvantages of Function Expressions.

1. Not hoisted.
2. It can cause errors if used before the definition.
3. Slightly harder for beginners.

Common Mistakes

1. Calling Before Definition

greet(); // Error
const greet = function() {};

2. Forgetting Semicolon

const greet = function() {}

3. Missing Return Statement

const add = function(a, b) {
   a + b;
};

Function Expression vs Arrow Function

Javascript Function expression – Interview Questions

Javascript Function expression – Objective Questions (MCQs)

Conclusion

JavaScript function expressions are a powerful and flexible way to define functions. They are widely used in modern development, especially in callbacks, asynchronous programming, and functional programming patterns.

By understanding function expressions, along with their advantages and limitations, you can write more dynamic and efficient JavaScript code.