← Back to the Build Your Homepage series

⚡

EPISODE 01

let · const · primitive vs object · typeof · if · switch · for · while · ternary · declaration · arrow · default params · rest/spread · map · filter · reduce · find · sort

Variables & Types · Control Flow · Functions · Arrays

Declare variables properly with let and const, understand JavaScript's primitive and object types, and use typeof to inspect values. Make decisions and repeat actions: if/else chains, switch, for/of/in, while, and the ternary expression for one-liners. Master the three function forms (declaration, expression, arrow), default and rest parameters, and the spread operator. Stop writing for-loops for array transformations. Use map, filter, reduce, find, and sort — the bread and butter of modern JavaScript.

JavaScriptletconsttypestypeofcontrol flowifswitchforwhilefunctionarrowdefaultrestspreadarraymapfilterreduceimmutability

Duration

⏱ About 1.5 hours + About 1.5 hours + About 2 hours + About 2 hours

Level

📊 Beginner

Prerequisite

🎯 Lessons 1–4

OUTCOME

Pick the right declaration for every value and predict its type / Choose the right control structure for each problem / Write reusable, well-typed functions in modern JavaScript / Transform any array declaratively without manual loops

What you'll learn

1Choose between let and const (never var)
2Distinguish primitives from objects
3Use typeof to inspect a value's type
4Convert between number, string, and boolean safely
5Write clean if/else chains and use switch when appropriate
6Loop with for, for...of, for...in correctly
7Use the ternary expression for concise conditionals
8Break and continue to control loop flow
9Choose between function declaration, expression, and arrow
10Use default and rest parameters
11Apply the spread operator to clone and combine
12Understand the basics of closures
13Use map to transform each item
14Use filter to keep matching items
15Use reduce to collapse to a single value
16Use find, some, every, includes for queries

Variables & Types

Declare variables properly with let and const, understand JavaScript's primitive and object types, and use typeof to inspect values.

1. let, const, var

javascript

let count = 0;          // mutable
const NAME = "Alice";   // immutable binding
var legacy = true;      // legacy, do not use

count = 1;              // OK
// NAME = "Bob";         // TypeError

const by default — most variables never need to change
let when you must reassign (loop counters, conditional values)
var has function scope and hoisting quirks — avoid entirely

2. Primitive Types

Type	Example	typeof
number	42, 3.14, NaN, Infinity	"number"
string	"hello", `template`	"string"
boolean	true, false	"boolean"
undefined	undefined	"undefined"
null	null	"object" (a famous bug)
bigint	9007199254740993n	"bigint"
symbol	Symbol("id")	"symbol"

3. Objects

javascript

const user = { name: "Alice", age: 30 };
const nums = [1, 2, 3];
const now  = new Date();
typeof user;  // "object"
typeof nums;  // "object" (arrays are objects)
Array.isArray(nums);  // true

💡

Use Array.isArray() to detect arrays — typeof returns "object" for them.

4. Type Conversion

javascript

Number("42");       // 42
String(42);         // "42"
Boolean(0);         // false
Boolean("");        // false
Boolean("hello");   // true

// Coercion gotchas
"5" + 3;            // "53"  (string concatenation)
"5" - 3;            // 2     (numeric subtraction)
"5" == 5;           // true  (loose equality)
"5" === 5;          // false (strict — use this!)

Control Flow

Make decisions and repeat actions: if/else chains, switch, for/of/in, while, and the ternary expression for one-liners.

1. if / else / ternary

javascript

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else {
  grade = "F";
}

// Ternary for short value pickers
const label = age >= 18 ? "adult" : "minor";

2. switch

javascript

switch (day) {
  case "Sat":
  case "Sun":
    type = "weekend";
    break;
  default:
    type = "weekday";
}

⚠️

Always include break — without it, execution "falls through" to the next case, which is a frequent source of bugs.

3. Loops

javascript

// classic for
for (let i = 0; i < 5; i++) { console.log(i); }

// iterate values (preferred for arrays)
const items = ["a", "b", "c"];
for (const x of items) { console.log(x); }

// iterate keys (for objects)
const user = { name: "Alice", age: 30 };
for (const key in user) { console.log(key, user[key]); }

// while
let n = 10;
while (n > 0) { n--; }

4. break and continue

javascript

for (const n of nums) {
  if (n < 0) continue;   // skip this iteration
  if (n > 100) break;    // stop looping
  console.log(n);
}

Functions

Master the three function forms (declaration, expression, arrow), default and rest parameters, and the spread operator.

1. Three Forms

javascript

// 1. Function declaration (hoisted)
function add(a, b) {
  return a + b;
}

// 2. Function expression
const sub = function (a, b) {
  return a - b;
};

// 3. Arrow function (modern)
const mul = (a, b) => a * b;
const sq  = n => n * n;          // single arg, no parens
const noop = () => {};            // no args

Arrow functions do not have their own this — handy in callbacks and class methods.

2. Default & Rest Parameters

javascript

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}

function sum(...nums) {        // rest collects extra args into array
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4);   // 10

3. Spread Operator

javascript

const a = [1, 2, 3];
const b = [4, 5, 6];
const combined = [...a, ...b];        // [1,2,3,4,5,6]
const copy     = [...a];               // shallow copy

const user = { name: "Alice", age: 30 };
const updated = { ...user, age: 31 };  // new object with overridden age

4. Closures

javascript

function makeCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}
const counter = makeCounter();
counter();  // 1
counter();  // 2

The inner function remembers count from its enclosing scope, even after makeCounter has returned.

Arrays

Stop writing for-loops for array transformations. Use map, filter, reduce, find, and sort — the bread and butter of modern JavaScript.

1. map, filter, reduce

javascript

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);          // [2, 4, 6, 8, 10]
const evens   = nums.filter(n => n % 2 === 0); // [2, 4]
const sum     = nums.reduce((acc, n) => acc + n, 0); // 15

// Chain them
const sumOfDoubledEvens = nums
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .reduce((a, b) => a + b, 0);   // 12

2. Query Methods

javascript

const users = [
  { name: "Alice", age: 30 },
  { name: "Bob",   age: 25 },
];

users.find(u => u.age > 28);     // { name: "Alice", age: 30 }
users.findIndex(u => u.name === "Bob"); // 1
users.some(u => u.age > 50);     // false
users.every(u => u.age > 20);    // true
nums.includes(3);                 // true

3. Sorting (Immutable)

javascript

const sorted = [...nums].sort((a, b) => a - b);    // ascending
const desc   = [...nums].sort((a, b) => b - a);    // descending
const byAge  = [...users].sort((a, b) => a.age - b.age);

⚠️

sort() mutates the original array. Spread it first ([...arr].sort()) to keep the original untouched.

4. Other Useful Methods

javascript

nums.slice(1, 3);           // [2, 3] (immutable)
nums.concat([6, 7]);        // [1,2,3,4,5,6,7]
nums.join(", ");            // "1, 2, 3, 4, 5"
Array.from({ length: 3 }, (_, i) => i * 2);  // [0, 2, 4]

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗

Comments 0

No comments yet. Be the first.

Only members can comment.

Comments with ads, abuse, personal information or illegal content are hidden or removed. Comments are shown with your nickname. Privacy Policy