Webbo3 Level 2 · JavaScript Development · Day 1 of 20

The JavaScript Mental Model

Variables, types, operators and template literals: the vocabulary every line of JavaScript you ever write is made of.

Last month you built pages. Real ones, with flexbox, grid and Tailwind, and they looked good. But they did nothing. A button that goes nowhere. A form that forgets everything the moment you press submit. A price that never changes. Today that stops.

HTML is the structure. CSS is the appearance. JavaScript is the behaviour: the part that reacts, calculates, remembers and changes things after the page has already loaded. Every interactive thing you have ever used on the web, from the search box that suggests as you type to the cart that updates its total, is JavaScript doing exactly what you are about to learn to do.

1. Where JavaScript actually runs

JavaScript runs in an engine built into the browser. Chrome and Edge use one called V8. Firefox uses SpiderMonkey. Safari uses JavaScriptCore. You do not install anything, you do not compile anything: you hand the browser some JavaScript and it runs it, top to bottom, the moment it reaches it.

The same V8 engine, pulled out of Chrome and given a command line, is Node.js. That is the only difference worth holding in your head today. Same language, two places to run it: the browser, where it can touch the page, and Node, where it cannot but can touch your files. Every console pane in this course is real Node output, so you are already looking at the second one.

2. Variables: a name for a value

A variable is a labelled box. You put a value in it, and afterwards you can refer to the value by the label instead of writing it out again. You will declare them two ways, and the choice is not stylistic.

// const: the label can never be pointed at a different value
const priceOfData = 1500;

// let: the label can be re-pointed later
let bundlesBought = 1;
bundlesBought = 3;

console.log(priceOfData, bundlesBought);

The rule professionals actually follow: reach for const first, every single time. Only change it to let when you find yourself needing to re-assign it. This is not pedantry. A const is a promise to whoever reads the code next, including you in three weeks, that this name will still mean the same thing further down the file.

Break the promise and the engine stops you immediately, which is the point:

const price = 1500;
price = 2000;

const cart = ['rice'];
cart.push('beans');        // fine: same array, new contents
console.log(cart);

3. The types you are actually holding

Every value in JavaScript has a type, and most confusing bugs a beginner hits are really one thing: they thought they were holding one type and they were holding another. typeof tells you the truth.

console.log(typeof 'Chidinma');     // text
console.log(typeof 2500);           // a number
console.log(typeof true);           // yes or no
console.log(typeof undefined);      // declared, never given a value
console.log(typeof null);           // deliberately empty
console.log(typeof { name: 'Ada' }); // a bundle of named values
console.log(typeof [1, 2, 3]);      // a list

Two of those answers are worth stopping on. typeof null returns "object", which is simply a bug in the language, shipped in 1995 and never fixed because fixing it would break the web. Every JavaScript developer alive knows this and works around it. And typeof [] also returns "object", because an array is a kind of object. To ask whether something is really an array you use Array.isArray().

console.log(typeof null);              // the famous mistake
console.log(Array.isArray([1, 2, 3])); // the honest answer
console.log(Array.isArray('rice'));

4. Operators, and the one that will bite you

Arithmetic behaves the way you expect. String concatenation with + behaves the way you expect. The trouble starts when you mix them.

console.log(10 + 5);        // 15, arithmetic
console.log('10' + 5);      // the plus sign joins text instead
console.log('10' - 5);      // but the minus sign has no text meaning
console.log(10 / 3);
console.log(10 % 3);        // remainder: useful more often than you expect

'10' + 5 gives "105" because + means two different things and JavaScript picks "join the text" as soon as either side is a string. '10' - 5 gives 5 because - only ever means arithmetic, so the string is converted to a number first. This is called type coercion, and it is the single most common source of "why is my total wrong" in a beginner's first week.

const typedPrice = '1500';   // as it arrives from a form
const typedQty = '3';

console.log(typedPrice + typedQty);            // joined, wrong
console.log(Number(typedPrice) * Number(typedQty)); // converted, right

console.log(Number('1,500'));
console.log(Number('1500'));
console.log(Number.isNaN(Number('1,500')));

5. Comparison: always three equals signs

There are two ways to ask whether two values are equal, and one of them lies to you.

console.log(5 == '5');    // loose: converts, then compares
console.log(5 === '5');   // strict: compares type as well
console.log(0 == false);
console.log(0 === false);

6. Template literals: stop gluing strings together

You can join text with +, and for years everybody did. Backticks are better, and once you have used them for a day you will not go back.

const name = 'Chidinma';
const bundles = 3;
const price = 1500;

// the old way
console.log('Hi ' + name + ', ' + bundles + ' bundles cost N' + (bundles * price));

// the readable way
console.log(`Hi ${name}, ${bundles} bundles cost N${bundles * price}`);

Backticks let you drop any expression inside ${...}, including arithmetic, and they let a string run across several lines without any escaping. That second part matters more than it sounds: from Day 4 you will be building chunks of HTML out of data, and doing that with + is genuinely painful.

const student = 'Musa';
const score = 84;

const report = `
Student: ${student}
Score:   ${score}
Status:  ${score >= 50 ? 'Pass' : 'Fail'}
`;

console.log(report);

7. Reading your own output

console.log is not a beginner tool you grow out of. Professionals with fifteen years of experience use it constantly. Two habits make it far more useful than most people realise.

const rate = 1500;
const qty = 4;

// label what you are printing, or five logs later you will not know which is which
console.log('rate:', rate, 'qty:', qty);

// print an object with its own names attached
console.table([{ item: 'Data', qty: 4, total: rate * qty }]);

Do this now

Four small programs. Write each one in a file, run it, and check the output is what you predicted before you ran it. Twenty minutes each at most.

1. Age calculator. Given a birth year, print the age this year. Then handle the case where somebody types the year as text.
2. Transport fare. Given a fare per trip and trips per week, print the weekly and monthly cost in a template literal.
3. Temperature converter. Convert 37 degrees Celsius to Fahrenheit with c * 9 / 5 + 32, and print both in one sentence.
4. Score summary. Given three test scores, print the total, the average to one decimal place with .toFixed(1), and whether the average passes 50.

// Score summary: the shape of the answer, not the whole answer
const scores = [72, 65, 88];
const total = scores[0] + scores[1] + scores[2];
const average = total / 3;

console.log(`Total ${total}, average ${average.toFixed(1)}, ${average >= 50 ? 'pass' : 'fail'}`);

Checkpoint

Tomorrow, Day 2: decisions and functions. You will turn these values into logic that chooses, and package that logic into something you can reuse.