freedzhost.cloud

JavaScript module 1: the fundamentals, console in hand

Level BeginnerEstimated time 14 hRead first JavaScript path: 59 days to programming for realA word you don't know? Glossary

Fourteen sessions to lay the foundations: values and their types, variables, operators, strings, arrays, objects, conditions, loops and functions. Everything happens in the browser console or in Node, with an instant result in front of you. You already know what HTML and CSS are; here, we learn the language itself. Method: 20 minutes of theory, 30 of practice, 10 of recap.

Day 1 — The console and Node: your lab

Goal: install Node.js LTS, open the browser console, and run your first expressions in both.

Theory (20 min)

JavaScript was born in the browser, but it no longer lives only there. Two environments will accompany you throughout the path:

  • The browser console: open any page, press F12, pick the "Console" tab. You type an expression, Enter, the result appears. It is a REPL (read-eval-print loop: read, evaluate, print, repeat). Perfect for testing an idea in three seconds.
  • Node.js: the same JavaScript engine (V8, Chromium's), taken out of the browser, to write real programs in files and run them in the terminal. The browser console knows the current page; Node knows your files and your machine.

A program is a sequence of instructions in a text file. JavaScript is an interpreted language: the engine reads and executes, with no visible compilation step. The language version is called ECMAScript, shortened to ES: this path uses modern JavaScript (ES2022 and beyond), the one every recent browser and Node LTS understands.

Practice (30 min)

  1. Install Node.js from nodejs.org, choosing "LTS". On Windows, the installer does everything; on macOS/Linux, the official installer or your package manager works.
  2. Open a terminal and type node --version. Success criterion: it prints something like v22.11.0 or newer. If "command not found": close the terminal, reopen it, and retry.
  3. Type node alone: you enter Node's REPL (the > prompt appears). Type 2 + 2, Enter: it answers 4. Exit with Ctrl+D (or .exit).
  4. Open the browser console (F12 → Console), type 2 + 2, Enter: same answer. Same language, two hosts.
  5. In the notebook: your system, Node's version, and the two ways to open a REPL.

Agent tips: an LLM agent diagnoses an installation snag in one question: "here is what node --version answers: [pasted output], what is the problem?". Trap: it cannot see your screen — paste the exact output. Proof to demand: the command that shows it is fixed, not an explanation.

Recap (10 min)

Three lines: what a REPL is, the difference between the browser console and Node, what "LTS" means. Then, without notes: close everything, reopen the browser console and have it compute 6 × 7.

Day 2 — Values and their types

Goal: recognise JavaScript's basic types and interrogate any value with typeof.

Theory (20 min)

A program manipulates values, and every value has a type — its nature, which decides what you can do with it. JavaScript has a handful to know by heart:

  • number: numbers, integers and decimals alike (42, -3.5). A single type, unlike other languages. Special case: NaN ("not a number"), the result of an impossible computation like "abc" * 2 — paradoxically of type number.
  • string: text, between quotes ("hello", 'hi').
  • boolean: true or false, true and false, nothing else.
  • undefined: "no value", what a never-filled variable holds.
  • null: "empty value" put there on purpose by the programmer. The nuance: undefined is an oversight, null is a choice.
  • There are also bigint, symbol, and objects (days 6 and 7) — you will meet them later.

The typeof operator interrogates a value: typeof 42 is "number", typeof "hi" is "string". A historical quirk to know: typeof null answers "object" — a bug from 1995, kept so as not to break the web. Do not rely on it.

What is typeof NaN?

  1. "nan"
  2. "undefined"
  3. "number"
Answer

"number": NaN is the number value that signals a senseless computation, like 0 / 0.

You read undefined in the console. The most likely cause is…

  1. the programmer wrote null somewhere
  2. a variable was created but never filled, or an expression returns nothing
Answer

undefined signals an absence, not a choice. null, on the other hand, is chosen.

Practice (30 min)

  1. In the browser console or the Node REPL, evaluate one by one: typeof 42, typeof 4.2, typeof "42", typeof true, typeof undefined, typeof null, typeof NaN.
  2. Success criterion: for each one, you wrote your prediction in the notebook first, then compared with the console. Note the surprises.
  3. Produce a NaN yourself with "abc" * 2, then test Number.isNaN("abc" * 2): that is the right way to detect a NaN (NaN === NaN is false, a classic trap).
  4. Test typeof typeof 42 and explain the result in the notebook (typeof always returns a string).

Agent tips: "list the values for which typeof surprises a beginner": an agent will give you the null/NaN/function trio. Trap: it may "run it in its head" and miss an edge case. Proof: you retype each case in the console and compare.

Recap (10 min)

Three lines: the five basic types, the undefined/null difference, the typeof null trap. Without notes: write from memory the typeof of "false", false and 0 / 0, then check.

Day 3 — let and const: naming values

Goal: create variables with let and const, know which to pick, and name things well.

Theory (20 min)

A variable is a name pointing at a value: a label stuck on a box. In modern JavaScript, you declare it with let or const:

let score = 0;
const name = "Ada";
score = score + 10;

let creates a variable you can reassign (change the box's content); const creates a constant binding: reassigning throws an error. A simple, modern rule: const by default, let only when the value must change (a counter, a total). If everything is const, no name ever changes meaning, and the code reads like a list of facts.

You will meet var in old code and old tutorials: it is let's ancestor, with tricky scoping rules. In this path, var does not exist.

Naming: the JavaScript convention is camelCase — birthDate, coffeeCount. Letters, digits (not first), _ and $; no spaces. A good name says what the box holds: total beats x.

After const a = 5; then a = 7;, what happens?

  1. a becomes 7
  2. a TypeError: reassigning a const is forbidden
  3. a stays 5, silently
Answer

The TypeError is your friend: it pinpoints the exact line where you attempted the impossible.

Practice (30 min)

  1. In the REPL, type:
const firstName = "Ada";
const birthYear = 1815;
let year = 2026;
let age = year - birthYear;
age;
  1. Success criterion: the last line prints the age computed by the machine, not by you.
  2. Change year to 2030 (it is a let, that is allowed), recompute age, print it: it follows.
  3. Try firstName = "Grace"; and read the TypeError. On purpose: const protects.
  4. Write a forbidden name (let 2ndPlace = 1;), read the SyntaxError, fix it.
  5. Mentally replace each let with const: which ones would break? Those are exactly the variables that "move".

Agent tips: "review this code and say which variables should be const" is a review an agent does well. Trap: it may rewrite the whole file along the way. Proof to demand: the list of proposed changes, not a new file.

Recap (10 min)

Three lines: let vs const, why const by default, the naming rules. Without notes: declare a const for your city, a let for a counter, increment the counter twice.

Day 4 — Numbers and operators

Goal: make JavaScript compute like a calculator, and know the two number traps.

Theory (20 min)

The arithmetic operators:

  • + addition, - subtraction, * multiplication;
  • / division: 10 / 4 gives 2.5;
  • % remainder of the division ("modulo"): 10 % 3 gives 1 — and n % 2 === 0 tests whether n is even;
  • ** exponentiation: 2 ** 10 gives 1024;
  • parentheses set the order: (2 + 3) * 4 gives 20, 2 + 3 * 4 gives 14.

First trap: decimals are approximated. 0.1 + 0.2 prints 0.30000000000000004. Numbers are stored as binary floating point, and 0.1 has no exact binary form — like 1/3 in decimal. For money, count in cents with integers. Second trap: + glues text. "5" + 3 gives the string "53", not 8. If a value comes from a form field or a file, it is a string: convert with Number("5") before computing.

To round: Math.round(2.6) gives 3, Math.floor(2.6) gives 2, Math.ceil(2.1) gives 3. And the shortcuts: score += 10 is score = score + 10, counter++ adds 1.

Write average(a, b), returning the average of two numbers.

function average(a, b) {
}
Answer
function average(a, b) {
  return (a + b) / 2;
}

Practice (30 min)

  1. In the REPL, compute: 7 % 3, 2 ** 10, (2 + 3) * 4, 100 / 7. Predict each result in the notebook before Enter.
  2. Check both traps: 0.1 + 0.2, then "5" + 3, then the fix Number("5") + 3.
  3. Compute the tax-included price of a $19.99 item with 20% tax, in cents: const priceCents = 1999; then multiply by 1.2 and round with Math.round. Success criterion: you get 2399 cents, not a never-ending decimal.
  4. Pass the boxed average exercise above: write the function in the frame, run it, get the green light.

Agent tips: "rewrite this computation in cents to avoid float errors" is an instruction an agent applies well. Trap: it may return a result in dollars with two decimals that "looks right". Proof: the executed check Math.round(1999 * 1.2) === 2399, not a re-read.

Recap (10 min)

Three lines: modulo and its "even/odd" use, the float trap and its fix, the + trap on strings. Without notes: compute the remainder of 1000 divided by 7, then the square of 12.

Day 5 — Strings

Goal: handle text: measure, slice, search, assemble with template literals.

Theory (20 min)

A string is a sequence of characters between quotes. The daily operations:

  • "hello".length → 5: the character count;
  • "hello".toUpperCase() → "HELLO"; toLowerCase() the other way;
  • "hello".slice(0, 3) → "hel": from character 0 included to 3 excluded;
  • "hello".includes("ell") → true; startsWith and endsWith exist too;
  • " a ".trim() → "a": trims spaces at the edges;
  • "a,b,c".split(",") → an array ["a", "b", "c"] (arrays arrive tomorrow).

Key point: strings are immutable — no method modifies the original string, they all return a new one. let s = "hey"; s.toUpperCase(); leaves s at "hey"; you must write s = s.toUpperCase().

To assemble text with values, the template literal with backticks is the modern standard:

const firstName = "Ada";
const age = 36;
console.log(`${firstName} is ${age} years old.`);

Anything between ${} is evaluated as JavaScript and inserted. No more unreadable "..." + variable + "...".

Write greeting(name), returning the string Hello <name>! with a template literal.

function greeting(name) {
}
Answer
function greeting(name) {
  return `Hello ${name}!`;
}

Practice (30 min)

  1. In the REPL: const language = "JavaScript"; then print its length, its uppercase version, the first four letters with slice, and test language.includes("Script").
  2. Success criterion: you wrote your four predictions before running, and language still holds "JavaScript" at the end (immutability confirmed).
  3. With a template literal, produce the sentence Ada is 36 years old. from the course's two variables, without any +.
  4. Clean the messy input " Ada " with trim(), then recount its length.
  5. Pass the boxed greeting exercise.

Agent tips: "rewrite this concatenation as a template literal": an agent does it instantly. Trap: it may forget the backticks and return quotes. Proof: run the line; if the console prints ${name} as-is, those were not backticks.

Recap (10 min)

Three lines: length, slice and includes; immutability; template literal syntax. Without notes: from "programming", print its length and its last five letters.

Day 6 — Arrays: storing a list

Goal: create an array, read and modify its elements, add and remove.

Theory (20 min)

An array is an ordered list of values, between square brackets:

const groceries = ["apples", "rice", "coffee"];
groceries[0];        // "apples": the first element is at index 0
groceries.length;    // 3
groceries[2];        // "coffee": the last one is at index length - 1

The index starts at 0, not 1: that is the convention of nearly every language, and the source of the most common beginner mistake (the "off-by-one"). groceries.at(-1) reads the last element without arithmetic.

Adding and removing, at the end:

  • groceries.push("tea") appends (and returns the new length);
  • groceries.pop() removes the last element and returns it;
  • groceries.includes("rice") tests presence; groceries.indexOf("rice") gives the index or -1.

An array declared const can receive pushes: const freezes the binding to the array, not its content. This is day 3's surprise revealed: const t = []; t.push(1); is legal, t = []; is not. To walk an array element by element you write a loop — that is day 11's topic; today, we read and we modify.

Write sum(numbers), returning the sum of the array's elements. Hint: a total variable, and for (const n of numbers) — the loop is explained on day 11, copy it for now.

function sum(numbers) {
}
Answer
function sum(numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

Practice (30 min)

  1. Create const meals = ["breakfast", "lunch", "dinner"]; Print the first element, the last with at(-1), and the length.
  2. Add "snack" with push, check that length goes to 4, remove it with pop.
  3. Success criterion: meals.at(-1) returns "dinner" again and meals.length is 3: you added then cleanly undid.
  4. Try meals[5]: what does the console answer? Note that it is NOT an error — undefined, again.
  5. Test the const-but-mutable: const t = []; t.push(42); t; then try t = []; and read the error.
  6. Pass the boxed sum exercise.

Agent tips: "why does this push work on a const?": an agent explains the binding/content difference well. Trap: if it offers code with var, its JavaScript is dated. Proof: ask for the spec version or the modern equivalent.

Recap (10 min)

Three lines: index 0 and at(-1), push/pop, what const really freezes. Without notes: create an array of three colours, print the second, add a fourth, give the length.

Day 7 — Objects: key-value pairs

Goal: create an object, read and write its properties, nest objects and arrays.

Theory (20 min)

An object groups values under names: key: value pairs between braces. It is JavaScript's queen data structure — everything coming from a web API is an object.

const person = {
  firstName: "Ada",
  age: 36,
  languages: ["Ada", "COBOL"]
};
person.firstName;        // "Ada" — dot notation
person["age"];           // 36 — bracket notation
person.languages[0];     // "Ada" — they chain

The dot is the normal way. Brackets serve when the key is in a variable: const key = "firstName"; person[key] is "Ada". You can add a property afterwards (person.city = "London";), modify one, delete one with delete person.age. Like arrays, a const object stays mutable in content.

Three inspection tools: Object.keys(person) lists the keys, Object.values(person) the values, Object.entries(person) the pairs. And "age" in person tests whether a key exists — useful, because reading a missing key silently gives undefined.

const u = { name: "Lovelace" }; const k = "name"; — what is u[k]?

  1. "Lovelace"
  2. undefined
  3. an error
Answer

Brackets evaluate the variable k, which holds the key "name".

Practice (30 min)

  1. Create the object book with keys title, author, pages, read (a boolean). Print each property with the dot.
  2. Change read to true, add book.rating = 4;, list the keys with Object.keys.
  3. Success criterion: Object.keys(book) contains the five keys and book.read is true.
  4. Read with a variable: const what = "title"; book[what]; — then try book.what and explain the difference in the notebook.
  5. Build a library object whose books key is an array of two book objects. Print the second one's title: library.books[1].title. You have just read the exact shape of an API response.

Agent tips: "here is a JSON excerpt, write the access path to field X": an agent finds the path instantly. Trap: it sometimes invents a key that is not in your excerpt. Proof: run the path in the console on your real data — undefined or a value, the truth is there.

Recap (10 min)

Three lines: dot vs brackets, why const does not prevent mutation, the keys/values/entries trio. Without notes: create a film object with three properties, change one, check a missing key.

Day 8 — Reading an error message without panicking

Goal: recognise the three common errors and trace a message back to the faulty line.

Theory (20 min)

An error message is not a punishment: it is the engine telling you what and where. Read it in two steps: the error type first, then the call stack, top to bottom until the first line that is in YOUR code.

  • SyntaxError: the code is malformed; the engine could not even read it. An opened parenthesis never closed, a missing quote, a mistyped keyword. Example: Unexpected token or missing ) after argument list.
  • ReferenceError: you use a name that does not exist. total is not defined means: variable never declared, or a typo (score vs scroe), or a variable declared in another block.
  • TypeError: the value has the wrong type for the operation. The beginner's two greatest hits: undefined is not a function (you are calling something that is not a function) and Cannot read properties of undefined (reading 'name') (you read .name on a value that is undefined — the key before it did not exist).

The reading method: (1) read the type, (2) read the message, (3) follow the stack to your own file and line number, (4) print the values just before that line with console.log to see which one is undefined. Ninety percent of beginner errors are solved this way, without asking anyone.

TypeError: Cannot read properties of undefined (reading 'title') on books[2].title. The most likely cause?

  1. the title property is misspelt in the object
  2. books[2] is undefined: the array has fewer than three elements
Answer

The error says that WHAT we read .title on is undefined. The array is too short, or the index is wrong.

Practice (30 min)

  1. Trigger the three errors on purpose, in the REPL, and read each message aloud: console.log("a"; (SyntaxError), console.log(unknown) (ReferenceError), const x = undefined; x.name; (TypeError).
  2. Success criterion: for each one, you wrote in the notebook the type, the cause, the fix — before fixing.
  3. Create a file bug.js with five lines including a TypeError in the middle, run node bug.js, and identify the line number in the stack.
  4. Fix the file by adding a console.log just before the faulty line to display the guilty value.

Agent tips: paste the error message AND the five lines of code around it: "which line is faulty, and why?". Trap: without the code, the agent guesses. Proof to demand: the cited line, and one single fix to apply — then you rerun it yourself.

Recap (10 min)

Three lines: SyntaxError vs ReferenceError vs TypeError, how to read a call stack, why console.log before the faulty line. Without notes: trigger a ReferenceError and a TypeError and name them.

Day 9 — true, false and the "truthy"

Goal: compare cleanly with ===, and know which values behave as false.

Theory (20 min)

Comparisons that return a boolean: === strict equality (same type AND same value), !== different, < > <= >= for order. Modern JavaScript's golden rule: always ===, never ==. The double equals "converts" before comparing: "5" == 5 is true, 0 == false is true, "" == false is true — a series of traps that === eliminates: "5" === 5 is false, end of story.

The logical operators: && (and), || (or), ! (not). true && false is false; false || true is true.

Last piece: the falsy values — those that count as false in a condition. There are exactly six: false, 0, "" (empty string), null, undefined, NaN. Everything else is truthy, including the surprises: "0" (non-empty string), [] (empty array), {} (empty object). That is why if (list) does NOT test whether a list is empty — it never is, to an if; you write list.length === 0.

What is "0" == false?

  1. false
  2. true
Answer

true: == converts "0" to a number, 0, which equals false converted to 0. With ===, the question does not even arise.

Which of these values is truthy?

  1. []
  2. ""
  3. NaN
Answer

The empty array is truthy: only false, 0, "", null, undefined and NaN are falsy.

Practice (30 min)

  1. Predict then check in the console: 5 === "5", 5 == "5", null === undefined, null == undefined, !"", !"hello", !![].
  2. Success criterion: at least six correct predictions out of seven; note the one that fooled you in the notebook.
  3. Write the list of the six falsy values from memory, then check each with Boolean(value).
  4. Test the empty-list trap: const l = []; if (l) { console.log("truthy!"); } — then the correct version with l.length.

Agent tips: "convert these == comparisons to === and say which ones change result": an agent does this triage well. Trap: it may assert the result without running it. Proof: you evaluate each pair in the console, it is instant.

Recap (10 min)

Three lines: why === and not ==, the six falsy values, why if (array) does not test emptiness. Without notes: recite the six falsy values, then write the correct test for an empty string.

Day 10 — if / else: the program decides

Goal: write branches with if, else if, else, and compound conditions.

Theory (20 min)

if runs a block only if its condition is truthy:

const age = 20;
if (age >= 18) {
  console.log("adult");
} else if (age >= 16) {
  console.log("almost");
} else {
  console.log("minor");
}

Blocks are evaluated top to bottom, and the first whose condition is true wins — the rest are skipped. Order therefore matters: test the most restrictive case first. The final else, without a condition, catches everything left.

Conditions combine: age >= 18 && card (both), free || student (either), !blocked (not blocked). Watch the reading: a && b stops as soon as a is false (b is not even evaluated — that is "short-circuiting"), and a || b stops as soon as a is true.

Two short forms to know: the ternary operator const label = age >= 18 ? "adult" : "minor"; to pick between two values, and the ?? operator which supplies a default only if the value is null or undefined: const name = input ?? "anonymous"; (unlike ||, it lets 0 and "" through, which is often what you want).

With const input = 0;, what is input ?? 42?

  1. 42
  2. undefined
  3. 0
Answer

0: ?? only replaces null and undefined. With ||, we would get 42 — the classic numeric-form trap.

Practice (30 min)

  1. Create welcome.js: a variable hour, and an if/else if/else that prints "good morning" before noon, "good afternoon" before 6 pm, "good evening" after. Run with node welcome.js.
  2. Change the hour three times to walk through the three branches. Success criterion: the three messages each appear at least once.
  3. Add a compound condition: if (hour >= 8 && hour < 12) prints "coffee?".
  4. Test the ternary: const message = hour < 12 ? "morning" : "afternoon"; printed with console.log.
  5. Test the ?? trap: const qty = 0; console.log(qty || 1, qty ?? 1); — explain both values in the notebook.

Agent tips: "rewrite this if/else as a ternary" or the reverse: an agent juggles both forms well. Trap: a ternary nested three branches deep becomes unreadable — refuse it, the agent will comply. Proof: both versions print the same thing on your three test values.

Recap (10 min)

Three lines: the order of else if, short-circuiting of && and ||, the || vs ?? difference. Without notes: write the if that prints "even" or "odd" for a number (hint: modulo).

Day 11 — Loops: repeating without repeating yourself

Goal: master the three loops: while, the classic for, for…of.

Theory (20 min)

A loop repeats a block while a condition holds. Three forms, three uses:

// while: as long as a condition is true (unknown number of turns)
let attempts = 0;
while (attempts < 3) {
  console.log("attempt", attempts + 1);
  attempts++;
}

// classic for: counter, condition, step — all on one line
for (let i = 0; i < 3; i++) {
  console.log("turn", i);
}

// for…of: for each element of an array — the most used
const groceries = ["apples", "rice", "coffee"];
for (const item of groceries) {
  console.log(item);
}

Survival rules: a while's condition must eventually become false, otherwise the loop is infinite (in the console: Ctrl+C or close the tab) — forgetting the attempts++ is the great classic. Inside a loop, break exits immediately, continue skips to the next turn. And pick the fitting form: for…of for an array, classic for when the index matters, while when you do not know how many turns it will take.

What does for (let i = 0; i <= 5; i++) do?

  1. 5 turns, i from 0 to 4
  2. 6 turns, i from 0 to 5
  3. an infinite loop
Answer

6 turns: <= includes 5. The number-one source of off-by-one errors.

Practice (30 min)

  1. Write the course's three loops in a file loops.js, run it with node, check the outputs.
  2. With a classic for, print the 7 times table from 1 to 10 (7 x 3 = 21, with a template literal).
  3. With a for…of, compute the sum of the array [4, 8, 15, 16, 23, 42]. Success criterion: 108.
  4. With a while, start at 1000 and divide by 2 until you drop below 1, counting the turns. Check: 10 turns.
  5. Trigger an infinite loop ON PURPOSE (a while without increment) IN NODE, stop it with Ctrl+C, and note in the notebook how you got out.

Agent tips: "is this loop infinite? justify by following the control variable turn by turn": an agent does this well when the loop fits in ten lines. Trap: on a twisted loop it may answer too fast. Proof: let it run 3 seconds in node — an infinite loop does not stop on its own.

Recap (10 min)

Three lines: the three forms and their uses, break and continue, the anti-infinite-loop reflex. Without notes: print the squares of 1 to 5 with a classic for.

Day 12 — Functions: a name for a computation

Goal: declare and call functions, with parameters, return value, and the arrow form.

Theory (20 min)

A function is a named block of code you can call as many times as you like, with inputs (parameters) and an output (the value after return):

function area(width, height) {
  return width * height;
}
area(3, 4);   // 12

// the arrow form, equivalent and everywhere in modern code
const area2 = (width, height) => {
  return width * height;
};
// and its short form when the body is a single expression:
const double = n => n * 2;

Four ideas cover it all: (1) parameters are local variables, invisible outside the function; (2) return hands back the value AND ends the function — any code after an executed return never runs; (3) without return, the function returns undefined, the number-one cause of "my computation gives undefined"; (4) a function can call another function: that is how programs are built, by stacking small named computations.

A parameter can have a default value: function greet(name = "stranger"). And a function is a value like any other: you can store it in a variable, pass it as an argument — that is the door to module 2.

Write fizzbuzz(n): "FizzBuzz" if n is a multiple of 15, "Fizz" if a multiple of 3, "Buzz" if a multiple of 5, otherwise n itself. Mind the order of the tests (day 10).

function fizzbuzz(n) {
}
Answer
function fizzbuzz(n) {
  if (n % 15 === 0) return "FizzBuzz";
  if (n % 3 === 0) return "Fizz";
  if (n % 5 === 0) return "Buzz";
  return n;
}

Practice (30 min)

  1. Write in functions.js: double (short form), area (classic form), greet(name = "stranger") with a template literal. Call each twice with different values and console.log.
  2. Success criterion: greet() without an argument prints "stranger", and double(21) prints 42.
  3. Write isEven(n) returning a boolean (modulo), then describe(n) which calls isEven and returns "even" or "odd" — a function calling another.
  4. Forget the return in a function on purpose, call it, observe the undefined, fix it. Burn in the reflex.
  5. Pass the boxed fizzbuzz exercise — it prepares tomorrow's mini-project.

Agent tips: "extract this block repeated three times into a function with parameters": an agent does this refactoring cleanly. Trap: it may change the naming or add unrequested options. Proof: the program prints exactly the same output before and after.

Recap (10 min)

Three lines: parameter vs argument, what return does, the two syntaxes (classic and arrow). Without notes: write cube(n) and a function that uses it to give a cube's volume.

Day 13 — Mini-project: FizzBuzz

Goal: assemble conditions, a loop and a function into a complete program running under Node.

Theory (20 min)

FizzBuzz is the most famous interview exercise in the world: print the numbers from 1 to 100, replacing multiples of 3 with "Fizz", multiples of 5 with "Buzz", multiples of both with "FizzBuzz". It does not test memory but the ability to decompose: a function that handles ONE number, a loop that calls it a HUNDRED times.

The trap that sinks half the candidates is the order of the tests: if you test "multiple of 3" before "multiple of 15", 15 falls into "Fizz" and "FizzBuzz" never appears. The most specific case first — you saw it on day 10, here it is for real.

The structure of a good small program: functions at the top (the tools), the "scenario" at the bottom (what we do with them). Here: fizzbuzz(n) at the top (it already exists, day 12), then the loop that calls it and prints. This split will make the program testable in module 4: you test the function, not the loop.

Practice (30 min)

  1. Create fizzbuzz.js: take your fizzbuzz(n) function from day 12 (retype it), then add the loop:
for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i));
}
  1. Run node fizzbuzz.js. Success criterion: the output starts 1, 2, Fizz, 4, Buzz, Fizz, 7… and the fifteenth item is FizzBuzz. Check the first 20 lines by eye.
  2. Change the bound to print 1 to 15 only, rerun, count: 4 Fizz, 2 Buzz, 1 FizzBuzz (over 15 numbers).
  3. Variant: add a limit parameter to a function show(limit) holding the loop, and call show(30).
  4. In the notebook: what separates "the rule" (the function) from "the run" (the loop)? Why is it useful?

Agent tips: "write FizzBuzz in modern JavaScript": every agent knows it by heart — the interest lies elsewhere: ask "which tests would you write for this function?" and compare with your manual checks. Trap: code that works first try proves nothing; the cases 3, 5, 15, 7 do.

Recap (10 min)

Three lines: the function + loop decomposition, the test-order trap, the tools-on-top / scenario-at-bottom structure. Without notes: rewrite FizzBuzz from 1 to 20 entirely from memory.

Day 14 — Module 1 review

Goal: check that the foundations hold, and fill the gaps before starting module 2.

Theory (20 min)

No new notion: re-read your notebook from days 1 to 13. The module's thread: JavaScript manipulates typed values, stored under names (let/const), transformed by operators and functions, steered by conditions and repeated by loops. Everything else in the path — and in the language — is a variation on these six ideas.

Honest self-test, aloud or in writing: explain each of these sentences as if to a friend who knows nothing: "const freezes the binding, not the content", "=== compares without converting", "return ends the function", "index starts at 0", "a string cannot be modified, you create a new one". Each sentence that resists is a session to redo — not a failure, a pointer.

Without running it: what is [10, 20, 30].length + "5"?

  1. 8
  2. "35"
  3. 35
Answer

"35": length is 3, and + glues the text "5". Day 4's trap, revisited.

Practice (30 min)

  1. Redo without notes, in order: the average (day 4), the template-literal greeting (day 5), the array sum (day 6), FizzBuzz (day 13). Time yourself: each should take under five minutes.
  2. Success criterion: the four programs run under node without an error, and outputs are right on the first or second try.
  3. Write the six falsy values from memory, then check.
  4. For each session of the module, note in the notebook: "solid", "to review", or "to redo". The "to redo" ones are scheduled this weekend instead of the next session.
  5. Tidy up: your folder now holds quite some code — create a js/ folder with a module-1/ subfolder and move your files there. A programmer keeps their bench tidy.

Agent tips: "here is my module 1 notebook, quiz me with ten questions that trap what I marked as fragile": an agent is an excellent examiner from YOUR weak points. Trap: its own answers can be wrong too — have the console check every ambiguous answer.

Recap (10 min)

Three lines: the three most solid notions, the two to review, what you will redo this weekend. Module 2 tackles what gives JavaScript its reputation: closures and functions that manipulate functions. You are ready.

Found this useful? Tell us what to measure next.

Comments

No account, no tracker: a comment is read by a human before it appears.