Function Declaration vs Function Expression

When learning JavaScript, functions can be a bit confusing at first. You'll hear terms like function declaration, function expression, and hoisting. This article explains these simply and practically.

What Are Functions and Why Do We Need Them?

Before understanding what functions are, it’s important to understand why we need them.

Imagine writing the same block of code again and again in different places. If it’s just 2–3 lines, it may not feel like a big problem. But when that same logic grows to 50 or 100 lines, repeating it multiple times makes the code messy, hard to manage, and difficult to update.

This is where functions come in.

A function is like a shared water tap. Instead of everyone storing water separately, anyone who needs water can simply use the tap. In the same way, a function allows us to write a block of code once and reuse it whenever and wherever we need it.

Inside a function, we can place any logic we want, and then call that function in different parts of our program. This makes our code reusable, cleaner, and easier to maintain.

Let's understand function with a simple example:-

let a = 1;
let b = 2;
let sum = a + b;
console.log(sum);

In this code, we take two variables a and b, add them together, store the result in another variable, and then print the sum to the console. This works fine for a simple example.

But imagine we need to add two numbers many times in our program. Each time, we would have to create new variables, write the same addition logic again, and log the result. Doing this repeatedly is not a good way to write code. It makes the code longer, harder to read, and difficult to maintain.

This is where functions come into the picture.

Instead of writing the same logic again and again, we place the logic inside a function. Then, whenever we need to add two numbers, we simply call that function and pass the values.

function sumofTwo(a, b) {
  console.log(a + b);
}
sumofTwo(2, 2);

Here, the logic of adding two numbers is written once inside the function. Whenever we want to calculate the sum of any two numbers, we just pass the values as arguments. This makes our code reusable and clean.

Explanation of Each Part of the Syntax

1.function

function sumOfTwo(a, b) {

• function is a keyword used to define a function.

• It tells JavaScript that we are creating a reusable block of code.

2. sumOfTwo

function sumOfTwo(a, b) {

• sumOfTwo is the name of the function.

• This name is used to call the function later.

• Function names usually describe what the function does.

3.Parameters (a, b)

function sumOfTwo(a, b) {

• a and b are parameters.

• They act like placeholders for values that will be provided later.

• These values are not fixed; they change every time the function is called.

4.Function Body { }

{
  console.log(a + b);
}

• Everything inside {} is the function body.

• This is where we write the logic that should run when the function is called.

5. console.log(a + b)

console.log(a + b);

• This line adds the values of a and b.

• The result is printed to the console.

6. Calling the Function

sumOfTwo(2, 2);

• This line calls the function.

• 2 and 2 are called arguments.

• These values are assigned to a and b respectively.

So internally, JavaScript does this:

a = 2;
b = 2;

Then it runs:

console.log(2 + 2);

What is hoisting

Hoisting is a JavaScript behavior where the JavaScript engine prepares the code before executing it. During this preparation, JavaScript moves certain declarations to the top of their scope.

Because of hoisting, some code works even when it appears to be written before it is defined.

sayHello();

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

This code will work because function declarations are fully hoisted. Before execution, JavaScript already recognizes the sayHello function, allowing it to be called from anywhere in the file.

In simple terms, hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution.

Function declaration

There are mainly two ways to write functions in JavaScript. One of them is called a function declaration. This is the default and most common way of writing a function.

In the previous example, where we wrote a function to add two numbers, we used a function declaration.

One important feature of function declarations is that we can call the function before it is defined in the code. This happens because function declarations are hoisted by JavaScript.

Example

addNumbers(2, 3);

function addNumbers(a, b) {
  console.log(a + b);
}

Even though the function is called before it is written, the code works correctly. This behavior is specific to function declarations and does not apply to all types of functions.

Function Expression

There are mainly two ways to write functions in JavaScript. One of them is called a function expression.

In a function expression, a function is stored inside a variable. Instead of giving the function a name directly, we assign it to a variable, and that variable is used to call the function.

Unlike function declarations, function expressions cannot be called before they are defined in the code. This is because function expressions depend on variables, and variables are not fully available before initialization.

Example

addNumbers(2, 3); 

const addNumbers = function (a, b) {
  console.log(a + b);
};

The code above throws an error because the function is called before the variable addNumbers is assigned a function.

The correct way to write it is this

const addNumbers = function (a, b) {
  console.log(a + b);
};

addNumbers(2, 3); // ✅ Works

Here, the function works correctly because it is called after the function expression is defined.

Key differences between declaration and expression

Conclusion

In this article, we learned what functions are and why they are such an important part of JavaScript. Functions allow us to write a block of code once and reuse it many times, which makes our code cleaner, shorter, and easier to maintain.

We explored the two main ways of writing functions in JavaScript: function declarations and function expressions. We saw that function declarations are more beginner-friendly and can be used before they are defined, while function expressions are stored in variables and must be used only after they are created.

We also understood the basic idea of hoisting and why some functions work even when they appear earlier in the code. Hoisting explains how JavaScript prepares functions and variables before executing the program.