What is the difference between Function Declaration and Function Expression?

Brief Answer

Function Declaration is a function declared separately as an instruction. Function Expression is a function created as part of an expression. Main difference: Function Declaration is fully hoisted, while Function Expression — only the variable is hoisted.

A function declared separately:

function sayHello() {
  return 'Hello!';
}

A function created as part of an expression:

const sayHello = function() {
  return 'Hello!';
};

Full Answer

The difference between Function Declaration and Function Expression is in how and when they are created. This is important for understanding how JavaScript works.

What is Function Declaration

A function declared separately:

function sayHello() {
  return 'Hello!';
}

What is Function Expression

A function created as part of an expression:

const sayHello = function() {
  return 'Hello!';
};

Main Differences

Function Declaration

Declared separately
Fully hoisted
Can be called before declaration

Function Expression

Created as part of expression
Only variable is hoisted
Can be called only after creation

Simple Examples

Function Declaration

// Can be called before declaration
console.log(sayHello()); // 'Hello!'
 
function sayHello() {
  return 'Hello!';
}

Function Expression

// Cannot be called before creation
console.log(sayHello()); // Error!
 
const sayHello = function() {
  return 'Hello!';
};

Important Features

1. Hoisting

// Function Declaration is fully hoisted
declared(); // Works
 
function declared() {
  console.log('Works');
}
 
// Function Expression — only variable is hoisted
// expressed(); // Error! expressed is still undefined
 
var expressed = function() {
  console.log('Doesn't work');
};

2. Scope

// Function Declaration visible everywhere in its scope
if (true) {
  function test() { return 'Works'; }
}
 
// Function Expression — only after declaration
if (true) {
  var expr = function() { return 'Works'; };
  // expr(); // Only can be called here
}

When to Use What

Function Declaration for main functions

// Main functions of program
function calculateSum(a, b) {
  return a + b;
}
 
function validateForm(data) {
  // validation logic
}

Function Expression for special cases

// Functions as values
const handlers = {
  click: function() { /* click handling */ },
  hover: function() { /* hover handling */ }
};
 
// Conditional creation
let sayHi;
if (condition) {
  sayHi = function() { return 'Hi!'; };
} else {
  sayHi = function() { return 'Hello!'; };
}

Common Mistakes

1. Attempting call before creation

// ❌ Error with Function Expression
console.log(myFunc()); // TypeError!
 
const myFunc = function() {
  return 'Result';
};
 
// ✅ Correct with Function Declaration
console.log(declaredFunc()); // Works
 
function declaredFunc() {
  return 'Result';
}

2. Confusion with var

// ❌ With var variable is hoisted, but value isn't
console.log(func()); // TypeError! func undefined
 
var func = function() {
  return 'Result';
};
 
// ✅ Function Declaration is fully hoisted
console.log(declared()); // Works
 
function declared() {
  return 'Result';
}

Simple Rules

Function Declaration — separate instruction, fully hoisted
Function Expression — part of expression, only variable hoisted
Call — Declaration can be called before declaration, Expression — only after
Hoisting — Declaration fully hoisted, Expression partially hoisted
Usage — Declaration for main functions, Expression for special cases

Understanding the difference helps write more predictable code and avoid errors with function declaration order.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪