Function Declaration vs Function Expression: What’s the Difference?

When people begin learning JavaScript, one concept shows up very early and becomes extremely useful almost immediately. That concept is functions.

If you think about it, most programs repeat certain actions again and again. Instead of writing the same code multiple times, JavaScript allows us to group that logic into a reusable block. That reusable block is called a function.

A function is simply a piece of code that performs a specific task. Once written, you can run it whenever needed. This makes programs easier to read, maintain, and reuse.

Imagine you frequently need to add two numbers in your program. Instead of writing the addition logic in many places, you can create a function once and call it whenever required.

Let us first see what a basic function looks like.

What Functions Are and Why We Need Them

A function allows us to wrap logic into a reusable block of code. When we want to run that logic, we simply call the function.

Here is a very small example that adds two numbers.

function addNumbers(a, b) {
    let result = a + b
    console.log("Sum is:", result)
}

addNumbers(5, 3)

Output

Sum is: 8

In this example, we created a function called addNumbers. The function accepts two values and prints their sum.

Functions help in three important ways. They reduce repetition, organize code better, and make programs easier to understand.

Now that we know what functions are, let us look at two different ways JavaScript allows us to create them.

Function Declaration

The first way to create a function is called a function declaration.

This is the most common style beginners learn.

Here is the syntax.

function greetUser(name) {
    console.log("Hello " + name)
}

greetUser("Aman")

Output

Hello Aman

In this example, the function greetUser is declared using the keyword function followed by the function name.

After defining the function, we call it using greetUser("Aman").

Function declarations are straightforward and easy to read. This is why they are commonly used when writing regular program logic.

Let us look at another small example.

function calculateArea(length, width) {
    let area = length * width
    console.log("Area is:", area)
}

calculateArea(4, 6)

Output

Area is: 24

The function takes two values, multiplies them, and prints the result.

Function Expression

The second way to create a function is called a function expression.

Instead of declaring the function directly, we store the function inside a variable.

Here is an example.

let greetUser = function(name) {
    console.log("Hello " + name)
}

greetUser("Neha")

Output

Hello Neha

In this case, the function is assigned to a variable called greetUser.

So instead of declaring the function directly, we create the function and store it inside a variable.

Here is another example with numbers.

let subtractNumbers = function(a, b) {
    let result = a - b
    console.log("Difference is:", result)
}

subtractNumbers(9, 4)

Output

Difference is: 5

Function expressions work almost the same way as function declarations when we call them. The main difference lies in how they are created and when they become available.

Declaration vs Expression Side by Side

To see the difference more clearly, look at these two examples.

Function declaration

function multiply(a, b) {
    let result = a * b
    console.log("Multiplication result:", result)
}

multiply(3, 5)

Output

Multiplication result: 15

Function expression

let multiply = function(a, b) {
    let result = a * b
    console.log("Multiplication result:", result)
}

multiply(3, 5)

Output

Multiplication result: 15

At first glance, both look very similar. They both perform the same job and produce the same result.

The difference becomes important when we talk about something called hoisting.

Basic Idea of Hoisting

Hoisting is a behavior in JavaScript where certain declarations are moved to the top of their scope during execution.

This may sound technical, but we can understand it with a simple experiment.

Let us try calling a function before defining it.

Example using a function declaration.

sayHello()

function sayHello() {
    console.log("Hello from declaration")
}

Output

Hello from declaration

Even though the function was written after the call, JavaScript still runs it successfully.

This happens because function declarations are hoisted. JavaScript internally prepares them before the code starts running.

Now try the same thing with a function expression.

sayHello()

let sayHello = function() {
    console.log("Hello from expression")
}

Output

Error occurs because sayHello is not a function yet

Here JavaScript throws an error. The function cannot be used before it is defined.

This happens because only the variable is hoisted, not the function stored inside it.

So when the program tries to run sayHello earlier, the function does not exist yet.

This is one of the biggest differences between function declarations and function expressions.

When Should You Use Each Type

Both styles are valid and widely used in JavaScript.

Function declarations are often used when you want to define general program logic that can be accessed anywhere in the file. They are easier to read and naturally hoisted.

Function expressions are useful when functions need to be treated like values. Since they are stored in variables, they can be passed around, returned from other functions, or stored inside objects.

In modern JavaScript development, function expressions are very common, especially when working with callbacks or event handling.

However, for beginners and for general logic, function declarations remain very simple and readable.

A Small Practice Exercise

The best way to understand these differences is by trying them yourself.

First write a function declaration that multiplies two numbers.

function multiplyNumbers(a, b) {
    let result = a * b
    console.log("Result from declaration:", result)
}

multiplyNumbers(6, 7)

Output

Result from declaration: 42

Now write the same logic using a function expression.

let multiplyNumbersExp = function(a, b) {
    let result = a * b
    console.log("Result from expression:", result)
}

multiplyNumbersExp(6, 7)

Output

Result from expression: 42

Finally try calling them before their definitions and observe the behavior.

You will notice that the declaration version works while the expression version throws an error.

Understanding this small difference helps you see how JavaScript prepares functions before execution.

Functions themselves are one of the most important building blocks of JavaScript. Whether you use declarations or expressions, the goal remains the same. You are organizing logic into reusable pieces so that your code becomes cleaner and easier to maintain.

Once you get comfortable with both styles, reading and writing JavaScript becomes much more natural.