Skip to main content

Command Palette

Search for a command to run...

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

Updated
3 min read

Functions are one of the most important concepts in JavaScript.

They allow developers to reuse code instead of writing the same logic multiple times.

For example, if we need to calculate something like addition or multiplication multiple times, we can create a function and call it whenever needed.


What Are Functions?

A function is a reusable block of code that performs a specific task.

Example:

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

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

Output:

8

Here the function adds two numbers and returns the result.


Function Declaration

A function declaration defines a function using the function keyword with a name.

Syntax

function functionName(parameters) {
  // code
}

Example

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

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

Output

20

This is the traditional and commonly used way to define functions.


Function Expression

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, 5));

Output

20

Here the function is assigned to a variable.


Declaration vs Expression (Side-by-Side)

Function Declaration

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

Function Expression

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

Both produce the same output, but they behave slightly differently.


Basic Idea of Hoisting

In JavaScript, some declarations are moved to the top of their scope during execution.
This behavior is called hoisting.


Function Declaration (Hoisted)

You can call the function before it is defined.

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

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

Output

5

This works because function declarations are hoisted.


Function Expression (Not Hoisted)

Calling it before definition causes an error.

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

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

This will cause an error because the variable is not initialized yet.


Key Differences

Feature Function Declaration Function Expression
Syntax Uses function keyword Function stored in variable
Hoisting Yes No
Call before definition Works Causes error
Usage General functions Callbacks, dynamic functions

When to Use Each Type

Use Function Declaration

  • For general reusable functions

  • When you want the function available anywhere in the file

Example:

function calculateTotal(price, tax) {
  return price + tax;
}

Use Function Expression

  • When assigning functions to variables

  • When passing functions as arguments

Example:

const greetUser = function(name) {
  return "Hello " + name;
};

Assignment Practice

Function Declaration

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

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

Output

12

Function Expression

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

console.log(multiplyExp(3, 4));

Output

12

Try Calling Before Definition

Declaration (Works)

console.log(square(4));

function square(num){
  return num * num;
}

Expression (Error)

console.log(square(4));

const square = function(num){
  return num * num;
};

This will produce an error because function expressions are not hoisted.