What is the difference between a function declaration and a function expression?

Q: What is the difference between a function declaration and a function expression?

function greet(name) { console.log("Hello, " + name + "!"); } const multiply = function(a, b) { return a * b; }; Hoisting function expression depends on the variable used to store it if its a var it will be hoisted and initialised with undefined if its let or const it will be hoisted but suffer from TDZ

Difficulty: 4/10

hoisting, lexical scope, execution context

A function declaration is created using the `function` keyword and is hoisted to the top of its scope.

A function expression, on the other hand, involves defining a function as part of an expression. Here's an example of a function expression:

1
Hoisting function expression depends on the variable used to store it
2
if its a var it will be hoisted and initialised with undefined
3
if its let or const it will be hoisted but suffer from TDZ

Scenario Questions

0-2 years experience

1We have a utility file where we call a helper function at the top of the file, but the actual function is defined at the bottom. It works fine. But when we refactored it to a const arrow function, the app suddenly crashed with a ReferenceError. Why did this happen, and how would you fix it?
2Imagine you are writing a helper function inside a React component file. You want to decide whether to write 'function processItem(item) {}' or 'const processItem = (item) => {}'. How does your choice affect where you can place that helper relative to where it is called?

Follow-up Questions

How does the Temporal Dead Zone (TDZ) affect let/const function expressions compared to var-based expressions?
What happens to the 'this' context when you refactor a standard function declaration into an arrow function expression inside an object method?
How do modern JS engines handle block-scoped function declarations inside an 'if' statement?