Stop 04 · JavaScriptTopics · 4/36

Functions

In short

Write the logic once, use it a hundred times. Functions let you name a task, give it inputs and get a result back, and you'll write them every single day.

Reusable blocks of code — declared via function declarations, expressions, or arrow functions — each with subtly different behavior around `this` and hoisting. Functions are first-class values in JavaScript, so they can be stored, passed around, returned, and composed into larger behaviors.

The jaadu mascot pours chai from a kettle into two small glasses at a roadside stall.

Think of it like this

Ordering at the chai stall

You tell bhaiya "two cutting, less sugar". Those are the inputs. He follows the same recipe every time and hands you chai, the return value. You don't care how he makes it, only what goes in and what comes out.

Watch it happen

Calling a function

Your code

chai()

samosa()

chai(2)

1/5Your code calls chai with one input, cups = 2.

The big ideas

What you need to know

Three ways to write one

Function declarations, function expressions and arrow functions. Arrows are short and common for small callbacks.

Parameters and defaults

Parameters are the inputs. Give them default values like sugar = "normal" so callers can skip them.

return sends the result

Without a return, a function gives back undefined. return also stops the function right there.

Functions are values

You can store a function in a variable, pass it to another function, or return it. This is used everywhere in JavaScript.

See it in code

Walk through the code

1function chai(cups, sugar = "normal") {2  return `${cups} cups, ${sugar} sugar`;3}4 5const samosa = (count) => count * 15;   // arrow function, returns automatically6 7console.log(chai(2));          // "2 cups, normal sugar"8console.log(chai(1, "less"));  // "1 cups, less sugar"9console.log(samosa(4));        // 6010 11function noReturn() { const total = 5; }12console.log(noReturn());       // undefined

1/4A function declaration with a default for sugar. It builds and returns a string.

An arrow function without curly braces returns its expression automatically. Add braces and you must write return yourself.

Save yourself the pain

Common mistakes

Oops

Writing (n) => { n * 2 } and wondering why you get undefined.

Do this instead

With braces you need return: (n) => { return n * 2 }. Or drop the braces: (n) => n * 2.

Oops

One giant function that fetches, calculates and updates the page.

Do this instead

Split it into small functions that each do one job. They're easier to test and reuse.

Your mission

Build a mini bill calculator

~20 min

Quick check

What does this log? const double = (n) => { n * 2 }; console.log(double(5));

Go deeper

1Write the same function as a declaration, expression and arrow function. Validate your understanding by applying it in a small practical example.
2Learn default parameters and rest parameters (`...args`). Focus on understanding the underlying reason it works, not only memorizing the definition.
3Understand arrow functions don't have their own `this`.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download