Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Beginners who want a strong coding foundation before diving deeper into React
• Learners who can write code, but still feel logic gets messy fast
• Anyone who wants to stop “trial and error coding” and start coding with intent

What you’ll learn

• Variables, operators, and conditionals in practical app logic
• Loops and control flow without overcomplicating things
• Function styles, scope basics, and clearer TypeScript function contracts

Why this topic matters

Most React bugs are actually JavaScript logic bugs in disguise. If your basics are shaky, everything feels harder: state updates, rendering conditions, and debugging.

This chapter helps you think clearly before touching more advanced patterns.

Core concepts

Variables and scope

• const for values that do not reassign
• let for values that change

Quick reality check:

• Overusing let usually means your logic is doing too much.
• Start with const by default, then switch only when needed.

Conditionals and loops

• if/else, switch, ternary
• for, while, for...of

In real projects:

• You use conditions to handle UI states and business rules.
• You use loops mostly to process lists from APIs or forms.

Functions

• Declaration, expression, arrow function
• Parameters and return values

Functions should do one clear job. If one function does five things, split it.

Step-by-step walkthrough

Step 1 — Build small logic blocks

Start with one condition + one loop + one small function.

Target: make each block readable in under 10 seconds.

Step 2 — Refactor for readability

Rename variables clearly, remove vague names, and reduce deep nesting.

Step 3 — Add TypeScript annotations

Type key parameters and return values so function intent is obvious.

Practical examples

Example 1 — Conditional utility

function getDiscount(level: "none" | "silver" | "gold"): number {
	if (level === "gold") return 0.2;
	if (level === "silver") return 0.1;
	return 0;
}

Why this matters:

• The possible input values are explicit.
• Invalid values get blocked early.

Example 2 — Loop summary

const tasks = ["setup", "typescript", "react"];
for (const task of tasks) {
	console.log(`Done: ${task}`);
}

Real case:

• This pattern is the base of rendering lists in frontend apps.

Common mistakes and how to avoid them

• Reassigning constants -> use let only when a value must change
• Long “god functions” -> split into focused helper functions
• Ignoring return types -> define expected outputs explicitly
• Nesting conditions too deep -> extract checks into named helper functions

Mini Project

• Build a daily task checker with:
• task priority,
• completion status,
• summary output (done vs pending).

Bonus:

• Add a function that returns only high-priority pending tasks.

Quick practice

• Write one function using if/else
• Rewrite the same logic with switch
• Convert one function expression to arrow syntax
• Explain in one sentence: when is switch cleaner than if/else?

Key takeaways

• Strong JS fundamentals make React and TypeScript easier to apply
• Clean, small functions are easier to debug and maintain
• Type annotations turn assumptions into explicit contracts

Next step

Continue to [05. Arrays, Objects, and Data Handling].