DEV Community: Brian Kipchirchir

ALL YOU NEED TO KNOW ABOUT FUNCTION VARIATIONS

Brian Kipchirchir — Wed, 23 Sep 2026 20:24:51 +0000

🚀 The Complete Guide to JavaScript Functions, `return`, Closures & Async Code

A beginner-friendly reference that explains not just what happens in each
code variation, but why — so nothing here ever feels like a surprise. 🎯

📐 PART 1: The Foundational Rules (read this first!)

Almost every "confusing" JavaScript output comes down to just two ideas.
Once these are second nature, every example later in this guide is just an
application of them. 🧠

🥇 Rule 1: Printing and returning are two completely different actions

console.log(...) 🖨️ is an instruction that says: "display this on the screen, right now." It's called a side effect — something that happens while code is running, as a byproduct of running it.
return 📦 is an instruction that says: "stop running this function, and hand this specific value back to whoever called it."

A function can do one, both, or neither. Printing something does not
automatically return it, and returning something does not automatically
print it. They are unrelated unless you write code that connects them.

🥈 Rule 2: A function call is an expression, and it always evaluates to something

Every time you call a function — fn() — that call itself is a small
expression that resolves to a value, the same way 2 + 2 resolves to 4.

If the function has a return value; that executes, the call resolves to value. ✅
If the function finishes without any return executing (or has a bare return; with nothing after it), the call resolves to undefined. 👻 This isn't a bug or an edge case — it's JavaScript's built-in default.

Why does this matter so much? Because anything that "asks" for the
result of a function call — wrapping it in console.log(...), assigning it
with let result = ..., using it in a calculation — is asking for the
return value, not for whatever the function happened to print while it
was running. Those are two separate, independent things happening at two
separate moments.

🥉 Rule 3: Code runs top to bottom, and JavaScript won't skip ahead

When you write console.log(fn()), JavaScript can't print anything until
it knows what fn() evaluates to. So it fully runs fn() first — including
any console.log statements inside fn — and only once fn has finished
and produced a return value does the outer console.log get to run.

This is why you'll see "inner" prints appear before "outer" prints in the
console, every time — the inner function has to finish completely before
control returns to whatever called it.

💡 Keep these three rules in your head as you read every example below.
Each one is just these rules playing out in a slightly different shape.

🧩 PART 2: Function Basics

🤔 What is a function?

A function is a reusable block of code built to perform a specific task.
Functions let you organize, reuse, and modularize code instead of repeating
the same logic everywhere. ♻️

function greet(name) {
  console.log("Hello " + name);
}
greet("Alice");   // Hello Alice

name, inside the parentheses of the definition, is called a parameter — a placeholder variable that doesn't hold a real value until the function is called.
"Alice", passed in when calling the function, is called an argument — the actual, real value supplied for that call.
greet("Alice"); is calling (or invoking) the function — this is the moment the code inside greet actually runs. ▶️

🎛️ Default parameters

A parameter can be given a fallback value, used automatically whenever no
argument (or undefined) is passed in for it:

function greet(name = "Guest") {
  console.log("Hello, " + name);
}
greet();          // Hello, Guest   (no argument → default is used)
greet("Alice");    // Hello, Alice   (argument overrides the default)

🔍 PART 3: `return` vs `console.log` — Every Variation

Every example below uses a = 5, b = 10 (so a + b = 15) to keep the
numbers easy to track — only the structure of the code changes. 🧪

Category A: Calling the function plainly (not wrapped in an outer `console.log`)

A1. No console.log inside, no return

function fn(a, b) { }
fn(5, 10);

Output: (nothing at all) 🤷
Why: There's no console.log to produce a side effect, and nothing is
asking for the return value either. The function quietly does nothing
visible.

A2. console.log inside, no return

function fn(a, b) { console.log(a + b); }
fn(5, 10);

Output: 15 ✅
Why: The inner console.log fires as a side effect the moment the
function runs. There's no return, so the call does evaluate to
undefined behind the scenes — but since nothing is capturing or printing
that return value here, it's simply never shown.

A3. No console.log inside, has return

function fn(a, b) { return a + b; }
fn(5, 10);

Output: (nothing) 🕳️
Why: 15 is computed and successfully returned — but the returned
value has nowhere to go. It's not stored in a variable, not logged,
nothing. A returned value that nobody uses is simply discarded.

A4. console.log inside AND return

function fn(a, b) { console.log(a + b); return a + b; }
fn(5, 10);

Output: 15 ✅
Why: Only the inner console.log produces visible output. The
returned 15 is still discarded, same as A3, because nothing on the
outside is asking for it.

Category B: Wrapping the call in an outer `console.log`

This is where the return value finally becomes visible, because
something is now explicitly asking for it. 👀

B1. No log inside, no return

function fn(a, b) { }
console.log(fn(5, 10));

Output: undefined 👻
Why: Nothing prints inside fn. The call fn(5, 10) evaluates to
undefined (no return), and the outer console.log prints exactly that.

B2. Log inside, no return

function fn(a, b) { console.log(a + b); }
console.log(fn(5, 10));

Output:

15
undefined

Why: Two separate console.log calls fire, in order. First, the one
inside fn runs (side effect → 15). Then fn finishes with no
return, so the call evaluates to undefined — and that's what the
outer console.log prints.

B3. No log inside, has return

function fn(a, b) { return a + b; }
console.log(fn(5, 10));

Output: 15 ✅
Why: Nothing prints inside fn this time. The outer console.log
prints the returned value directly — just one line, because there was
never a second console.log to fire.

B4. Log inside AND return

function fn(a, b) { console.log(a + b); return a + b; }
console.log(fn(5, 10));

Output:

15
15

Why: Two 15s, but for entirely different reasons. The first is the
side effect from the inner console.log. The second is the outer
console.log printing the value that return sent back out — it's only a
coincidence that they're the same number, because in this example both the
printed and returned values happened to be a + b.

Category C: Storing in a variable first

function fn(a, b) { console.log(a + b); return a + b; }
let result = fn(5, 10);
console.log(result);

Output:

15
15

Why: This behaves identically to wrapping the call directly in
console.log() (Category B). let result = fn(5, 10) is simply asking for
the return value and storing it for later — it's the same underlying
operation as B4, just split across two lines instead of one.

Category D: Calling the function twice — once bare, once wrapped

function fn(a, b) { console.log(a + b); }
fn(5, 10);                 // bare call
console.log(fn(5, 10));    // wrapped call

Output:

15
15
undefined

Why: Each call to fn is a completely independent execution — nothing
is remembered or shared between them. The first call runs, its inner log
fires (15), and its (unused) return value is discarded. The second call
runs again from scratch, its inner log fires again (15), and this time
its return value (undefined, since there's no return) is printed by the
outer console.log.

Category E: `return` positioning and reachability

E1. Code written after return never runs ⛔

function fn(a, b) {
  console.log(a + b);
  return a + b;
  console.log("never runs");   // dead code
}
console.log(fn(5, 10));

Output:

15
15

Why: return doesn't just supply a value — it also immediately exits
the function the instant it executes. Any code physically written after a
return statement, in the same execution path, can never run. JavaScript
(and most languages) call this "dead code" — some code editors will even
grey it out or warn you about it.

E2. Bare return; with no value

function fn(a, b) {
  console.log(a + b);
  return;
}
console.log(fn(5, 10));

Output:

15
undefined

Why: return; with nothing after it still exits the function
immediately — but since no value was given to return, it behaves exactly
like having no return at all. The call evaluates to undefined.

E3. return inside a conditional that ISN'T met 🚧

function fn(a, b) {
  console.log(a + b);
  if (a > 100) {
    return a + b;
  }
  // nothing else here — falls through to the end
}
console.log(fn(5, 10));

Output:

15
undefined

Why: Since a is 5, the condition a > 100 is false, so the code
inside the if block — including its return — never runs. Execution
just reaches the natural end of the function with no return having fired,
so it implicitly returns undefined. This is one of the sneakiest sources
of unexpected undefineds: the return is there in the code, but it
simply never got triggered for this particular input.

E4. Same shape, but the condition IS met

function fn(a, b) {
  console.log(a + b);
  if (a > 0) {
    return a + b;
  }
}
console.log(fn(5, 10));

Output:

15
15

Why: This time a > 0 is true (since a is 5), so the return
inside the if block does execute, sending 15 back out as expected.

Category F: Returning the result of a `console.log()` call

function fn(a, b) {
  return console.log(a + b);
}
console.log(fn(5, 10));

Output:

15
undefined

Why: return console.log(a + b); looks like it should "return the
number," but it actually returns whatever console.log itself returns
— and console.log's own job is only to print things to the screen; as a
function, it always evaluates to undefined, no matter what you pass it.
So the inner console.log(a + b) prints 15 as a side effect, but its
return value (which is what gets sent back out of fn) is undefined —
and that's what the outer console.log ends up printing.

Category G: Multiple `console.log`s inside one function

function fn(a, b) {
  console.log("Step 1: adding");
  console.log(a + b);
  return a + b;
}
console.log(fn(5, 10));

Output:

Step 1: adding
15
15

Why: Every console.log inside a function fires in the exact order
it's written, as the function executes line by line. None of these inner
logs affect what eventually gets returned — they're just separate,
independent side effects happening along the way. Only the final return
value is what the outer console.log receives.

🏹 PART 4: Arrow Functions — the Hidden Auto-Return Rule

Arrow functions have a special shortcut behavior that regular functions
don't have — and it depends entirely on whether you use curly braces. 🎩

✨ Concise body (no braces) — automatically returns the expression

const add = (a, b) => a + b;
console.log(add(2, 3));   // 5

Here, whatever comes right after => is the function's result,
automatically — no return keyword needed. JavaScript treats the entire
arrow function body as a single expression to evaluate and hand back.

📦 Block body (curly braces `{}`) — behaves exactly like a normal function

const add = (a, b) => {
  a + b;   // computed... then thrown away. NOT returned!
};
console.log(add(2, 3));   // undefined

Why does adding {} change everything? The moment JavaScript sees the
opening {, it stops treating the body as "one expression to auto-return"
and starts treating it as a block of statements — potentially many
lines, with loops, conditionals, multiple calculations, whatever you want.
Once you're in "block mode," JavaScript can no longer guess which line
you meant to return, so it requires you to say so explicitly with return,
exactly like a regular function declaration would.

Fix: 🔧

const add = (a, b) => {
  return a + b;
};
console.log(add(2, 3));   // 5

📊 Quick-reference table

Arrow function style	Auto-returns?
`(a, b) => a + b`	✅ Yes — no braces, single expression
`(a, b) => { a + b }`	❌ No — braces mean you need `return`
`(a, b) => { return a + b }`	✅ Yes — because of the explicit `return`

🕳️ The object-literal trap

This same brace rule creates a subtle problem if you're trying to
auto-return an object:

// WRONG: ❌
const makeUser = (name) => { name: name };
console.log(makeUser("Alice"));   // undefined (or a syntax quirk)

Here, JavaScript sees the { right after => and assumes it's the start
of a function block — not the start of an object literal. So
{ name: name } gets misread as a labeled statement rather than a { key: value } object, and nothing gets properly returned.

Fix — wrap the object in parentheses: ✅

const makeUser = (name) => ({ name: name });
console.log(makeUser("Alice"));   // { name: "Alice" }

The parentheses ( ) signal to JavaScript "this is an expression (an
object), not a block of code" — which restores the auto-return behavior
and lets the object be returned correctly.

⏳ PART 5: `return` on the Same Line vs. the Next Line (the ASI Trap)

This is one of the most surprising JavaScript quirks, caused by a feature
called Automatic Semicolon Insertion (ASI). 🥷

🤨 Why this happens

JavaScript doesn't strictly require semicolons at the end of every line —
it tries to automatically insert them where it thinks a statement ends.
For the return keyword specifically, there's a rule: if a line break
immediately follows return, JavaScript automatically inserts a semicolon
right there, ending the statement on the spot — even if you intended the
next line to be part of the same return.

❌ The broken version

function getValue() {
  return
  {
    value: 42
  };
}
console.log(getValue());

Output: undefined 👻

Why: JavaScript reads this as if you'd written:

function getValue() {
  return;              // ← semicolon auto-inserted here!
  {
    value: 42
  };
}

The return on its own line is immediately treated as a complete, bare
return; statement — which, as covered in Category E2, returns
undefined. Everything after it (the object) becomes unreachable dead
code, exactly like Category E1 — it's never even evaluated, let alone
returned.

✅ The fix — keep `return` and its value on the same line

function getValue() {
  return {
    value: 42
  };
}
console.log(getValue());   // { value: 42 }

As long as the { (or whatever value you're returning) appears on the
same line as the return keyword, JavaScript knows the statement isn't
finished yet, and doesn't insert a semicolon early. It's only a line break
directly after return, with nothing else on that line, that triggers
this trap.

🎯 The takeaway rule: always keep return and the value you're
returning on the same line. If a returned value is long and you want to
wrap it across multiple lines for readability, wrap starting from an
opening bracket/brace/parenthesis on the same line as return, like
the fixed example above — never leave return dangling alone at the end
of a line.

🕸️ PART 6: Nested Function Calls — Tracing Values Through Multiple Functions

This is one of the more complex patterns, because control has to jump
between multiple functions before a final value comes out. Let's build it
up slowly. 🧗

✅ The working version

function double(n) { return n * 2; }
function fn(a, b) { return double(a + b); }
console.log(fn(5, 10));

Output: 30 🎉

Step-by-step trace:

double and fn are just defined first — nothing runs yet.
console.log(fn(5, 10)) is reached. JavaScript must fully evaluate fn(5, 10) before console.log can do anything.
fn is called with a = 5, b = 10. Its only line is return double(a + b); — but to return something, JavaScript must first figure out what double(a + b) actually evaluates to.
a + b is computed first: 5 + 10 = 15.
double(15) is now called. Execution jumps into the double function — fn is paused, waiting, while double runs. ⏸️
Inside double, n = 15. The line return n * 2; runs: 15 * 2 = 30. double returns 30 and finishes.
Execution jumps back to exactly where it left off inside fn — the double(a + b) call has now fully resolved to 30. ▶️
fn's statement effectively becomes return 30;. fn returns 30 and finishes.
Execution jumps back once more, to the original console.log(fn(5, 10)) line — which now has the value it needed: 30. It prints it.

Visualizing the call stack (who's "inside" who, and in what order): 🗺️

console.log( fn(5, 10) )
     ↓ must evaluate fn(5, 10) first
  fn runs, a=5, b=10
     ↓ must evaluate double(a + b) first
  double(15) is called
     ↓
  double runs, n=15
     ↓
  return n * 2  →  resolves to 30
     ↓ double is done — hands 30 back to fn
  fn's return becomes: return 30
     ↓ fn is done — hands 30 back to console.log
  console.log(30)
     ↓
  prints: 30

The key idea: 💡 return values chain cleanly through nested calls, as
long as every function in the chain properly uses return. fn doesn't
need to know or care how double calculates its answer — it just calls
double(...), waits for it to finish, and immediately forwards whatever
comes back.

⚠️ The broken version — a missing `return` breaks the whole chain

function double(n) { console.log(n * 2); }   // no return!
function fn(a, b) { return double(a + b); }
console.log(fn(5, 10));

Output:

30
undefined

What changed: double now only prints 30 — it no longer returns
anything. So when fn calls double(a + b) and tries to return whatever
comes back, what actually comes back is undefined (since double has no
return of its own).

This is the critical lesson of nested calls: even though fn does
have its own return statement, fn is only as good as the value it's
returning. return double(a + b) doesn't guarantee a "real" value — it
only guarantees that fn forwards along whatever double(a + b)
evaluates to, good or bad. A missing return anywhere in the chain — even
several layers deep — poisons every function built on top of it, because
undefined gets faithfully passed up the entire chain, layer by layer,
exactly as written. 🧟

🎯 The takeaway: when chaining function calls together, check every
function in the chain, not just the outermost one. A return at the top
level means nothing if it's just forwarding an undefined that came from
somewhere deeper inside.

🔗 PART 7: Closures

A closure happens when an inner function "remembers" and can still
access variables from the outer function it was created inside — even
after that outer function has already finished running and would normally
have disappeared. 🧠✨

function counter() {
  let value = 0;
  return function () {
    value++;
    return value;
  };
}

Normally, value would only exist while counter() is actively running,
and would vanish once counter() finishes. But because the inner function
is returned and kept around, it keeps a permanent link back to that exact
value variable — this link is the closure.

⚠️ Common mistake — calling `counter()` again resets everything

console.log(counter()());   // 1
console.log(counter()());   // 1 again! — NOT 2

Why: each counter() call creates a brand-new, completely separate
value variable, starting fresh at 0. Calling counter() twice doesn't
reuse anything from the first call — it's like renting two completely
different apartments; nothing in one affects the other. 🏠🏠

✅ Correct — store the returned function once, and reuse that

let getValue = counter();   // creates ONE closure — one value, starting at 0
console.log(getValue());     // 1
console.log(getValue());     // 2 — same closure, state carries over
console.log(getValue());     // 3

The key idea: 💡 getValue isn't just "a function" — it's the
specific inner function tied to one particular value variable, created
the one time counter() was called. Every time you call getValue(),
you're reaching into that same preserved variable and updating it — which
is exactly what makes closures useful for things like counters, private
state, and memoized calculations.

⏰ PART 8: `setTimeout` — What It Is and Why You'd Use It

🤔 What is `setTimeout`?

setTimeout is a built-in JavaScript function that means: "run this code
later, after waiting at least this many milliseconds."

setTimeout(() => {
  console.log("This runs later");
}, 1000);

console.log("This runs first");

Output:

This runs first
This runs later

Even though "This runs later" is written above "This runs first" in
the code, it prints second. setTimeout doesn't pause your program to
wait — it just schedules the function to run after the delay, and lets the
rest of your code keep going immediately. 🏃‍♂️💨

🎛️ Its two arguments

setTimeout(callbackFunction, delayInMilliseconds);

A callback function — the code you want to run later.
A delay in milliseconds — the minimum wait before running it. 1000 = 1 second. Even 0 still waits for the current code to finish first (see below).

🧵 Why does JavaScript behave this way?

JavaScript runs on a single thread — it can only do one thing at a
time. If setTimeout literally froze everything for the delay, your whole
page or program would lock up completely — no clicks, no other code, no
animations — for that entire time. 🥶

Instead, JavaScript hands the timer off to the browser (or Node.js) to
track in the background, while your main code keeps running without
interruption. Only once the timer finishes and all currently-running
code has completely finished does your scheduled function actually get its
turn to execute. This underlying mechanism is called the event loop. 🔁

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");

Output:

1
3
2

Even with a delay of 0 milliseconds, "2" still prints last — because
setTimeout callbacks always wait for all synchronous (immediate) code to
finish first, no matter how short the delay is.

🎯 Why would you actually need it?

Simulating real delays — waiting for a server response, a network request, or "typing" animations. 🌐
Debouncing/throttling — waiting a moment before reacting to fast, repeated events (like a user typing in a search box), so you don't re-run expensive work on every single keystroke. ⌨️
Letting the UI breathe — giving the browser time to render or update before running something heavy. 🎨
Scheduling reminders or animations — "fade this out after 2 seconds." ⏲️
Retrying failed operations — "if this failed, try again in 5 seconds." 🔄

❌ Why `return` doesn't work inside `setTimeout`

function delayedAdd(a, b) {
  setTimeout(() => {
    return a + b;
  }, 1000);
}
console.log(delayedAdd(5, 10));   // undefined, printed IMMEDIATELY

Full trace:

delayedAdd(5, 10) is called.
setTimeout(...) runs, scheduling the arrow function for 1 second later. This doesn't pause anything — setTimeout itself finishes instantly and execution moves on right away.
delayedAdd has nothing else to do — it reaches the end of its body with no return statement at its own level. So it implicitly returns undefined, immediately, without waiting for the timer at all.
console.log(delayedAdd(5, 10)) prints that undefined right away.
A full second later, the scheduled arrow function finally runs. return a + b; genuinely computes 15 and genuinely returns it — but this return only exits that inner arrow function, handing the value to setTimeout's internal machinery. setTimeout has no built-in way to forward a callback's return value to anyone else — so that 15 is simply computed and then discarded, silently, with no error. 💨

⚠️ The core problem in one sentence: delayedAdd finishes running
(and already returned undefined) a full second before the timer even
starts counting down — so there's no way for a return inside the
delayed callback to reach back and change what already happened.

📞 PART 9: The Callback Pattern — Delivering a Value Later

Since a function can't return a value that doesn't exist yet, the
callback pattern solves this by passing in a function that gets
called once the value is finally ready — instead of relying on return.

function delayedAdd(a, b, callback) {
  setTimeout(() => {
    callback(a + b);
  }, 1000);
}

delayedAdd(5, 10, (result) => {
  console.log(result);   // 15, printed after 1 second
});

🔬 Breaking down exactly what's happening

There are two separate functions at play here, doing two separate jobs:

Function 1 — the anonymous function passed to setTimeout: 📨

() => { callback(a + b); }

Where it lives: passed directly as setTimeout's first argument.
Its job: wait to be triggered after 1 second, then compute a + b and hand that number off by calling callback(...).
Think of this as the messenger — its only responsibility is to calculate the answer and deliver it onward, once the timer's done.

Function 2 — the function you passed into delayedAdd: 📥

(result) => { console.log(result); }

Where it lives: passed into delayedAdd as its third argument, and captured there under the parameter name callback.
Its job: receive whatever value it's handed (as result), and decide what to actually do with it — here, logging it.
Think of this as the receiver/handler — it has no idea about timers or a/b at all; it just knows "when someone calls me with a value, act on that value."

🧲 How `callback` is reached, not "passed," inside `setTimeout`

A subtle but important detail: the anonymous function inside setTimeout
doesn't receive callback as an argument — it simply reaches out to
callback, a variable that already exists in the surrounding scope (it's
delayedAdd's own parameter). This works because of closure (see Part
7): an inner function automatically has access to variables from the
function that contains it, without needing them explicitly passed in.

🔄 The full chain, step by step

delayedAdd(5, 10, YOUR_FUNCTION) is called
                     ↓ YOUR_FUNCTION is stored as the parameter "callback"
setTimeout schedules an anonymous function for 1 second later
                     ↓
        --- 1 second passes --- ⏳
                     ↓
The anonymous function runs (triggered by setTimeout)
                     ↓ computes a + b → 15
calls callback(15)
                     ↓ "callback" IS your original function
Your function runs, with result = 15
                     ↓
console.log(15) 🎉

✅ Why this fixes the original problem

Unlike the broken return a + b; version, callback(a + b) isn't a dead
end — it's an active delivery. Instead of trying (and failing) to hand a
value back through a return that already finished executing, the
callback pattern calls a function directly, at the exact moment the
value becomes available — like making a phone call the instant news
arrives, instead of leaving a letter in a mailbox nobody's checking. 📬➡️📞

🤝 PART 10: Promises — a More Structured Way to Handle "Later"

🎟️ What is a `Promise`?

A Promise is a built-in JavaScript object representing "a value that
doesn't exist yet, but will exist later." Think of it like an IOU: you
receive the Promise object immediately, but the real value inside it
arrives at some future point.

A Promise is always in one of three states:

⏳ Pending — still waiting; no result yet.
✅ Fulfilled (resolved) — finished successfully; has a value.
❌ Rejected — something went wrong; has an error instead.

🏗️ Creating a Promise

new Promise((resolve) => {
  // ... do something that takes time ...
  resolve(someValue);   // once ready, call resolve() with the result
});

new Promise(...) takes a function — called the executor — that runs
immediately, the instant the Promise is created. The executor
automatically receives a special function, resolve, as its parameter.
Calling resolve(value) is how you tell the Promise "the value is ready —
here it is; switch from pending to fulfilled." 🔓

🔬 Full walkthrough

function delayedAdd(a, b) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(a + b);
    }, 1000);
  });
}

delayedAdd(5, 10).then((result) => {
  console.log(result);
});

Output: 15, printed after a 1-second delay. 🎉

Step by step:

delayedAdd(5, 10) is called.
new Promise((resolve) => {...}) is created. Its executor function runs immediately: it receives resolve as a tool (not a value — just a function reference it can call later), and calls setTimeout(...) to schedule work for 1 second from now.
Important: the executor does not have the result at this point. It hasn't computed anything. Its only job was to start the timer and hold onto the resolve tool for whenever it's needed. The executor finishes running almost instantly.
new Promise(...) (still pending) is what delayedAdd returns — immediately. This is the fix over the broken version: delayedAdd isn't trying to return the sum directly (which doesn't exist yet) — it's returning a Promise object, a placeholder that represents "a sum is coming." 📦⏳
.then((result) => {...}) is attached to that Promise. This registers what should happen later, once the Promise resolves — it does not run yet.
Execution moves on. Nothing is blocked or paused.
One second later, the setTimeout callback finally fires (this is a third, separate function — nested inside the executor, but not the executor itself).
Inside it, a + b is computed → 15. resolve(15) is called.
Calling resolve(15) updates the Promise object itself — not the executor, which already finished running a second ago — flipping its state to "fulfilled" and storing 15 as its value. ✅
Because the Promise is now fulfilled, JavaScript automatically triggers the function registered via .then(...), passing it 15 as its result argument.
console.log(result) runs, printing 15. 🎊

🎭 Three separate functions, three separate jobs

Function	Runs when	Its job
Executor: `(resolve) => {...}`	Immediately, once	Starts the timer; receives (but doesn't yet use) the `resolve` tool
`setTimeout` callback: `() => resolve(a+b)`	1 second later	Computes the real value and calls `resolve()` with it
`.then()` callback: `(result) => console.log(result)`	Right after the Promise resolves	Receives the final value and decides what to do with it

These are genuinely three different functions — it's easy to mistakenly
think the executor and the .then() callback are "the same thing," but
they're written in completely different places and run at completely
different times.

✅ Why this avoids the original problem

Compare directly:

// BROKEN — return goes into a dead end ❌
function delayedAdd(a, b) {
  setTimeout(() => {
    return a + b;   // setTimeout ignores whatever its callback returns
  }, 1000);
  // implicitly returns undefined immediately
}

// FIXED — resolve() updates a Promise that .then() is actively watching ✅
function delayedAdd(a, b) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(a + b);   // this goes somewhere — it fulfills the Promise
    }, 1000);
  });
}

The critical difference: resolve isn't a dead end like the stray
return was. resolve is directly tied to the specific Promise object
that delayedAdd already returned — and calling it updates that exact
object, which .then() is actively watching for changes.

⚡ The `async`/`await` equivalent

async function run() {
  const result = await delayedAdd(5, 10);
  console.log(result);
}
run();

await pauses execution inside the async function until the Promise
resolves — it's essentially .then() rewritten to look synchronous, even
though the same non-blocking timer mechanism is running underneath. Both
versions do exactly the same thing; async/await is just a more readable
way to write the same Promise-based logic. ✨

🏆 PART 11: Master Rules — the Short Version

If you forget every detailed example above, remember these: 📌

console.log prints immediately, as a side effect, the instant it runs — regardless of what the function eventually returns (or doesn't).
A function call only ever "hands back" its return value to whatever called it. No return (or a bare return;) always means undefined — no matter what got printed inside along the way.
return immediately exits a function. Any code physically written after it, in the same execution path, never runs.
A line break right after return, with nothing else on that line, silently becomes a bare return; due to automatic semicolon insertion — always keep return and its value on the same line.
Arrow functions only auto-return without curly braces. Add {} and you're back to needing an explicit return, just like a normal function.
Nested function calls forward whatever their inner call actually returned — a missing return anywhere in the chain poisons everything built on top of it.
Closures let an inner function remember outer variables — but only if you reuse the same returned function. Calling the outer function again creates a brand-new, independent closure.
setTimeout never pauses your code. It schedules work for later and immediately moves on — so a return inside its callback can never reach back out to the function that scheduled it.
Callbacks and Promises solve the "value isn't ready yet" problem by delivering the result once it exists — via calling a function (callback) or resolving a Promise (.then()/await) — instead of trying to return something before it's ready.

📋 Quick-Reference Summary Tables

Setup	Bare call	Wrapped in outer `console.log`
No log inside, no return	(nothing)	`undefined`
Log inside, no return	prints value	prints value, then `undefined`
No log inside, has return	(nothing)	prints returned value
Log inside, has return	prints value	prints value, then prints it again

Mistake 🐛	What goes wrong	Fix 🔧
No `return` in a function	Call evaluates to `undefined`, even if it logged something real	Add `return value;`
Arrow function with `{}` but no `return`	Braces disable auto-return	Add explicit `return`, or drop the braces
Arrow function returning an object literal	`{ }` read as a function block, not an object	Wrap in parentheses: `() => ({ ... })`
`return` alone on its own line	ASI inserts a semicolon right after it, making it a bare `return;`	Keep `return` and its value on the same line
`return` inside a `setTimeout`/async callback	Only exits that inner callback — never reaches the outer function	Use a callback parameter or a Promise instead
Calling the outer closure function again instead of reusing the stored one	Resets internal state to its starting value	Store the returned function once and reuse that variable
Confusing "printed" with "returned"	Assuming an outer `console.log(fn())` shows what was logged inside	It only ever shows the return value, never internal logs

🎓 You made it to the end! Keep this file handy — every "weird"
JavaScript output you run into will trace back to one of the rules above.
Happy coding! 🚀✨

The Local Dev Setup Cheat Sheet I Wish I Had When I Started 🐍⚡

Brian Kipchirchir — Tue, 25 Aug 2026 08:23:01 +0000

🗂️Project WITHOUT React/Vite (Python backend + plain HTML/CSS/JS frontend)

Backend:

source .venv/bin/activate
python app.py

Frontend (no build tool needed — just serve the static files):

python3 -m http.server 5500

or right-click index.html → "Open with Live Server" if you're in VS Code.

⚛️ Project WITH React/Vite (Python backend)

Backend:

source .venv/bin/activate
python app.py

Frontend:

npm run dev

🗑️ *Deleting a virtual environment
*

deactivate
rm -rf .venv

✨** Creating a fresh one
**
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

🆕 First time in a project only do:

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

🔁 Every time after:

source .venv/bin/activate
python app.py

🔍 Check if venv exists:
ls -a → spot .venv in the list

✅ Check if venv is actually active:
which python → should point inside .venv
⚠️ don't fully trust the (.venv) label in your prompt — it can lie!

♻️ Only redo the first-time steps if:

🗑️ you delete .venv
💻 you're on a new machine
📦 requirements.txt got new packages

Day 1: Variables, Data Types & Operators

Brian Kipchirchir — Fri, 07 Aug 2026 20:11:50 +0000

📓✨ JavaScript Notes 🚀

🧱 Variables, Data Types & Operators 📚

📦 Variables 🗂️

Variable 📦 → a labeled box that stores a value that can be used later. 🏷️

You can create it with:

let 🆕
const 🔒
var 📜

	`var`	`let`	`const`
Scope 🌍	Function-scoped ✅	Block-scoped 🧱	Block-scoped 🧱
Reassignable ✏️	✅	✅	❌
Redeclarable 🔁	✅	❌	❌

let score = 10;
score = 20;      // ✅ reassignable
// Block-scoped 🧱

const score = 20;
score = 10;       // ❌ can't — unreassignable 🔒
// Block-scoped 🧱

Block-scoped 🧱 → let and const only exist inside the { } they were created in.

Function-scoped 🏠 → means var also exists throughout the whole function { }, ignoring inner block boundaries. 🚪

function test() {
  if (true) {
    var leaked = "I escape the block!";                // 💨 function-scoped
    const trapped = "I stay inside the block!";        // 🔒 block-scoped
    let alsoTrapped = "I also stay inside the block!"; // 🔒 block-scoped

    // Inside the block: all three are visible
    console.log(leaked);      // "I escape the block!" ✅💨
    console.log(trapped);     // "I stay inside the block!" ✅🔒
    console.log(alsoTrapped); // "I also stay inside the block!" ✅🔒
  }

  // Outside the block, still inside the function
  console.log(leaked); // "I escape the block!" ✅💨

  // Uncomment ONE line at a time to see the error:
  // console.log(trapped);     // ReferenceError: trapped is not defined ❌🔒
  // console.log(alsoTrapped); // ReferenceError: alsoTrapped is not defined ❌🔒
}

test();

// Outside the function
// console.log(leaked); // ReferenceError: leaked is not defined ❌

N/B 📌⚠️

let → can't be redeclared 🚫🔁
- Can be reassigned ✏️✅
const → can't be redeclared 🚫🔁
- Can't be reassigned 🚫✏️

- Changing the *contents depends on the value: primitives are immutable 🧊, objects/arrays are mutable 🧩 *

const person = {
  name: "Brian",   // 👤
  age: 28          // 🎂
};

person.age = 29;        // ✅ works — mutating a property 🔧
person.name = "John";   // ✅ works too 🔧

const person = { name: "Brian", age: 28 };
person = { name: "John", age: 29 }; // ❌ TypeError: Assignment to constant variable 🔒

const fruits = ["apple", "grape"];  // 🍎🍇🍊
fruits.push("orange");
console.log(fruits); // ["apple", "grape", "orange"] 🧺✅

📦 Data Type 🗂️

Primitive/Immutable (Cannot be changed) 🧊🔒

Strings 🔤, Number 🔢, Boolean ✅❌, undefined, null, Symbol , BigInt

let name = "Brian";          // String 🔤
let age = 22;                // Number 🔢 (integers and decimals, e.g. 3.14)
let isStudent = true;        // Boolean ✅❌ (true or false)
let nothingYet;              // undefined 🤷 (declared, but no value assigned)
let empty = null;            // null 🚫 (intentionally "no value")
let id = Symbol("id");       // Symbol 🆔 (a unique identifier)
let big = 9007199254740993n; // BigInt 🔟 (huge integers, note the n at the end)

Mutable 🧩🔓 — objects, Arrays, functions

let name = "Brian";        // 👤
let age = 22;              // 🎂
let arr = ["apple", "grape", "banana"];   // 🍎🍇🍌
functions -> function(){} -> function     // ⚙️

objects → { } → object 📦
arrays → [1,2,3] → arrays, technically an object 📋
functions → function(){} → function ⚙️
Map 🗺️

Special Quirks

console.log(typeof NaN) → number ⚠️🤯
console.log(typeof null) → object ⚠️🐛 (an old bug that was never fixed, to avoid breaking existing code 😅)

🎣 Hoisting 🪝

Hoisting → JavaScript registers declarations before running the code, so they behave as if lifted 🔼 to the top of their scope. Only the declaration is lifted, not the value assigned to it. 📌

console.log(a);   // undefined 🤷
var a = 5;

var a → hoisted ✅🔼

Before assignment → undefined 🤷
5 → after the assignment line runs ✏️

console.log(b);   // ReferenceError 💥
let b = 5;

let/const...(Also hoisted 🔼 but stay in TDZ — Temporary Dead Zone ⛔)

🧮 Operators

1.### ➕ Arithmetic Operators

+ — add ➕
- — subtract ➖
* — multiply ✖️
/ — divide ➗
% — remainder 🍕
** — exponent (power) ⚡

let power = 5 ** 2;   // 25
let total = 7 % 3;    // 1

2.### 📝 Assignment Operators

= — assign 📥
+= -= *= /= — do the operation, then assign the result 🔁
**= — raise to a power, then assign ⚡

let x = 10;
x += 2;   // 12
x **= 2;  // 144

3.### ⚖️ Comparison Operators

== — loose equal (allows type conversion) 🤏
=== — strict equal (no type conversion) 🎯
!= — loose not-equal
!== — strict not-equal
> — greater than
< — less than
>= — greater than or equal
<= — less than or equal

console.log(5 == "5");   // true  (values match after conversion)
console.log(5 === "5");  // false (types differ) ✅ prefer === in almost all cases

4.### 🔀 Logical Operators

&& — AND: both sides must be true 🤝
|| — OR: at least one side must be true 🔀
! — NOT: flips true/false 🔄

console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

5.### 🕳️ Null Coalescing ❓➡️
(if the name/thing is null or undefined use...)

?? → 🔄

let name = null;   // 🚫
let result = name ?? "Unknown";
console.log(result); // "Unknown" 🏷️

?? → use the right side only if the left is null or undefined
|| → use the right side if the left is any falsy value (0, "", false, ...)

let count = 0;
console.log(count || 10); // 10 ❌ (0 is falsy, so || skips it)
console.log(count ?? 10); // 0  ✅ (0 is not null/undefined, so ?? keeps it)

6.### 🔗 Optional Chaining ⛓️
(Allows you to safely access a property that might not exist 🛡️)

?. → if the object/thing is null or undefined, stop and return undefined instead of crashing

let person = {};

console.log(person.address.city);         // ❌ TypeError: Cannot read properties of undefined
console.log(person.address?.city);        // undefined 🤷
console.log(person?.address?.city);       // undefined 🤷‍♂️ (can chain as many `?.` as needed)

7.### ➕➖ Increment / Decrement Operators 🔼🔽
(increases/decreases a value by 1)

++ → increases value by 1 ⬆️
-- → decreases value by 1 ⬇️

let count = 5;
count++;
console.log(count); // 6 🔢

8.### ❓ Ternary Operator 🎭
(short "if...then")

? → used to test condition → value 🧐
: → if not → then... ➡️

let age = 90;
let result = age >= 60 ? "Grandfather" : "Not a Grandfather"; // 👴
console.log(result); // "Grandfather" 🎉

9.### 🔍 Type Operators 🕵️
(work with types → what a value's type is)

typeof → examine primitive and non-primitive types 🔬
instanceof → checks if an object is an instance of a particular constructor/class(ONLY on Non-Primitive types) 🏗️

let score = 10;    // 🎯
console.log(typeof score); // number 🔢

Non-primitive types: typeof can't tell arrays apart ⚛️

let numbers = [];
console.log(typeof numbers); // "object" (arrays are technically objects) 📋

let numbers = [];
console.log(numbers instanceof Array); // true ✅

10.### 🔢 Binary Operators 🧮⚡

Bit → 0 or 1 🔘
Computers 💻 represent numbers using Binary

Decimal (10 digits): 0123456789 🔟
Binary represents numbers using powers of 2 ⚡:

2⁰- 1
2¹- 2
2²- 4
2³- 8

-The bigger the decimal number, the more bits you need to represent it in binary.

-Start every bit position at 0 — your blank template, e.g. for 4 bits: 0 0 0 0 (positions worth 8, 4, 2, 1).

2⁰- 1- 0
2¹- 2- 0
2²- 4- 0
2³- 8- 0

"If we want to find which numbers make 5, we follow this steps —" 🧮-
**"5 is within 1 → 8 (and we want 4 digits)"
This is saying: 5 fits somewhere in the range covered by 4 bits (which spans 0 up to 15, using the positions 8-4-2-1). So we set up our blank template with 4 zero-slots:

8 4 2 1
0 0 0 0

Step through each position, largest to smallest:

8 → does 8 fit into 5? No → bit stays 0
4 → does 4 fit into 5? Yes → bit becomes 1, remainder = 5 − 4 = 1
2 → does 2 fit into 1? No → bit stays 0
1 → does 1 fit into 1? Yes → bit becomes 1, remainder = 1 − 1 = 0

"5 = 4 + 1"
That's the record of which powers of 2 actually got used — you only picked up a 1 at the 4-slot and the 1-slot, nothing else. Adding those back up (4 + 1 = 5) confirms you found the right combination.

"5 = 0101 ✅"
That's just reading the four slots left to right in the order you filled them:

8 → 0
4 → 1
2 → 0
1 → 1

→ 0101

6 = 4 + 2

8 → 0
4 → 1
2 → 1
1 → 0

6 = 0110 ✅

🔢 Bitwise Operators ⚡

& — AND ➕
| — OR 🔀
^ — XOR ⚡
~ — NOT 🔄
<< — left shift ⬅️
>> — right shift ➡️
>>> — zero-fill right shift ➡️0️⃣

& → AND (both bits must be 1) 🤝

Rule 📏

1 & 1 → 1  ✅
1 & 0 → 0  ❌
0 & 1 → 0  ❌
0 & 0 → 0  ❌

i.e 5 & 3

5 → 0101
3 → 0011
------
0001 → came out 1 🎯

| → OR (at least one must be 1) 🔀

Rule 📏

1 | 1 → 1  ✅
1 | 0 → 1  ✅
0 | 1 → 1  ✅
0 | 0 → 0  ❌

i.e 4 | 6

4 → 0100
6 → 0110
------
0110 → came out as 0110, same as 6 🎯

⚡ XOR 🎲

(bits must be different)

Rule 📏

1 ^ 1 = 0  🔁
1 ^ 0 = 1  🔀
0 ^ 1 = 1  🔀
0 ^ 0 = 0  🔁

i.e 5 ^ 3

5 → 0101
3 → 0011
------
6 → 0110  🎯

🚫 NOT 🔄

(bits are flipped to the opposite bit)

~5 → -6  🔃  (JS flips all 32 bits; only the last 4 are shown as 1010)

We use the method ~n = -(n+1) → easier than calculating it directly 💡🧠

⬅️ Left Shift `<<` ⏪

(Shift every bit to the left and fill the empty spots on the right with 0. Each shift doubles the number.)

5 << 1 → 1010  # 10  🔟
5 << 2 → 10100 # 20  2️⃣0️⃣
5 << 3 → 101000 # 40 4️⃣0️⃣

What it means:

3 << 1 → 0011 → 0110 #6   6️⃣
3 << 2 → 0011 → 01100 #12 🔟➕2️⃣

💬 After the 1st left shift, the next shift you just add a zero and go on. ➕0️⃣

➡️ Right Shift `>>` ⏩

(You move every bit to the right — you do a reverse of left shift 🔄)

5 → 0101
3 → 0011

5 >> 1 → 0010 #2   2️⃣
3 >> 1 → 0001 #1   1️⃣

➡️➡️ `>>>` (also known as unsigned right shift) 0️⃣

It always fills the left side with 0 ⬅️0️⃣
It's a bit more advanced for the basics we are covering here 🎓

11.### 🔗 Comma Operator 🔢,🔢

Only the last value is kept. 🏆

let a = (1 + 2, 3 + 4);
console.log(a); // 7 🎯

12.### 🔤 String Operator ➕📝
The + operator can also concatenate strings. 🧷

let first = "Brian";
let last = "Kipchirchir";
let full = first + " " + last;
console.log(full); // "Brian Kipchirchir" 👤

DEV Community: Brian Kipchirchir

ALL YOU NEED TO KNOW ABOUT FUNCTION VARIATIONS

🚀 The Complete Guide to JavaScript Functions, return, Closures & Async Code

📐 PART 1: The Foundational Rules (read this first!)

🥇 Rule 1: Printing and returning are two completely different actions

🥈 Rule 2: A function call is an expression, and it always evaluates to something

🥉 Rule 3: Code runs top to bottom, and JavaScript won't skip ahead

🧩 PART 2: Function Basics

🤔 What is a function?

🎛️ Default parameters

🔍 PART 3: return vs console.log — Every Variation

Category A: Calling the function plainly (not wrapped in an outer console.log)

Category B: Wrapping the call in an outer console.log

Category C: Storing in a variable first

Category D: Calling the function twice — once bare, once wrapped

Category E: return positioning and reachability

Category F: Returning the result of a console.log() call

Category G: Multiple console.logs inside one function

🏹 PART 4: Arrow Functions — the Hidden Auto-Return Rule

✨ Concise body (no braces) — automatically returns the expression

📦 Block body (curly braces {}) — behaves exactly like a normal function

📊 Quick-reference table

🕳️ The object-literal trap

⏳ PART 5: return on the Same Line vs. the Next Line (the ASI Trap)

🤨 Why this happens

❌ The broken version

✅ The fix — keep return and its value on the same line

🕸️ PART 6: Nested Function Calls — Tracing Values Through Multiple Functions

✅ The working version

⚠️ The broken version — a missing return breaks the whole chain

🔗 PART 7: Closures

⚠️ Common mistake — calling counter() again resets everything

✅ Correct — store the returned function once, and reuse that

⏰ PART 8: setTimeout — What It Is and Why You'd Use It

🤔 What is setTimeout?

🎛️ Its two arguments

🧵 Why does JavaScript behave this way?

🎯 Why would you actually need it?

❌ Why return doesn't work inside setTimeout

📞 PART 9: The Callback Pattern — Delivering a Value Later

🔬 Breaking down exactly what's happening

🧲 How callback is reached, not "passed," inside setTimeout

🔄 The full chain, step by step

✅ Why this fixes the original problem

🤝 PART 10: Promises — a More Structured Way to Handle "Later"

🎟️ What is a Promise?

🏗️ Creating a Promise

🔬 Full walkthrough

🎭 Three separate functions, three separate jobs

✅ Why this avoids the original problem

⚡ The async/await equivalent

🏆 PART 11: Master Rules — the Short Version

📋 Quick-Reference Summary Tables

The Local Dev Setup Cheat Sheet I Wish I Had When I Started 🐍⚡

Day 1: Variables, Data Types & Operators

📓✨ JavaScript Notes 🚀

🧱 Variables, Data Types & Operators 📚

📦 Variables 🗂️

📦 Data Type 🗂️

🎣 Hoisting 🪝

🧮 Operators

🔢 Bitwise Operators ⚡

⚡ XOR 🎲

🚫 NOT 🔄

⬅️ Left Shift << ⏪

➡️ Right Shift >> ⏩

➡️➡️ >>> (also known as unsigned right shift) 0️⃣

🚀 The Complete Guide to JavaScript Functions, `return`, Closures & Async Code

🔍 PART 3: `return` vs `console.log` — Every Variation

Category A: Calling the function plainly (not wrapped in an outer `console.log`)

Category B: Wrapping the call in an outer `console.log`

Category E: `return` positioning and reachability

Category F: Returning the result of a `console.log()` call

Category G: Multiple `console.log`s inside one function

📦 Block body (curly braces `{}`) — behaves exactly like a normal function

⏳ PART 5: `return` on the Same Line vs. the Next Line (the ASI Trap)

✅ The fix — keep `return` and its value on the same line

⚠️ The broken version — a missing `return` breaks the whole chain

⚠️ Common mistake — calling `counter()` again resets everything

⏰ PART 8: `setTimeout` — What It Is and Why You'd Use It

🤔 What is `setTimeout`?

❌ Why `return` doesn't work inside `setTimeout`

🧲 How `callback` is reached, not "passed," inside `setTimeout`

🎟️ What is a `Promise`?

⚡ The `async`/`await` equivalent

⬅️ Left Shift `<<` ⏪

➡️ Right Shift `>>` ⏩

➡️➡️ `>>>` (also known as unsigned right shift) 0️⃣