Learn how to write reusable blocks of code that take inputs, do work, and return outputs — in three different styles: declarations, expressions, and arrow functions.
A function in JavaScript is a reusable block of code designed
to perform a specific task. It can be defined once and executed (called) multiple
times, optionally taking inputs called parameters and returning an
output using the return keyword.
Functions are the foundation of organised, maintainable code — instead of repeating the same logic in multiple places, you write it once inside a function and call it wherever needed.
A function is like a machine:
returned back to the caller
You write the machine once and use it as many times as you need — that's the power of functions.
function greet() {
console.log("Hello, Aman!");
}
greet(); // Call the function
greet(); // Reuse it — no need to rewrite the logicfunction greet() {} → defines (creates) the functiongreet() → calls (executes) it — the parentheses are requiredfunction add(a, b) {
console.log(a + b);
}
add(5, 3); // a=5, b=3
add(10, 20); // a=10, b=20 — same function, different inputsa and b are parameters — placeholders defined in the function5 and 3 are arguments — the actual values passed when callingconst multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5));
console.log(multiply(3, 7));const variable — called a function expressionreturn sends the result back to the caller instead of printing it// Full arrow function
const subtract = (a, b) => {
return a - b;
};
console.log(subtract(10, 3));
// Short form — single expression, implicit return
const square = x => x * x;
console.log(square(5));
console.log(square(9));=> instead of the function keyword — modern and concisereturn — the value is returned implicitlyx => x * xThink of a function like a coffee machine:
Functions power real UI interactions. Click ▶ Preview, enter two numbers, and watch the function calculate and display the result live.
<!DOCTYPE html>
<html>
<head><title>Function Example</title></head>
<body style="font-family:sans-serif;padding:24px;background:#f8f9fa">
<h2>Function Calculator</h2>
<input id="num1" type="number" placeholder="Number 1"
style="padding:8px 12px;border:1px solid #ccc;border-radius:6px;
font-size:1rem;width:130px">
<input id="num2" type="number" placeholder="Number 2"
style="padding:8px 12px;border:1px solid #ccc;border-radius:6px;
font-size:1rem;width:130px;margin-left:8px">
<button onclick="calculate()"
style="margin-left:8px;padding:8px 18px;background:#f7df1e;border:none;
border-radius:6px;cursor:pointer;font-weight:700;font-size:1rem">
Add
</button>
<div id="output" style="margin-top:16px;font-size:1rem;line-height:2"></div>
<script>
function add(a, b) {
return a + b;
}
function calculate() {
let a = Number(document.getElementById("num1").value);
let b = Number(document.getElementById("num2").value);
if (isNaN(a) || isNaN(b)) {
document.getElementById("output").innerHTML =
"<b style='color:red'>Please enter valid numbers.</b>";
return;
}
let result = add(a, b);
document.getElementById("output").innerHTML =
"<b>add(" + a + ", " + b + ")</b> → <b style='color:#e07b00'>" + result + "</b>";
}
</script>
</body>
</html>function sayHello() {
// your code here
}sayHello, print "Welcome to JavaScript" using console.log()function multiply(a, b) {
// return the result
}
console.log(multiply(4, 6));returns a * bconsole.log()constfunction keyword for declarations. def is Python, func is Go/Swift — neither exists in JavaScript.
function test() {
return 5;
}
console.log(test());return 5 sends the value 5 back to the caller. console.log(test()) then prints that returned value.
// Which of these runs without error?
const double = x => x * 2;
console.log(double(6));(params) => {} or param => expression. The arrow => always comes after the parameters.
Function declarations are hoisted — you can call them before they appear in the file. Function expressions are not:
// Declaration — hoisted, works before definition
console.log(add(2, 3));
function add(a, b) { return a + b; }
// Expression — NOT hoisted
try {
console.log(multiply(2, 3)); // Error!
} catch (e) {
console.log("Error:", e.message);
}
const multiply = (a, b) => a * b;Keep functions small and focused on one task. A function that does too much is hard to test and reuse:
// ✗ Bad — does too many things
function doEverything(a, b) {
console.log("Adding...");
let sum = a + b;
console.log("Result: " + sum);
return sum;
}
// ✓ Good — one focused task
const add = (a, b) => a + b;
console.log(add(5, 10));Prefer arrow functions for short, single-expression logic — they are more concise and easier to read:
// One parameter — no parentheses needed
const double = x => x * 2;
// Two parameters — parentheses required
const add = (a, b) => a + b;
// No parameters — empty parentheses required
const greet = () => "Hello!";
console.log(double(5));
console.log(add(3, 4));
console.log(greet());A function without a return statement returns undefined automatically — this is a very common source of bugs:
function noReturn(a, b) {
let sum = a + b; // calculated but not returned!
}
function withReturn(a, b) {
return a + b;
}
console.log(noReturn(2, 3)); // undefined
console.log(withReturn(2, 3)); // 5The function is called and its result stored in a variable — what gets printed? Think carefully before running.
function test() {
console.log("Hello");
}
let result = test();
console.log(result);// Step 1: test() is called
// Inside the function: console.log("Hello") runs
// Output line 1 → "Hello"
// Step 2: test() has no return statement
// JavaScript automatically returns undefined
// result = undefined
// Step 3: console.log(result)
// Output line 2 → undefined
// Final output:
// Hello
// undefined
// Key takeaway:
// console.log() inside a function PRINTS but does not RETURN
// To capture a value, the function must use return:
//
// function test() {
// return "Hello"; // now result = "Hello"
// }
// let result = test();
// console.log(result); // "Hello"