Loading...
Loading...
Reusable blocks of code. The building blocks of every JavaScript program.
Functions are reusable blocks of logic — the primary unit of organization in JavaScript. Parameters pass data in, return values send results out, and closures let functions remember their environment long after they were created.
Functions are reusable blocks of logic — declare them once, call them many times. Learn declarations vs expressions, parameters, return values, and why functions are first-class citizens in JavaScript.
Functions are the building blocks of every JavaScript application. Instead of repeating the same logic, you wrap it in a named block, pass in data, and get a result back. Arrow functions, default parameters, and rest/spread syntax make modern function code concise and readable.
This module also introduces closures — one of JavaScript's most powerful and misunderstood features. Interactive diagrams show how functions retain access to variables from their outer scope, which is essential for callbacks, event handlers, and module patterns.
Every JavaScript program is built from functions. They organize code, eliminate duplication, and enable abstraction. Understanding how to declare, name, and pass functions unlocks closures, callbacks, and the entire async model that follows.
Named, reusable blocks of code that perform a specific task.
A function is like a recipe — you define it once, then use it whenever you need it.
Without functions
console.log("Hello, Alice");
console.log("Hello, Bob");
console.log("Hello, Charlie");
// Repeat for every name...With a function
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");
greet("Bob");
greet("Charlie");The function keyword creates a function.
function functionName(parameters) { // function body — code to execute return result; // optional }
Anatomy of a function:
function greet(name) {
return "Hello, " + name;
}
// A function that adds two numbers: function add(a, b) { return a + b; } // A function with no parameters: function sayHello() { console.log("Hello!"); } // A function with no return (returns undefined): function logMessage(msg) { console.log(msg); // implicit: return undefined; }
Defining a function doesn't run it. You must call it.
// Defining ≠ Running function greet() { console.log("Hello!"); } // Nothing happens yet! // We must CALL it: greet(); // "Hello!" — NOW it runs greet(); // "Hello!" — runs again greet(); // "Hello!" — and again
// Click to call the function:
Called 0 times
💡 The parentheses () after the name are what executethe function. Without them, you're just referencing the function object, not running it.
// Reference vs Call: console.log(greet); // [Function: greet] — the function itself console.log(greet()); // "Hello!" — calls it, logs the return value
Good names make code self-documenting.
| Pattern | Examples |
|---|---|
| verb + noun | getUser, sendEmail, calculateTotal |
| is/has + adjective | isValid, hasPermission, isEmpty |
| handle + event | handleClick, handleSubmit |
| on + event | onLoad, onChange, onError |
✗ Bad names
function do()
function stuff()
function x(a, b)
function data()
✓ Good names
function processPayment()
function formatDate()
function add(a, b)
function fetchUserData()
Declarations are moved to the top of their scope.
// This works! Declaration is hoisted: greet(); // "Hello!" function greet() { console.log("Hello!"); } // JavaScript sees it as: // function greet() { ... } ← moved to top // greet(); ← then this runs
💡 Only function declarations are hoisted. Function expressions and arrow functions are NOT — they behave like regular variables.
// This does NOT work: sayHi(); // TypeError: sayHi is not a function const sayHi = function() { console.log("Hi!"); };
Test your understanding.
What does this return?
function add(a, b) {
return a + b;
}
add(3, 4);What is printed?
sayHi();
function sayHi() {
console.log("Hello");
}What does a function return if there's no return statement?
What is this called: function() {}?
Common questions about functions.
Step through the code and watch variables change
1function double(n) {2 const result = n * 2;3 return result;4}56const x = 5;7const y = double(x);8console.log(y);
No output yetJavaScript reads the function declaration and stores it in memory. The code inside is NOT executed yet.
Test your understanding — 3 questions
What will this output?
function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));