What Are Functions?

Functions are reusable blocks of code.

They help avoid repetition.

Example

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

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

Output

5

Function Declaration

A function declaration defines a named function using the function keyword.

Syntax

function functionName() {
  // code
}

Example

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

greet();

Output

Hello

Function Expression

A function expression stores a function inside a variable.

Syntax

const variableName = function () {
  // code
};

Example

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

greet();

Output

Hello

Side-by-Side Comparison

Function Declaration

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

Function Expression

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

Main Difference

What Is Hoisting?

Hoisting means JavaScript moves declarations to the top internally before execution.

Simple meaning:

Some things can be used before they appear in code

Function Declaration Hoisting

sayHello();

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

Output

Hello

This works because function declarations are hoisted.

Function Expression Hoisting

sayHello();

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

Output

Error

Why?

Only the variable is hoisted, not the function value.

Hoisting Visualization

Function Call Flow

Practical Example

Declaration

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

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

Expression

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

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

Output

20

When to Use Function Declarations

Good for:

• General reusable functions

• Utility functions

• Functions used across file

Example

function calculateTotal() {
  // logic
}

When to Use Function Expressions

Good for:

• Callbacks

• Dynamic assignments

• Modern JavaScript patterns

Example

button.addEventListener("click", function () {
  console.log("Clicked");
});

Common Beginner Mistake

Incorrect:

const add(a, b) = function {
}

Correct:

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

Assignment

1. Function Declaration

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

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

2. Function Expression

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

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

3. Try Calling Before Definition

Declaration

sayHi();

function sayHi() {
  console.log("Hi");
}

Works.

Expression

sayHi();

const sayHi = function () {
  console.log("Hi");
};

Throws error.

Comparison Table

Key Takeaways

Final Notes

Both declarations and expressions are important in JavaScript.

Modern JavaScript heavily uses function expressions because they work well with:

• Callbacks

• Arrow functions

• Event handlers

• Async programming

• Functional programming patterns