Difference between FD and FE

JavaScriptJunior~1 min read

1. Function Declaration

Example:

javascript

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

Features:

Hoisted - i.e. the function is available before the point of its declaration.
The function name is fixed and available in the current scope.
Can be called anywhere in the file or block, even before the declaration code.

Example of hoisting:

javascript

greet(); // works, even though the function is declared below

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

Result:

javascript

Hello!

2. Function Expression

Example:

javascript

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

or the arrow version:

javascript

const sayHello = () => console.log("Hello!");

Features:

Not hoisted like a declaration - the variable is created, but the function in it is not available until initialization.
Can be anonymous (without a name) or named.
Considered an expression, so it is called only after assignment.

Example:

javascript

sayHello(); // Error: sayHello is not a function

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

Key differences

Property	Function Declaration	Function Expression
Hoisting	Available before declaration	Not available until assignment
When created	On scope initialization	During line execution
Can be called before declaration?	Yes	No
Function name	Required (a declaration is always named)	Can be anonymous or named
Suited for	Main functions needed everywhere	Local functions, passed as arguments, callbacks
Usage example	`function sum(a,b){}`	`const sum = (a,b)=>{}`

3. Example for visual comparison

javascript

// --- Function Declaration ---
sayHi(); // Works

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

// --- Function Expression ---
sayBye(); // Error

const sayBye = function() {
  console.log("Bye!");
};

Function Declaration - when the function is needed globally and can be called anywhere. Function Expression / Arrow Function - when the function is needed locally, as a handler, callback, or part of an expression.

Key takeaway

function declaration - created in advance (hoisting). function expression - created at the moment of execution.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.