Function Declaration vs Function Expression

In this article we'll learn about function declaration, function expression and the difference between them. Before jumping on the topic itself let's understand the function meaning and it's use. Functions are nothing but reusable block of code. We make them to perform repeated work efficiently. It help us follow the important rule of 'DRY' (DO NOT REAPEAT YOURSELF).

If you want to add two numbers, you will probably write it like this:

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

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

But if you have to get multiple sum of 2 numbers then the code become redundant and messy which becomes hard to manage.

That is where we write function:

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

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

Now we can reuse the same function whenever we need to add two numbers.

Function Declaration

One common way to create a function is using a function declaration.

Example:

function greet() {
  console.log("Hello, welcome to JavaScript!");
}

To run the function, we simply call it:

greet();

Output:

Hello, welcome to JavaScript!

Functions can also accept parameters.

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

greet("Sam");

Output:

Hello Sam

Function Expression

Another way to create a function is using a function expression.

Here, the function is stored inside a variable. If you still have doubt about what is a variable then I would recommend you read this blog first to get the hang of things here.

Example:

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

greet();

Output:

Hello from function expression

We can also pass parameters here:

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

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

Output:

Important difference between function declaration and expression

Syntax difference
- Function declaration is defined directly using the function keyword.
- Function expression stores the function inside a variable.
Hoisting
- Function declarations are hoisted, so they can be called before they are defined.
- Function expressions are not hoisted in the same way, so they must be defined before they are called.
Usage
- Function declarations are commonly used for reusable functions in a program.
- Function expressions are often used when functions need to be assigned to variables or used as callbacks.
Readability
- Function declarations are usually easier to read in larger programs.
- Function expressions provide more flexibility in certain situations.

Basic Idea of Hoisting

Hoisting is the behaviour where all the function declaration are moved to the top of their scope.

This means we can call a function declaration before it appears in the code.

Example:

sayHello();

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

This works because JavaScript internally treats it like:

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

sayHello();

However, function expressions are not hoisted in the same way, so they must be defined before being used.

Summary

Functions are one of the most important concepts in JavaScript. They allow us to group reusable logic into a single block of code and call it whenever needed.

By understanding function declarations, function expressions, and the basic idea of hoisting, we can write cleaner, more organized, and maintainable JavaScript programs.