Academy — Sanjib Sikder

The Problem Functions Solve

Imagine you need to calculate the area of a circle in five different places in your program. Without functions, you write the formula five times:

JavaScript

Ctrl+Enter to run

const r1 = 5;
const r2 = 8;
const r3 = 12;

console.log(3.14159 _ r1 _ r1);
console.log(3.14159 _ r2 _ r2);
console.log(3.14159 _ r3 _ r3);

This works. But it has a serious problem. If you discover you should use Math.PI instead of 3.14159, you must find and fix every single line. If you have 50 places — you fix 50 lines. If you miss one — you have a bug.

The deeper problem: your code doesn't say what it's doing. A reader sees 3.14159 * r1 * r1 and must figure out that it's an area calculation. That's mental work you are forcing on every future reader — including yourself.

Functions solve both problems at once.

Defining a Function

JavaScript

Ctrl+Enter to run

function circleArea(radius) {
  return Math.PI * radius * radius;
}

console.log(circleArea(5));
console.log(circleArea(8));
console.log(circleArea(12));

Now the formula exists in exactly one place. The name circleArea says exactly what it does. If the formula ever needs to change, you change it once.

The structure:

function name(parameters) {
  // body: instructions
  return value;
}

function — keyword that creates a function
name — what you call it; same naming rules as variables
parameters — the inputs the function expects, listed inside ()
body — the instructions that run when the function is called
return — the output the function sends back

Parameters and Arguments

Parameters are the placeholders defined when you write the function. Arguments are the actual values you pass when you call it.

JavaScript

Ctrl+Enter to run

function greet(name, timeOfDay) {
  return `Good ${timeOfDay}, ${name}!`;
}

// "Sanjib" and "morning" are arguments
console.log(greet("Sanjib", "morning"));
console.log(greet("Rahul", "evening"));
console.log(greet("World", "night"));

name and timeOfDay are parameters — they are just local labels that exist inside the function. When you call greet("Sanjib", "morning"), the value "Sanjib" is assigned to name and "morning" to timeOfDay for the duration of that one call.

Return Values

return does two things simultaneously: it sends a value back to wherever the function was called, and it immediately stops the function. No code after return runs.

JavaScript

Ctrl+Enter to run

function absolute(n) {
  if (n < 0) {
    return -n;   // stops here if n is negative
  }
  return n;      // only reaches here if n >= 0
}

console.log(absolute(-7)); // 7
console.log(absolute(3)); // 3
console.log(absolute(0)); // 0

A function without a return statement (or with a bare return;) returns undefined.

JavaScript

Ctrl+Enter to run

function sayHello(name) {
  console.log("Hello,", name);
  // no return statement
}

const result = sayHello("Sanjib");
console.log(result); // undefined

The function does something (prints), but it doesn't produce a value. This distinction between doing and producing is fundamental — you will think about it for the rest of your programming life.

Default Parameters

What if a caller doesn't pass an argument? The parameter becomes undefined. You can set a default to handle this gracefully:

JavaScript

Ctrl+Enter to run

function power(base, exponent = 2) {
  return base ** exponent;
}

console.log(power(3, 4)); // 3⁴ = 81
console.log(power(5)); // 5² = 25 — exponent defaults to 2
console.log(power(2, 10)); // 2¹⁰ = 1024

Default parameters are evaluated only when the argument is missing or undefined. They make functions more forgiving without making them less precise.

Scope — The Invisible Boundary

Variables declared inside a function exist only inside that function. They are invisible to the outside world. This boundary is called scope.

JavaScript

Ctrl+Enter to run

function calculate() {
  const result = 42;   // exists only inside this function
  console.log("Inside:", result);
}

calculate();
console.log("Outside:", result); // ReferenceError

The error is not a bug — it is the system working correctly. Scope means that functions are self-contained. A variable named result inside one function cannot accidentally interfere with a variable named result inside another. Without scope, every variable name in your entire program would have to be unique, and programs of any size would become impossible to manage.

JavaScript

Ctrl+Enter to run

function functionA() {
  const x = 10;
  console.log("A sees x:", x);
}

function functionB() {
const x = 999; // completely separate — same name, different box
console.log("B sees x:", x);
}

functionA();
functionB();

Two functions, both using x, zero interference. This is why scope is a feature, not a restriction.

Functions can see variables declared outside them — but that's a more advanced topic involving closures, which gets its own dedicated lesson later.

Functions Are Values

Here is the idea that separates JavaScript from many other languages: a function is just another value. Like a number or a string, you can store a function in a variable, pass it to another function, or return it from a function.

JavaScript

Ctrl+Enter to run

// Storing a function in a variable
const square = function(n) {
  return n * n;
};

console.log(square(4)); // 16
console.log(square(9)); // 81

// The variable holds the function itself
console.log(typeof square); // "function"

This is called a function expression — instead of declaring a function with a name, you create it and assign it to a variable. The function itself has no name; the variable square is just a label pointing to it.

This might seem like a strange way to write a function. Its power becomes clear in the next section.

Arrow Functions

ES6 introduced a shorter syntax for function expressions: the arrow function.

JavaScript

Ctrl+Enter to run

// Regular function expression
const double = function(n) {
  return n * n * 2;
};

// Arrow function — same thing, shorter
const triple = (n) => {
return n _ n _ 3;
};

// Even shorter: if body is just a return, skip the braces and return
const quadruple = n => n _ n _ 4;

console.log(double(3)); // 18
console.log(triple(3)); // 27
console.log(quadruple(3)); // 36

The concise form n => n * n * 4 means: "take n, evaluate n _ n _ 4, return it." No braces, no return keyword needed — the expression after => is the return value implicitly.

Arrow functions are everywhere in modern JavaScript. You will see them constantly. The rule is simple:

One parameter → parentheses optional: n => n * 2
Multiple parameters → parentheses required: (a, b) => a + b
No parameters → empty parentheses required: () => 42

Passing Functions to Functions

Because functions are values, you can pass one function as an argument to another. This is one of the most powerful ideas in all of programming.

JavaScript

Ctrl+Enter to run

function applyTwice(fn, value) {
  return fn(fn(value));
}

const double = n => n * 2;
const addTen = n => n + 10;

console.log(applyTwice(double, 3)); // double(double(3)) = double(6) = 12
console.log(applyTwice(addTen, 5)); // addTen(addTen(5)) = addTen(15) = 25

applyTwice doesn't know or care what fn does. It just calls it twice. You can pass any function and applyTwice will work correctly. This is the foundation of functional programming — a style you will explore deeply in later lessons.

A Function That Builds Functions

Functions can also return functions. This unlocks a technique called closures — one of JavaScript's most powerful and most misunderstood features. Here is a first glimpse:

JavaScript

Ctrl+Enter to run

function makeMultiplier(factor) {
  return n => n * factor;
}

const double = makeMultiplier(2);
const triple = makeMultiplier(3);
const times10 = makeMultiplier(10);

console.log(double(5)); // 10
console.log(triple(5)); // 15
console.log(times10(5)); // 50

makeMultiplier(2) returns a new function that remembers factor = 2. That returned function is stored in double. When you call double(5), it uses the factor it memorised. The returned function closed over the variable factor — that's a closure.

Don't worry if this feels mysterious. It will get its own full lesson. For now, just notice that it works — and that it's elegant.

Pure Functions

A pure function is one that:

Given the same inputs, always returns the same output
Has no side effects — it doesn't change anything outside itself

JavaScript

Ctrl+Enter to run

// Pure: same input always → same output, nothing changed outside
function add(a, b) {
  return a + b;
}

// Impure: depends on external state, changes something outside
let total = 0;
function addToTotal(n) {
total += n; // modifies a variable outside the function
return total;
}

console.log(add(3, 4)); // always 7
console.log(add(3, 4)); // always 7

console.log(addToTotal(3)); // 3
console.log(addToTotal(3)); // 6 — same input, different output!

Pure functions are predictable, testable, and safe to reuse anywhere. Impure functions are sometimes necessary — but you should know when a function is impure and have a reason for it.

As you grow as a programmer, you will instinctively reach for pure functions first.

What You Have Learned

Functions are how you give names to ideas, eliminate repetition, and build programs out of composable pieces.

The key ideas:

A function packages instructions under a name; define once, use anywhere
Parameters are inputs; return is the output — doing vs producing
Variables inside a function are invisible outside — scope is a feature
Functions are values: store them, pass them, return them
Arrow functions (params) => expression are the modern short form
A function that returns a function creates a closure — more on this soon
Prefer pure functions: same input always gives same output, no side effects

In the next lesson: Loops — how to make the computer do the same thing many times without writing it many times. Combined with functions, loops are where programs start to feel genuinely powerful.