What are the different ways to declare a function in JavaScript?

beginner

Re-explain

The main ways are a function declaration, a function expression and an arrow function. The Function constructor also works but is rarely used.

A declaration is hoisted whole, so you can call it before its line.
An expression assigns a function to a variable, so it exists only after that line runs.
An arrow function is a shorter expression that takes this from the surrounding code.
The Function constructor builds a function from a string at runtime.

// Function declaration
function myFunction() { }
// Function expression
const myFunction2 = function() { };
// Arrow function
const myFunction3 = () => { };
// Function constructor (rarely used)
const myFunction4 = new Function('return 1');

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for JavaScript One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

What happens if you call a function declaration and a function expression before the line that defines them? A declaration is hoisted whole. A const expression is in the temporal dead zone and throws ReferenceError. A var one is undefined and throws TypeError.
Apart from the shorter syntax, how is an arrow function different from a regular function? Arrows take this from the surrounding code. They have no own arguments and no prototype, and new can't call them, so they make poor object methods.
Why would you give a function expression its own name? The name exists only inside the body, so the function can call itself even if the outer variable is reassigned.
Why is the Function constructor so rarely used in real code? It parses a string at runtime, like eval. Its body sees only globals, not local variables, and a strict CSP blocks it.
Where do object methods, generators and async functions fit into these ways of declaring a function? Name the method shorthand in objects and classes, function* generators and async functions, and say what each one adds.

What you can say

Day to day there are three ways: a function declaration, a function expression and an arrow function. There's also the Function constructor, but almost nobody uses it.
A declaration is hoisted whole, so I can call it above the line where it's written.
An expression assigns a function to a variable, so the function only exists after that line runs.
An arrow function is a shorter expression, and it takes this from the surrounding code instead of getting its own.
The Function constructor builds a function from a string at runtime.
So I choose by behavior. I use a declaration when I want hoisting and an arrow for callbacks that need the outer this. I avoid the constructor because it evaluates strings like eval.

Weak answers to avoid

Lists four snippets and no behavior Syntax alone shows memorization. Say what changes between them: declarations are hoisted, and an arrow takes this from the surrounding code.
Calls arrow functions just shorter syntax Arrows don't get their own this. Used as an object method, this won't point at the object. Leave that out and the answer is incomplete.
Says every function is hoisted Only declarations are hoisted whole. An expression stored in const or let throws if you call it early, and one stored in var is still undefined.
Treats the Function constructor as a normal choice It evaluates a string at runtime like eval, which brings security and debugging problems. Say it exists and that you would avoid it.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the JavaScript cheatsheet.

← Back to all JavaScript questions

Pro · $10/mo

110 of 126 JavaScript answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →