Function Declaration vs Function Expression in JavaScript (Beginner Friendly Guide)

You might have heard developers say something like this:

Write your code in a way that it stays readable and non-repetitive.

But what does repetitive code actually mean? Why do developers try to avoid it? And most importantly, how can we write code that avoids repetition? Let’s uncover the idea behind this step by step.

Programming often involves performing the same task multiple times. For example, imagine we want to add two numbers in different parts of a program. We might write something like this:

let result1 = 5 + 3;
console.log(result1);

let result2 = 10 + 7;
console.log(result2);

let result3 = 2 + 9;
console.log(result3);

This works perfectly fine. But notice something interesting here. Every time we want to add two numbers, we are writing the same logic again and again. Now imagine a bigger program where we need to perform this task dozens of times.

Would we keep rewriting the same code every time? That would quickly make our program long, repetitive, and difficult to maintain. So the natural question becomes:

Is there a way to write the logic once and reuse it whenever we need it?

And the answer is: Yes, and that is exactly where Functions come in.

---

What is a Function?

A function is simply a reusable block of code designed to perform a specific task.

Instead of writing the same logic again and again, we can place that logic inside a function and reuse it whenever we need it.

Let’s see a simple example.

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

At first glance, this might look a little unfamiliar. But let’s break it down slowly.

• function is the keyword used to create a function.

• add is the name of the function.

• (a, b) are called parameters — they act as inputs to the function.

• The code inside { } is the body of the function.

• return sends the result back when the function is executed.

So this function simply adds two numbers and returns the result.

But defining a function is not enough. We also need to call the function to use it.

Example:

console.log(add(5, 3));
console.log(add(10, 7));
console.log(add(2, 9));

Output:

8
17
11

Notice something interesting here. Instead of rewriting the addition logic multiple times, we simply call the same function with different values.

This keeps our code:

• shorter

• easier to read

• easier to maintain

Now the question arises. How does JavaScript execute add()? Let’s understand what happens when this line runs:

add(5, 3);

JavaScript does the following:

1. It finds the function named add.

2. It sends the values 5 and 3 as inputs.

3. Inside the function, a = 5 and b = 3.

4. The function calculates a + b.

5. The result 8 is returned.

Analogy

You can think of a function like a machine. You give it some inputs, the machine processes them, and it produces an output.

For example:

5 , 3 → add() → 8

This is exactly how functions work.

Try it Yourself

Let’s try writing another function.

function greet(name) {
  return "Hello, " + name;
}

Now call it:

console.log(greet("Chirag"));
console.log(greet("Rahul"));

Output:

Hello, Chirag
Hello, Rahul

Here, the same function works with different inputs, producing different results. That’s the real power of functions.

---

Now that we understand what functions are, the next step is learning how they are written in JavaScript. Interestingly, JavaScript allows us to create functions in more than one way.

The two most common ways are:

1. Function Declaration

2. Function Expression

Let’s first understand function declarations, and then we’ll explore function expressions. At first they may look similar, but there are some important differences between them.

---

Function Declaration

The most common way to create a function in JavaScript is called a function declaration. In simple words, a function declaration means declaring a function using the function keyword followed by a name.

Syntax

A basic function declaration looks like this:

function functionName(parameters) {
  // code to execute
}

Let’s understand the parts of this syntax.

• function → the keyword used to declare a function

• functionName → the name of the function (make sure it's not a keyword)

• (parameters) → inputs that the function receives

• { } → the block of code that runs when the function is called

Example

Let’s create a function that multiplies two numbers.

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

Here’s what is happening:

• multiply is the name of the function

• a and b are parameters

• a * b performs the multiplication

• return sends the result back

But remember — declaring a function does not execute it. To actually run it, we must call the function, like this:

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

Output:

20
21

Step by Step Execution of multiply():

Let us take a look at the execution of multiply() in JavaScript.

multiply(4, 5);

Here JavaScript performs the following steps:

1. It finds the function named multiply.

2. It assigns the values 4 and 5 to parameters a and b respectively.

3. It executes the code inside the function body.

4. It calculates a * b.

5. The result is returned.

Looking easy? Let us take a real world analogy of function declaration and calling.

Analogy

You can think of a function declaration like creating a recipe. The recipe explains how to prepare a dish, but the dish is not made until someone actually follows the recipe.

Similarly:

• Declaring a function defines the instructions.

• Calling the function executes those instructions.

Try it Yourself

Now, I want you to rewrite this code and see the output.

function greet(name) {
  return "Hello, " + name + "!";
}

Now call it like this:

console.log(greet("Chirag"));
console.log(greet("Aman"));

Run this code and notice how the same function works with different inputs.

Now a question arises: can we call a function before declaring it? Well, my answer is: Why don't you try and see it yourself?

Try this code:

console.log(greet("Chirag"));
console.log(greet("Aman"));

function greet(name) {
  return "Hello, " + name + "!";
}

Did it work? If yes, let's see why.

Important Point

A key feature of function declarations in JavaScript is something called hoisting. This means the function can be called even before it's declared in the code.

For example:

console.log(add(2, 3));

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

Surprisingly enough, this still works. Don’t worry too much about how this happens for now, we’ll understand it briefly when we compare function declarations and function expressions.

---

So far we learned how to create functions using function declarations. But JavaScript also allows us to create functions in another way called function expressions.

They may look similar, but they behave slightly differently — especially when it comes to hoisting. Let’s explore Function Expressions next.

---

Function Expression

In simple terms, a function expression means creating a function and assigning it to a variable.

This might sound a little unusual at first, but remember something important about JavaScript:

In JavaScript, functions are treated like values.

This means a function can be assigned to a variable just like a number or a string.

Syntax

A basic function expression looks like this:

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

Let’s understand the parts of this syntax.

• const functionName → the variable that stores the function

• function → the keyword used to create the function

• (parameters) → inputs that the function receives

• { } → the body of the function

Notice one small but important difference here. Instead of giving the function a name directly, we assign the function to a variable.

Example

Let’s write the same multiplication logic using a function expression.

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

Here’s what is happening:

• multiply is the name of the variable.

• the function is stored inside that variable

• a and b are the parameters

• the function returns the product of the two numbers

And we can call the function like this:

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

Output:

20
21

Notice that even though the function is stored inside a variable, we still call it using the variable name.

Step by Step Execution of multiply():

Let us take a look at the execution of multiply() in JavaScript.

multiply(4, 5);

Here JavaScript performs the following steps:

1. It finds the variable named multiply.

2. That variable contains a function.

3. The values 4 and 5 are passed as inputs.

4. Inside the function, a = 4 and b = 5.

5. The function calculates a * b.

6. The result 20 is returned.

As you can see, the execution process is almost the same as a function declaration.

Analogy

You can think of a function expression like storing a tool inside a toolbox. The variable acts like the label on the toolbox, and the function is the tool inside it. Whenever you need the tool, you simply open the toolbox and use it.

Similarly, when we call multiply(), we are simply using the function stored inside that variable.

Try it Yourself

Now try writing this code yourself and observe the output.

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

Now call it:

console.log(subtract(10, 4));
console.log(subtract(7, 2));

Run this code and notice how the function behaves exactly like the one we created using a function declaration. So at first glance, both approaches seem very similar.

But there is one important difference between function declarations and function expressions. Want to know how? Let us understand how function declarations and function expressions are slightly different.

---

Important Difference

Function declarations can be called before they appear in the code, but function expressions cannot.

For example, this will cause an error:

console.log(multiply(2, 3));

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

This happens because function expressions are not hoisted in the same way as function declarations.

Don’t worry too much about the technical details right now. We just need to remember this simple rule to understand their difference:

Function declarations are hoisted, but function expressions are not.

---

Now that we understand both approaches, let’s compare them side by side to clearly see their differences.

---

Function Declaration vs Function Expression

So far, we have explored two ways of creating functions in JavaScript:

1. Function Declaration

2. Function Expression

At first glance, they may look very similar. Both allow us to define reusable blocks of code and call them when needed. However, there are a few important differences between them.

Let us look at both approaches side by side.

Example Comparison

Function Declaration:

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

Function Expression:

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

In both cases, the function performs the same task. The only difference is how the function is created and stored.

• In the first example, the function is declared directly using the function keyword.

• In the second example, the function is assigned to a variable.

Key Differences

Feature	Function Declaration	Function Expression
How it is created	Declared using the function keyword	Function is assigned to a variable
Hoisting	Can be called before it appears in the code	Cannot be called before it is defined
Common usage	Used for general reusable functions	Often used when functions are stored in variables

Understanding the Hoisting Difference

One of the biggest differences between these two approaches is hoisting.

Let us see an example.

1. Function Declaration

console.log(add(2, 3));

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

Output:

5

Even though the function appears after the call, the code still works. This happens because function declarations are hoisted.

In simple terms, JavaScript is able to recognize the function before the code actually reaches its definition.

2. Function Expression

Now let’s try the same thing with a function expression.

console.log(add(2, 3));

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

Output:

ReferenceError: add is not defined

This time, JavaScript throws an error. Why?

Because the variable add does not contain the function until the assignment happens. So when JavaScript tries to execute add(2, 3), the function does not exist yet.

When Should You Use Each?

Both approaches are valid, and both are commonly used in JavaScript. However, they are useful in slightly different situations.

Use function declarations when:

• You want to define a reusable function in your program

• The function is a core part of your logic

Use function expressions when:

• You want to store a function inside a variable

• You are passing functions as values

• You are working with callbacks or dynamic behavior

In practice, modern JavaScript code often uses function expressions with const, because it makes the code more predictable.

---

Practice Time

Write a function declaration that multiplies two numbers.

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

Now write the same logic using a function expression.

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

Call both functions and print the result.

console.log(multiply(4, 6));
console.log(multiplyExpr(4, 6));

Try calling both functions before defining them and observe what happens. This small experiment clearly shows the difference between function declarations and function expressions.

---

Wrapping Up

In this article, we explored how functions help us avoid repetitive code by allowing us to write logic once and reuse it whenever needed.

We learned two common ways of creating functions in JavaScript:

• Function Declarations, where a function is defined directly using the function keyword.

• Function Expressions, where a function is assigned to a variable.

We also saw an important difference between them: hoisting. Function declarations can be called before they appear in the code, while function expressions cannot. Try experimenting with the examples in this article to better understand how these two approaches behave.

---

What's Next?

Now that we know how to create functions using declarations and expressions, the next step is learning about Arrow Functions. Arrow functions provide a shorter and more modern way to write functions in JavaScript.

In the next article, we’ll explore how arrow functions work and when to use them.

---

⬅ Previous Article: Control Flow in JavaScript
➡ Next Article: Arrow Functions in JavaScript