Aabha · Learn by building

02. Represent information with values

Choose a representation before a formula

An event has a title, a capacity and perhaps a cancellation flag. They are different kinds of information. A string stores text such as "Garden morning"; a number supports calculations such as 12 - 4; a boolean records one of two values, true or false. Choosing a representation helps the program make sensible decisions. A capacity of "12 seats" looks friendly but cannot be directly subtracted from a reservation count. Keep the number and format it for people later.

A variable is a name associated with a value. Use const when this name will not be assigned a different value; use let when reassignment is part of the plan. An assignment takes the expression on the right and associates its result with the name on the left. It is not a mathematical statement that remains true forever.

const capacity = 12;
let interested = 4;
interested = interested + 1;
const remaining = capacity - interested;
console.log(remaining); // 7

Trace the lines. First capacity is 12. Then interested is 4. The next line reads the old 4, adds 1, and stores 5 as the new interested value. Finally remaining is calculated as 7. Changing interested again would not automatically recalculate remaining. You must run the calculation again. Names refer to current values; they are not spreadsheet formulas.

const prevents reassignment of its binding. It does not deeply freeze an object or array. We will see that distinction in lesson 05. Declare a name before reading it. Use meaningful camelCase names such as remainingSeats instead of x, unless a tiny calculation truly has no clearer name.

Text and numbers can look alike

A form field commonly gives you text. The string "3" looks like the number 3, but they behave differently. The + operator also joins strings. This creates a common beginner bug:

const fromField = "3";
console.log(fromField + 2);         // "32"
console.log(Number(fromField) + 2); // 5
console.log(typeof fromField);     // "string"

Number(...) asks for numeric conversion. It does not guarantee useful input. Number("many") produces NaN, a special number value meaning the conversion did not yield a number. Number("") is 0, so check for blank text before converting. Number.isFinite(...) checks that a value is a finite number; later we will combine it with whole-number and range checks. Do not write your own complex conversion rules before understanding the inputs.

Use === to compare without type conversion: 3 === "3" is false. = assigns; === compares. The operators !==, <, >, <= and >= answer other comparison questions. % gives the remainder, useful for grouping seats into teams. && combines conditions that must both hold; || accepts either condition; ! negates a condition. Parentheses can make your intent easier to read even where precedence already gives the right result.

Format at the boundary

A template literal uses backticks and inserts expressions at ${...}. It is convenient when turning computed data into a message:

const title = "Garden morning";
const places = 7;
const label = `${title}: ${places} places available`;
console.log(label);

Here the stored number remains a number. Only label is text. A text method such as trim() returns text without surrounding whitespace; toLowerCase() returns a lowercased string useful for case-insensitive matching. Calling these methods does not change the original string. They create a result you can store or use.

Two other values help represent missing information. undefined often means no value has been supplied, such as reading an absent object property. null can be an explicit choice meaning nothing selected. Neither is the text "null". Avoid using missing values as meaningful event counts. Also note that typeof null historically returns "object"; do not use that result to conclude null is a usable event object.

A practical investigation

Run version 02. Before reading its output, trace capacity 12 and interested 4 through the extra expression of interest. Then change the incoming count from "3" to "" and to "many". Record the type and numeric result each time. These are deliberately different cases: absent text and invalid numeric text are not interchangeable.

JavaScript numbers can represent fractions, but many decimal fractions are approximations in binary. You may observe that 0.1 + 0.2 is not exactly 0.3. This course counts whole people and does not implement currency. For real money, use an explicitly chosen, tested representation rather than assuming every decimal arithmetic result is exact.

Make the assumption visible

When you write a calculation, note what valid input means. For our practice seat count: a whole number from 1 through the available places. That sentence is more helpful than a vague instruction to “validate the input.” It tells you which examples should pass and which should fail. In the next lesson we turn those rules into branches.

References: grammar and types, operators, const, finite-number checks.

Practice and next step

Open exercise 02. Attempt the prediction before running code. Record the observed result and explain any mismatch. The explained solution is separate so you can choose when to look.