Syntax, Types & Control Flow

Core concepts

1. Primitives: string, number, bigint, boolean, undefined, symbol, null. — W3Schools: JavaScript data types
2. Equality: Prefer === / !==; == coerces types and causes interview traps. — MDN: Equality comparisons
3. Template literals: Backticks for interpolation and multiline strings. — MDN: Template literals
4. Control flow: if/else, switch, for, for...of, while, break/continue. — javascript.info: Conditional branching

const count = 3;
const label = count === 1 ? 'item' : 'items';

for (const n of [1, 2, 3]) {
  if (n === 2) continue;
  console.log(n);
}

1. Truthy / falsy: 0, '', null, undefined, NaN are falsy — useful in conditions but don't replace explicit checks in production APIs. — MDN: Falsy

Concept videos

YouTube lessons for these topics. On a large screen they open in the reading panel next to the roadmap, same as the article links on each core concept.

• Primitives & types — JavaScript Data Types (Programming with Mosh)
• Equality — JavaScript == vs === (Programming with Mosh)
• Control flow — JavaScript Control Flow (freeCodeCamp)

Explanation

JavaScript variables are labels on boxes, but the language does not paint the box with a permanent type sticker. The value inside carries the type ("hello" is a string, 42 is a number). That flexibility is powerful and confusing — like a toolbox where any drawer can hold any tool until you open it.

Primitives

Primitives are the atomic pieces: text, numbers, true/false, missing values. They copy by value — when you pass 5 into a function, the function gets its own 5, not a shared remote control. bigint handles integers too large for normal numbers; symbol creates unique keys for advanced object patterns. You rarely declare types in JS; you learn to recognize shapes by reading values.

Equality

=== asks, “Are these the same type and the same value?” == tries to convert types first, which produces famous surprises (0 == false is true). In interviews and production, stick to === unless you have a documented reason not to. Think of == as an over-eager translator who guesses what you meant.

Template literals

Backticks let you embed expressions: `Hello, ${name}`. They also preserve line breaks for HTML or SQL snippets. Before template literals, developers chained + and '\\n' — readable code matters when you debug at 2 a.m.

Control flow

Control flow is choosing paths: skip items, repeat work, branch on roles. for...of is the friendly loop over arrays and strings; for with indexes still appears in older code. switch shines when one variable maps to many outcomes (HTTP status handling). break and continue are traffic signs inside loops — use them sparingly but confidently.

Truthy and falsy

In an if (value) check, JavaScript asks, “Is this value convincing enough to count as true?” Empty strings and zero count as false-like even though they are valid data. That is handy for guards but dangerous for APIs (if (quantity) fails when quantity is 0). Prefer explicit comparisons (quantity !== null) when building systems other people rely on.

What Is It?

JavaScript is dynamically typed: variables do not carry types; values do at runtime.

Modern style favors block-scoped let/const, strict equality, and clear control flow over clever one-liners.

Primitives (string, number, boolean, null, undefined, symbol, bigint) behave differently from objects when you copy or compare them.

Why Should I Care?

Type confusion and loose equality cause subtle bugs that pass code review until production traffic hits.

Interviewers love == vs === and truthy/falsy because they reveal whether you predict runtime behavior.

Real World Analogy

Types in JavaScript are stickers on values, not labels on boxes. The box (let x) can hold different stickers over time unless you treat it carefully with const.

Visual Mental Model

value ----> type
  42      number
  'hi'    string
  true    boolean
  variable points at value (not type)

Beginner Explanation

Default to const, use let when you reassign, avoid var. Use === unless you have a reason for coercion. Learn if, loops, and switch — they show up in every codebase.

Smallest Possible Example

const count = 3;
if (count === 3) console.log("strict equality wins");
for (const n of [1, 2, 3]) console.log(n);

Common Mistakes

❌ Using == everywhere 'because it works'.

== coerces types. '0' == 0 is true and creates puzzles in conditionals.

❌ Mutating objects shared across functions without noticing.

Objects are passed by reference. Two variables can point at the same object.

❌ Relying on hoisted var in new code.

var function-scopes and hoists in ways that surprise teams used to let/const.

Real Project Example

TypeScript at Microsoft, Slack, and Airbnb exists because large JS codebases need clearer contracts — but TS still compiles to this dynamic runtime.

Payment forms at Stripe depend on careful parsing and comparison of user input — coercion bugs become money bugs.

Build This Mini Project

In a single file, write five comparisons with == and ===, log the results, and comment which ones surprised you. Convert the file to use only === and const.

Interview Question

What is the difference between null and undefined?

Both are falsy, but undefined usually means a variable was declared but not assigned, or a function returned nothing. null is an intentional empty value assignment. typeof null returning 'object' is a long-standing language bug you should know about.

Key Takeaways

• Prefer const and ===.
• Values have types; variables do not.
• Learn truthy/falsy tables once, reference them until automatic.
• Control flow readability beats golf.

Resources

• MDN: Grammar and types
• Bench.js — micro-benchmark mindset

The 60-second story

Picture a coat check at a theater. You hand over a jacket. They hand you a ticket, not a description of the fabric. The ticket is just a claim. The jacket in the back still has a color, a size, and a pocket full of receipts. The ticket does not.

JavaScript variables are tickets. The value is the jacket. const means “this ticket stays clipped to this hook.” let means “I might clip this ticket to a different jacket later.” var is the old system where tickets wandered into the wrong room and everyone pretended that was fine. You can ignore var in new code the way you ignore a coat check that loses sleeves.

The language does not stamp a permanent type on the ticket. The jacket carries the type. "hello" is text. 42 is a number. true is a yes. null is a hook with a tag that says “nothing is here on purpose.” undefined is a hook nobody has tagged yet. That sounds picky until you have spent an hour debugging the difference.

Map it before it fades.

• The ticket is the variable name.
• The jacket is the value.
• Fabric type is the value’s type: string, number, boolean, and the rest.
• === is “same fabric and same jacket.”
• == is a hurried clerk who says a empty hanger and the word “no” are close enough. They are not.
• Backticks are a label gun that can print Guest ${name} instead of taping paper scraps together.
• if, for, and while are the ropes and signs that decide who walks where.
• Truthy and falsy are the clerk’s habit of treating 0 and '' as “nothing,” even when zero tickets sold is real news.

const seats = 0;
const label = seats === 1 ? 'seat' : 'seats';
if (seats) {
  console.log('this never runs');
}

seats is a real number. It is also falsy. The if (seats) rope treats zero like an empty hook. That shortcut is handy for “did the user type anything?” and dangerous for quantities, prices, and scores. Prefer seats !== null when zero is a valid answer.

Equality got two operators because early JavaScript tried to be helpful across types, the way a clerk converts “no” into a number without asking. Interviews love that trap. Production code should not. Use === unless you are writing a comment that explains the exception.

Template literals exist because concatenating strings with + is how you build a sentence out of luggage tags. Backticks let the sentence stay a sentence.

Control flow exists because a program that always does the next line is a tour group with no choices. for...of walks each item. continue means “skip this guest, keep the line moving.” break means “close the rope.”

Mental model: tickets and jackets. Names are claims. Values wear the type. Zero can be a real jacket that a lazy if still treats as missing.

Tell it back: variables do not have types, values do. const by default. === unless you enjoy surprises. Do not let if (count) throw away a legitimate zero.