
JavaScript offers several loop constructs. Picking the right one matters for correctness, readability, and async behavior.

<ExamplePair>
<ExampleProse>

A classic `for` loop gives full control over the index - useful when you need the position, not just the value.

</ExampleProse>
<ExampleCode>

```js
const items = ["a", "b", "c"];

for (let i = 0; i < items.length; i++) {
  console.log(i, items[i]);
}
// 0 a
// 1 b
// 2 c
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`for-of` iterates over the _values_ of any iterable - arrays, strings, Sets, Maps, and generators. It's the modern default for sequential iteration.

</ExampleProse>
<ExampleCode>

```js
const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}
// red
// green
// blue
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`for-in` iterates over the _keys_ of an object - including enumerable inherited properties. Avoid it on arrays; it can surface unexpected prototype keys and the order is not guaranteed.

</ExampleProse>
<ExampleCode>

```js
const user = { name: "Ana", role: "admin" };

for (const key in user) {
  console.log(key, user[key]);
}
// name Ana
// role admin
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`.forEach` passes each value to a callback but cannot be `break`-ed out of and cannot be awaited. `for-of` is safer in both situations.

</ExampleProse>
<ExampleCode>

```js
const ids = [1, 2, 3];

// WRONG - forEach does not await the async callback
ids.forEach(async (id) => {
  await saveToDb(id); // runs fire-and-forget
});

// CORRECT - sequential async iteration
for (const id of ids) {
  await saveToDb(id);
}

// CORRECT - parallel with bounded result collection
await Promise.all(ids.map((id) => saveToDb(id)));
```

</ExampleCode>
</ExamplePair>

<InProduction>
The `forEach` + `async` trap is one of the most common async bugs in Node.js codebases: the function returns immediately while the callbacks run in the background, so callers believe the work is done before it is. Use `for-of` with `await` for serial processing, or `Promise.all` with `.map` for parallel - and be explicit about which concurrency model you want. Unbounded `Promise.all` across 500 records can saturate a database connection pool just as effectively as a bug.
</InProduction>


for, for-of, for-in, forEach - which to use and why forEach can't be awaited.

Loops


Functions are the primary unit of reuse in JavaScript. How you declare them affects hoisting, `this` binding, and readability.

<ExamplePair>
<ExampleProse>

A **function declaration** is hoisted - the name and body are available before the line they appear on. A **function expression** is only available after the assignment is evaluated.

</ExampleProse>
<ExampleCode>

```js
// declaration - works before its definition line
greet("World"); // Hello, World

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

// expression - not hoisted; calling it before this line throws
const farewell = function (name) {
  console.log("Goodbye, " + name);
};
farewell("World"); // Goodbye, World
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Default parameters provide fallback values when an argument is `undefined`. They are evaluated at call time, not definition time.

</ExampleProse>
<ExampleCode>

```js
function connect(host = "localhost", port = 5432) {
  console.log(`${host}:${port}`);
}

connect();               // localhost:5432
connect("db.prod", 5433); // db.prod:5433
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

The rest parameter (`...args`) collects all remaining arguments into a real array. It must be the last parameter.

</ExampleProse>
<ExampleCode>

```js
function sum(first, ...rest) {
  return rest.reduce((acc, n) => acc + n, first);
}

console.log(sum(1, 2, 3, 4)); // 10
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`this` inside a regular function is determined at call time - it is the object the function is called on, not where it was defined.

</ExampleProse>
<ExampleCode>

```js
const counter = {
  count: 0,
  increment() {
    this.count++;
    console.log(this.count);
  },
};

counter.increment(); // 1

const fn = counter.increment;
fn(); // TypeError in strict mode (this is undefined); NaN in sloppy mode (this is globalThis)
```

</ExampleCode>
</ExamplePair>

<InProduction>
Positional parameters past two or three make call-sites unreadable: `createUser("Ana", true, false, null, 3)` - what does each boolean mean? Destructure an options object instead: `createUser({ name, admin, verified, role, retries })`. It survives parameter reordering, makes call-sites self-documenting, and lets callers omit optional fields cleanly. Flag it in code review when you see more than three positional args.
</InProduction>


Declaration vs expression, hoisting, default params, rest params, and dynamic `this`.

Functions


Conditionals branch execution based on whether an expression is truthy or falsy.

<ExamplePair>
<ExampleProse>

`if/else` is the fundamental branch. The `else if` chain handles multiple cases.

</ExampleProse>
<ExampleCode>

```js
const score = 72;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C or below");
}
// C or below
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

The ternary operator `condition ? a : b` is a compact inline branch - appropriate for simple value selection, not for nesting logic.

</ExampleProse>
<ExampleCode>

```js
const age = 20;
const label = age >= 18 ? "adult" : "minor";
console.log(label); // adult
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`||` returns the first truthy operand (or the last value if all are falsy); `&&` returns the first falsy operand (or the last value if all are truthy). `??` (nullish coalescing) returns the right side only when the left is `null` or `undefined` - unlike `||`, it does not treat `0` or `""` as missing.

</ExampleProse>
<ExampleCode>

```js
const requestedLimit = 0;

const withOr  = requestedLimit || 100;  // 100 - wrong! 0 is falsy
const withNull = requestedLimit ?? 100; // 0   - correct

console.log(withOr);   // 100
console.log(withNull); // 0
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`switch` matches by strict equality. Without a `break`, execution falls through into the next case - a common source of bugs.

</ExampleProse>
<ExampleCode>

```js
const status = "pending";

switch (status) {
  case "pending":
    console.log("queued");
    // no break - falls through to "active"!
  case "active":
    console.log("running");
    break;
  case "done":
    console.log("finished");
    break;
  default:
    console.log("unknown");
}
// queued
// running
```

</ExampleCode>
</ExamplePair>

<InProduction>
The `||` defaulting pattern - `const host = config.host || "localhost"` - silently swallows legitimate falsy values like `0`, `""`, and `false`. This bites feature-flag evaluations, counter initializations, and port numbers. Default to `??` for optional config and only reach for `||` when you genuinely want to treat all falsy inputs as absent.
</InProduction>


if/else, ternary, logical operators as control flow, and switch's non-obvious fallthrough.