JavaScript Function Expressions

In the previous topic, we learned how to create functions using a function declaration:

function greet() {
    console.log("Hello!");
}

JavaScript also allows us to create a function and store it inside a variable. This is called a function expression.

What is a Function Expression?

A function expression is a function that is created as part of an expression and assigned to a variable.

For example:

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

Here, the function is assigned to the greet variable.

We can then call it like a normal function:

greet();

Output:

Hello!

The important difference is that we're storing the function in a variable instead of declaring it directly with a function name.

Function Declaration vs Function Expression

Let's compare them.

Function Declaration

function greet() {
    console.log("Hello!");
}

greet();

Function Expression

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

greet();

Both can perform the same task.

Function Expressions with Parameters

Function expressions can accept parameters just like regular functions.

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

greet("John");
greet("Alex");

Output:

Hello, John
Hello, Alex

We can also use multiple parameters:

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

console.log(add(10, 20));

Output:

30

So function expressions support everything we've already learned about functions, including parameters and return values.

Anonymous Functions

In this example:

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

Notice that the function doesn't have a name:

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

This is called an anonymous function.

The function is accessed through the variable greet, so we don't need to give the function itself a name.

greet();

Anonymous functions are commonly used with function expressions and callbacks.

Functions Are Values in JavaScript

One of the interesting things about JavaScript is that functions can be treated like values.

For example:

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

We can store the function in another variable:

const anotherGreet = greet;

anotherGreet();

Output:

Hello!

We can also pass functions to other functions. This becomes extremely useful when working with callbacks, arrays, events, and asynchronous JavaScript.

Function Expressions and const

You'll commonly see function expressions written with const:

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

Why const?

Because we usually don't need to assign a completely different function to the variable later.

This is not allowed:

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

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

JavaScript will produce an error because add was declared with const.

If you specifically need to replace the function later, you could use let:

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

operation = function(a, b) {
    return a - b;
};

But in normal situations, const is preferred.

Function Expression vs Arrow Function

Modern JavaScript provides an even shorter syntax called an arrow function.

A normal function expression:

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

The equivalent arrow function is:

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

And because this function only returns one expression, we can shorten it further:

const add = (a, b) => a + b;

Arrow functions are technically a different function syntax with some important behavioral differences, especially around this. We'll cover those differences when we get to arrow functions.

Function Expressions as Arguments

One of the most useful things about function expressions is that we can pass a function directly to another function.

For example:

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

Here, we're passing an anonymous function to setTimeout().

The function runs after approximately 2 seconds.

This idea of passing a function to another function is called a callback, and it is a very important concept in JavaScript.

A Practical Example

Suppose we want to calculate the discount on a product.

const calculateDiscount = function(price, discount) {
    return price - (price * discount / 100);
};

let finalPrice = calculateDiscount(1000, 20);

console.log(finalPrice);

Output:

800

We created the function once and can reuse it:

console.log(calculateDiscount(500, 10));
console.log(calculateDiscount(2000, 25));

Output:

450
1500

This is exactly why functions are useful—write the logic once and reuse it wherever needed.

Conclusion

A function expression is a function assigned to a variable.

The basic syntax is:

const functionName = function(parameters) {
    // code
};

For example:

const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(5, 4));

Function expressions are especially important because JavaScript treats functions as values. This allows us to store functions in variables, pass them as arguments, and return them from other functions.

Once you understand function expressions, the next natural step is Arrow Functions, which provide a shorter and modern way to write functions.