A function is a named, reusable block of code. You write the steps once, then run (“call”) them whenever you need them, as many times as you like, with different inputs. JavaScript functions are the main building block of every program – almost everything you will write from now on lives inside one.
Why bother? Without functions, you would copy and paste the same lines every time you needed them, and fixing a bug would mean finding every copy. With a function, you fix it in one place. Functions also let you give a meaningful name to a group of steps, such as calculateGst or showError, which makes your code read almost like a description of what it does.
Declaring and calling a function
A function declaration starts with the function keyword, followed by a name, a list of parameters in round brackets and the body in curly braces. Parameters are placeholders for the values the function needs. When you call the function, the actual values you pass are called arguments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Functions</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
</style>
</head>
<body>
<pre id="out"></pre>
<script>
// Declaration: price and rate are parameters
function priceWithGst(price, rate) {
const tax = price * rate / 100;
return price + tax;
}
// Calls: the numbers are arguments
const shirt = priceWithGst(800, 5);
const phone = priceWithGst(15000, 18);
document.getElementById('out').textContent =
`Shirt incl. GST: Rs. ${shirt}
Phone incl. GST: Rs. ${phone}`;
</script>
</body>
</html>Returning a value
The return statement sends a result back to the place where the function was called, so you can store it in a variable or use it in an expression. As soon as return runs, the function stops – any lines after it are skipped. A function without a return gives back undefined.
A good habit is to let functions calculate and return values, and do the displaying elsewhere. priceWithGst() does not touch the page at all, which means you can reuse it for a cart, an invoice or a price list without any changes.
Default parameters
If you call a function with fewer arguments than it expects, the missing parameters are undefined. You can give a parameter a default value with =, which is used whenever the argument is missing:
function greet(name = 'friend') {
return `Hello, ${name}!`;
}
greet('Lakshmi'); // 'Hello, Lakshmi!'
greet(); // 'Hello, friend!'Function expressions and arrow functions
JavaScript functions are values, just like numbers and strings. That means you can store one in a variable. This is called a function expression. Modern code often uses the shorter arrow function syntax for this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arrow functions</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
</style>
</head>
<body>
<pre id="out"></pre>
<script>
// 1. Function declaration
function squareA(n) {
return n * n;
}
// 2. Function expression
const squareB = function (n) {
return n * n;
};
// 3. Arrow function – with one expression, the return is automatic
const squareC = (n) => n * n;
// Arrow function with a body needs braces and an explicit return
const describe = (name, age) => {
const group = age >= 18 ? 'adult' : 'minor';
return `${name} is an ${group}.`;
};
document.getElementById('out').textContent =
`${squareA(4)}, ${squareB(5)}, ${squareC(6)}
${describe('Arun', 21)}`;
</script>
</body>
</html>- One parameter: the brackets are optional –
n => n * n. No parameters: use empty brackets –() => 'hi'. - A single expression after
=>is returned automatically. Once you add curly braces, you must writereturnyourself. - Arrow functions handle the special keyword
thisdifferently from regular functions. You will see why that matters in Objects and Modern JavaScript (ES6+).
Tip: Function declarations are hoisted: you can call them before the line where they are written. Function expressions and arrow functions stored in const cannot be used before that line. Many teams use declarations for main, named functions and arrow functions for short helpers.
JavaScript functions as arguments (callbacks)
Because functions are values, you can pass one function into another. The function you pass in is called a callback. This idea is everywhere in JavaScript: array methods such as map() take a callback for each item (see Arrays), and addEventListener() takes a callback to run when the user clicks (see Events). For example, setTimeout(() => showMessage(), 2000) asks the browser to call your arrow function after two seconds.
Scope: where variables live
Scope decides where a variable can be used. A variable declared with let or const inside a function (or inside any { } block) exists only there. Code outside cannot see it, and it disappears when the function finishes. Variables declared outside all functions are global and visible everywhere.
const shopName = 'Sri Ganesh Stores'; // global
function receiptHeader() {
const date = '07-10-2026'; // local to this function
return `${shopName} – ${date}`; // can read the global
}
receiptHeader(); // works
console.log(date); // ReferenceError: date is not definedWatch out: Keep globals to a minimum. Every global variable can be changed by any script on the page, which makes bugs hard to trace. Pass values in as parameters and get results out with return instead.
Next you will store many values in one place with JavaScript Arrays – and use arrow functions to process them.