Functions are where JavaScript actually starts feeling powerful — the moment you stop repeating the same code over and over and start writing it once, reusably. But JavaScript offers three distinct ways to write a function, and knowing when to reach for each one is a genuine skill.
What Is a Function?
A function is a reusable block of code that performs a specific task, which you can run (or “call”) whenever you need it, as many times as you need it, without rewriting the logic each time.
READ ALSO:
Function Declarations
A function declaration is the classic, most explicit way to write a function: function greet() { console.log("Hello"); }. Function declarations are “hoisted” — JavaScript makes them available even before the line they are written on, which can be genuinely useful for code organization.
Function Expressions
A function expression assigns a function to a variable: const greet = function() { console.log("Hello"); };. Unlike declarations, function expressions are not hoisted — they only become available after that specific line runs, which encourages more predictable, top-to-bottom code flow.
Hoisting isn’t magic — it is simply JavaScript processing function declarations before running the rest of the code. Function expressions deliberately opt out of that behavior.
Arrow Functions
Arrow functions, introduced in ES6, offer a shorter syntax: const greet = () => { console.log("Hello"); };. Beyond brevity, arrow functions handle the this keyword differently — they inherit it from their surrounding context rather than defining their own, which solves a specific, common source of confusion in older JavaScript code.
When to Use Each Type
- Function declarations — good for standalone, named functions used throughout a file, especially when hoisting is genuinely useful.
- Function expressions — useful when a function needs to be passed around as a value or conditionally defined.
- Arrow functions — the modern default for short functions, callbacks, and anywhere the traditional “this” behavior would cause problems.
A Side-by-Side Example
All three of these do the exact same thing:
function add(a, b) { return a + b; }
const add = function(a, b) { return a + b; };
const add = (a, b) => a + b;
The third version, an arrow function with an implicit return, is the most common style in modern React and Next.js codebases.
Frequently Asked Questions
Are arrow functions always better than regular functions?
Not always — arrow functions cannot be used as object constructors and handle “this” differently, which matters in specific situations like defining object methods.
Do function expressions and arrow functions get hoisted?
No — only function declarations are hoisted; both function expressions and arrow functions are only available after their line of code runs.
Which style do modern frameworks like React actually use?
Arrow functions dominate modern React and Next.js code, particularly for callbacks, event handlers, and component logic.
Want to continue building your JavaScript fundamentals? Explore more web development guides.