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

Functions are one of the most important building blocks in JavaScript. They help us organize code, avoid repetition, and make programs easier to understand and maintain.

---

What Are Functions?

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

Instead of writing the same code multiple times, we can place it inside a function and reuse it whenever needed.

Example

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

greet();

Here:

• greet is the function name

• The code inside {} runs when the function is called

• greet() is the function call

---

Why Do We Need Functions?

Functions are useful because they help us:

• Avoid repeating code

• Organize programs into smaller pieces

• Make code easier to read and maintain

• Reuse logic multiple times

Example without a function:

console.log("Hello John");
console.log("Hello Sarah");
console.log("Hello Alex");

Using a function:

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

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

This makes the code cleaner and reusable.

---

Function Declaration Syntax

A function declaration defines a function using the function keyword followed by a name.

Syntax

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

Example

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

let result = add(5, 3);
console.log(result); // 8

Here:

• add is the function name

• a and b are parameters

• return sends the result back

---

Function Expression Syntax

A function expression is when a function is stored inside a variable.

Syntax

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

Example

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

console.log(multiply(4, 3)); // 12

Here:

• multiply is a variable

• The function is assigned to that variable

---

Key Differences Between Function Declaration and Expression

Feature	Function Declaration	Function Expression
Name required	Yes	Not always
Stored in variable	No	Yes
Hoisted	Yes	No
When defined	Before execution	At runtime

Example:

// Function Declaration
function greet() {
  console.log("Hello");
}

// Function Expression
const greet = function() {
  console.log("Hello");
};

---

Idea of Hoisting (High Level)

Hoisting means JavaScript moves certain declarations to the top of the scope before code execution.

Because of this, function declarations can be called before they appear in the code.

Example

sayHello();

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

This works because the function declaration is hoisted.

However, function expressions are not hoisted in the same way.

Example:

sayHello(); // Error

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

Here, JavaScript cannot call the function before the variable is defined.

---

When to Use Each Type

Use Function Declarations When:

• want a reusable function

• The function should be available anywhere in the file

• want cleaner, traditional syntax

Example:

function calculateArea(width, height) {
  return width * height;
}

---

Use Function Expressions When:

• want to store functions inside variables

• need functions inside other functions

• are working with callbacks or event handlers

Example:

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