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 starts to change.

HTML gives a webpage its structure. CSS controls its appearance. JavaScript gives the page behaviour. It allows a webpage to react, calculate, remember information and change things after the page has already loaded.

Think about an online shopping website. You click Add to Cart, the number beside the cart increases, the total price changes and the page may show a notification. HTML created the elements. CSS made them look good. JavaScript is what makes those elements respond to what you do.

1. Where JavaScript Actually Runs

Definition

A JavaScript engine is the program responsible for reading and executing JavaScript code. When you write JavaScript, something has to understand the instructions and perform them. That something is the JavaScript engine.

Real-Life Example

Imagine you give instructions to a person: "Take this amount of money, multiply it by three, then tell me the result." The person reads your instructions and performs them.

A JavaScript engine does something similar. You give it JavaScript instructions, and the engine reads and executes them.

Types of Places JavaScript Can Run

1. Browser: JavaScript can run inside browsers such as Chrome, Firefox and Safari.
2. Node.js: JavaScript can also run outside the browser using Node.js.

Browser JavaScript

Chrome and Edge use the V8 JavaScript engine. Firefox uses SpiderMonkey, while Safari uses JavaScriptCore.

When JavaScript runs in the browser, it can interact with the webpage. For example, it can change text, respond to clicks, validate forms and update elements.

Example

console.log() tells the engine to show a value. You will use it in almost every example this month, because it is how you see what your code is doing.

1
2

// Ask the engine to add two numbers and show the answer
console.log(2 + 2);

➜ webbo3 node app.js
4

Node.js

Node.js allows JavaScript to run outside the browser. It is built around the V8 engine. This means you can use JavaScript to create servers, work with files, build command-line tools and create backend applications.

The terminal boxes in these lessons show what Node printed when the example was run. In the browser, the same console.log() output appears in the Console tab of the developer tools.

Overall Example

Imagine JavaScript as a language and the JavaScript engine as the person who understands that language. The language is the same, but you can place it in different environments.

1
2

// Add two numbers and show the result
console.log(10 + 20);

➜ webbo3 node app.js
30

2. Variables: A Name for a Value

Definition

A variable is a named place used to store a value so that you can use that value later in your program.

Real-Life Example

Imagine you have a box labelled School Fees. Inside the box is ₦50,000. Instead of carrying the ₦50,000 around and writing the amount everywhere, you simply remember the name of the box: School Fees.

Variables work in a similar way. You give a value a name, then use that name whenever you need the value.

Types of Variable Declarations

1. const: used when the variable should not be reassigned.
2. let: used when the value may need to be reassigned.
3. var: an older way of declaring variables that you will mainly encounter in older JavaScript code.

Type 1: const

const creates a variable that cannot later be reassigned to another value.

1
2
3
4
5

// Store the price of a data bundle under a name
const priceOfData = 1500;

// Use the name to show the value
console.log(priceOfData);

➜ webbo3 node app.js
1500

Type 2: let

let is used when you expect the value to change.

1
2
3
4
5
6
7
8

// Start with one bundle
let bundlesBought = 1;

// The customer buys more, so give the variable a new value
bundlesBought = 3;

// Show the current value
console.log(bundlesBought);

➜ webbo3 node app.js
3

Using const and let Together

1
2
3
4
5
6
7
8
9

// The price stays the same, so it is a const
const priceOfData = 1500;

// The number of bundles changes, so it is a let
let bundlesBought = 1;
bundlesBought = 3;

// Show both values on one line
console.log(priceOfData, bundlesBought);

➜ webbo3 node app.js
1500 3

What Happens When You Reassign const?

Because const protects a variable from being given a new value, JavaScript stops the program if you try.

1
2
3
4
5
6
7
8

// A price that should never change
const price = 1500;

// Try to give it a new value anyway
price = 2000;

// This line is never reached
console.log(price);

➜ webbo3 node app.js
TypeError: Assignment to constant variable.

A Common Confusion

const prevents the variable from being reassigned. It does not mean that every piece of data inside an object or array can never change.

In the example below, push() adds an item to the end of an array. You will meet it properly on Day 3.

1
2
3
4
5
6
7
8

// The variable cart holds an array with one item
const cart = ['rice'];

// Add an item INSIDE the array (the variable is not reassigned)
cart.push('beans');

// Show the array
console.log(cart);

➜ webbo3 node app.js
[ 'rice', 'beans' ]

The variable still points to the same array. You changed the contents of the array, not what the variable points to.

What About var?

You will see var in older JavaScript code. Modern JavaScript generally uses const and let.

For this course, recognise var when you see it, but build the habit of using const and let.

1
2
3
4
5
6

// Your details (use your own)
const name = 'Joshua';
const age = 24;

// Show both on one line
console.log(name, age);

➜ webbo3 node app.js
Joshua 24

3. The Types of Values You Are Actually Holding

Definition

A data type describes what kind of value JavaScript is working with. Knowing the type of a value is important because different types can behave differently.

Real-Life Example

Imagine a supermarket. You may have rice, money, a customer's name, a list of products, and a yes/no answer to whether a customer has paid.

They are all pieces of information, but they are not the same kind of information. JavaScript also needs to know what kind of value it is dealing with.

Main Types You Will Meet

To ask JavaScript what type a value is, write typeof in front of it.

Type 1: String

A string is text. Real-life example: a person's name, a city, a course title or an email address.

1
2
3
4
5

// A name is text, so it is a string
const name = 'Chidinma';

// Ask JavaScript what type the value is
console.log(typeof name);

➜ webbo3 node app.js
string

Type 2: Number

A number represents numerical values. JavaScript uses one main number type for whole numbers and decimal numbers.

1
2
3
4
5

// A whole number
console.log(typeof 2500);

// A decimal number
console.log(typeof 19.99);

➜ webbo3 node app.js
number
number

Type 3: Boolean

A boolean has only two possible values: true or false.

Real-life example: "Has the student paid?" The answer can be yes or no. In JavaScript, that can be represented with true or false.

1
2
3
4
5

// A yes-or-no fact: has the student paid?
const hasPaid = true;

// Ask for its type
console.log(typeof hasPaid);

➜ webbo3 node app.js
boolean

Type 4: Undefined

undefined usually means a variable has been declared but has not yet been given a value.

1
2
3
4
5
6

// Declare a variable but do not give it a value yet
let score;

// Show the value, then its type
console.log(score);
console.log(typeof score);

➜ webbo3 node app.js
undefined
undefined

Type 5: Null

null represents an intentionally empty value. You use it when you deliberately want to say that there is currently no value.

1
2
3
4
5
6

// We searched for a student and found nobody, on purpose we store "nothing"
const foundStudent = null;

// Show the value, then its type
console.log(foundStudent);
console.log(typeof foundStudent);

➜ webbo3 node app.js
null
object

The second output surprises many beginners. JavaScript has a long-standing historical behaviour where typeof null returns "object".

Type 6: Object

An object allows you to group related information using named properties.

Real-life example: instead of keeping a student's name, age and course separately, you can group them together as one student object.

1
2
3
4
5
6
7
8
9
10

// One student, with three named pieces of information
const student = {
  name: 'Ada',
  age: 22,
  course: 'JavaScript'
};

// Show the whole object, then its type
console.log(student);
console.log(typeof student);

➜ webbo3 node app.js
{ name: 'Ada', age: 22, course: 'JavaScript' }
object

Type 7: Array

An array is an ordered collection of values. Real-life example: a shopping list containing rice, beans and bread.

1
2
3
4
5
6
7
8
9

// A shopping list, in order
const foods = ['rice', 'beans', 'bread'];

// Show the list and its type
console.log(foods);
console.log(typeof foods);

// Ask the question typeof cannot answer: is it an array?
console.log(Array.isArray(foods));

➜ webbo3 node app.js
[ 'rice', 'beans', 'bread' ]
object
true

Overall Example

Imagine a student's information system. You might have their name as a string, their score as a number, whether they passed as a boolean, an array containing their courses, and an object containing all of their information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Each fact in the type that fits it
const studentName = 'Musa';
const score = 84;
const passed = true;
const courses = ['JavaScript', 'React'];

// Group all of them into one object
const student = {
  name: studentName,
  score: score,
  passed: passed,
  courses: courses
};

// Show the finished object
console.log(student);

➜ webbo3 node app.js
{
  name: 'Musa',
  score: 84,
  passed: true,
  courses: [ 'JavaScript', 'React' ]
}

1
2
3
4
5
6
7
8
9
10
11

// Your details (use your own)
const name = 'Joshua';
const age = 24;
const isStudent = true;
const technologies = ['JavaScript', 'React'];

// Print each one on its own line
console.log(name);
console.log(age);
console.log(isStudent);
console.log(technologies);

➜ webbo3 node app.js
Joshua
24
true
[ 'JavaScript', 'React' ]

4. Operators: How JavaScript Works With Values

Definition

An operator is a symbol that tells JavaScript to perform an operation on one or more values.

Real-Life Example

When you calculate the total price of three items, you are performing an operation. When you ask whether someone's score is greater than 50, you are also performing an operation.

Main Operators We Will Use

Arithmetic Operators

1
2
3
4
5
6

// The five arithmetic operators, each on the same two numbers
console.log(10 + 5);  // addition
console.log(10 - 5);  // subtraction
console.log(10 * 5);  // multiplication
console.log(10 / 5);  // division
console.log(10 % 3);  // remainder after dividing

➜ webbo3 node app.js
15
5
50
2
1

The % operator gives you the remainder after division. For example, 10 divided by 3 gives 3 with 1 remaining, so the result is 1.

The Special Case: +

The + operator can perform arithmetic, but it can also join strings together. This is where beginners often get confused.

1
2
3
4
5
6
7
8

// Two numbers: + adds them
console.log(10 + 5);

// A string and a number: + joins them as text
console.log('10' + 5);

// A string and a number with -: minus can only do maths
console.log('10' - 5);

➜ webbo3 node app.js
15
105
5

Why does '10' + 5 produce '105'? Because the first value is a string. JavaScript treats the + operation as joining text.

But '10' - 5 produces 5 because the minus operator is mathematical, so JavaScript converts the string into a number before performing the subtraction.

1
2
3
4
5
6

// What a form gives you: text, even though it looks like numbers
const typedPrice = '1500';
const typedQty = '3';

// Try to calculate with them directly
console.log(typedPrice + typedQty);

➜ webbo3 node app.js
15003

That is not what you wanted. You wanted 1500 × 3. Convert the values to numbers first.

1
2
3
4
5
6
7
8
9
10

// The same text from the form
const typedPrice = '1500';
const typedQty = '3';

// Convert each one into a real number
const price = Number(typedPrice);
const quantity = Number(typedQty);

// Now the maths works
console.log(price * quantity);

➜ webbo3 node app.js
4500

Converting Text to Numbers

Number() converts a value into a number when the value can be converted successfully.

1
2
3
4
5
6

// Text that is a clean number converts
console.log(Number('1500'));
console.log(Number('25'));

// Text with a comma in it cannot be converted
console.log(Number('1,500'));

➜ webbo3 node app.js
1500
25
NaN

NaN means Not a Number. It indicates that JavaScript could not convert the supplied value into a valid number.

1
2
3
4
5
6

// A conversion that fails
const value = Number('1,500');

// Show the value, then ask whether it is NaN
console.log(value);
console.log(Number.isNaN(value));

➜ webbo3 node app.js
NaN
true

1
2
3
4
5
6

// Two values that arrived as text
const price = '2000';
const quantity = '4';

// Convert both, then multiply
console.log(Number(price) * Number(quantity));

➜ webbo3 node app.js
8000

5. Comparison: Understanding ===

Definition

A comparison operator allows JavaScript to check whether values are equal, different, greater, smaller or otherwise related.

Real-Life Example

Imagine a school checking whether a student's score is exactly 50. The computer needs to compare the student's score with 50 and produce either true or false.

Two Equality Operators

1. ==: loose equality
2. ===: strict equality

The important difference is that strict equality checks both the value and the type.

1
2
3
4
5
6
7

// A number compared with the same digits as text
console.log(5 == '5');   // loose: types are converted first
console.log(5 === '5');  // strict: types must match too

// Zero compared with false
console.log(0 == false);
console.log(0 === false);

➜ webbo3 node app.js
true
false
true
false

Why Does 5 === '5' Return false?

The first value is a number. The second value is a string. Even though they visually contain the same digits, they are different types.

Overall Example

Imagine a login system. The system may receive a user ID from a form as text, while another part of your application stores the ID as a number. Strict comparison makes the type difference visible instead of silently converting values.

1
2
3
4
5
6
7
8

// The ID stored in the system is a number
const storedId = 25;

// The ID typed into the form is text
const enteredId = '25';

// Strictly compare them
console.log(storedId === enteredId);

➜ webbo3 node app.js
false

1
2
3
4
5
6
7
8
9
10
11

// Same number, same type
console.log(10 === 10);

// Same digits, different types
console.log(10 === '10');

// Same text
console.log('JavaScript' === 'JavaScript');

// Same letters, different capitals
console.log('JavaScript' === 'javascript');

➜ webbo3 node app.js
true
false
true
false

6. Template Literals: Stop Gluing Strings Together

Definition

A template literal is a JavaScript string written using backticks that allows you to insert variables and expressions directly into the string.

Real-Life Example

Imagine you want to send a customer a message: "Hi Chidinma, 3 bundles cost N4500."

The name, number of bundles and total price can all change depending on the customer. Template literals allow you to insert those changing values directly into the sentence.

Old Way: String Concatenation

1
2
3
4
5
6
7
8
9
10
11
12

// The changing values
const name = 'Chidinma';
const bundles = 3;
const price = 1500;

// Glue the sentence together piece by piece with +
console.log(
  'Hi ' + name +
  ', ' + bundles +
  ' bundles cost N' +
  (bundles * price)
);

➜ webbo3 node app.js
Hi Chidinma, 3 bundles cost N4500

Better Way: Template Literal

1
2
3
4
5
6
7
8
9

// The same changing values
const name = 'Chidinma';
const bundles = 3;
const price = 1500;

// Write the sentence once, with the values dropped into ${}
console.log(
  `Hi ${name}, ${bundles} bundles cost N${bundles * price}`
);

➜ webbo3 node app.js
Hi Chidinma, 3 bundles cost N4500

How ${} Works

Inside a template literal, ${...} tells "Evaluate what is inside these braces and place the result here."

You can insert variables as well as expressions, and a template literal can span several lines.

1
2
3
4
5
6
7
8
9
10
11

// The facts to report
const student = 'Musa';
const score = 84;

// A multi-line report with values and a comparison inside ${}
const report = `Student: ${student}
Score:   ${score}
Passed:  ${score >= 50}`;

// Show the report
console.log(report);

➜ webbo3 node app.js
Student: Musa
Score:   84
Passed:  true

Why Template Literals Matter

Template literals become especially useful when your application needs to create dynamic text or HTML from data.

Instead of repeatedly breaking a sentence apart with +, you can write the sentence naturally and insert values where they belong.

1
2
3
4
5
6
7
8
9
10

// Your details (use your own)
const name = 'Joshua';
const course = 'JavaScript';
const day = 1;

// Build the sentence with a template literal
const message = `My name is ${name}. I am learning ${course}. Today is Day ${day}.`;

// Show it
console.log(message);

➜ webbo3 node app.js
My name is Joshua. I am learning JavaScript. Today is Day 1.

7. Reading Your Own Output

Definition

The Console is a developer tool where you can see messages and results produced by JavaScript. One of the most common tools for displaying information there is console.log().

Real-Life Example

Imagine troubleshooting a car. You cannot simply stare at the car and guess what is wrong. You need information that tells you what is happening.

console.log() gives you that information while you are developing JavaScript.

Basic Example

1
2
3
4
5
6
7
8

// A rate and a quantity
const rate = 1500;
const qty = 4;

// Show each value, then the total
console.log(rate);
console.log(qty);
console.log(rate * qty);

➜ webbo3 node app.js
1500
4
6000

Label Your Output

When you have many values, labels make the Console much easier to understand.

1
2
3
4
5
6

// The same two values
const rate = 1500;
const qty = 4;

// Print a label before each value
console.log('rate:', rate, 'qty:', qty);

➜ webbo3 node app.js
rate: 1500 qty: 4

console.table()

When you have structured information, console.table() can make the information easier to inspect.

1
2
3
4
5
6
7
8
9
10
11
12

// The same two values
const rate = 1500;
const qty = 4;

// Show a row of information as a table
console.table([
  {
    item: 'Data',
    qty: qty,
    total: rate * qty
  }
]);

➜ webbo3 node app.js
┌─────────┬────────┬─────┬───────┐
│ (index) │ item   │ qty │ total │
├─────────┼────────┼─────┼───────┤
│ 0       │ 'Data' │ 4   │ 6000  │
└─────────┴────────┴─────┴───────┘

1
2
3
4
5
6
7
8
9
10

// The product details
const product = 'Laptop';
const price = 250000;
const quantity = 2;

// Print each value with a label, then the total
console.log('Product:', product);
console.log('Price:', price);
console.log('Quantity:', quantity);
console.log('Total:', price * quantity);

➜ webbo3 node app.js
Product: Laptop
Price: 250000
Quantity: 2
Total: 500000

Do This Now

Now bring everything together. Do not just read these examples. Write the programs yourself, run them and predict the output before you run them.

1. Age Calculator

Given a birth year, calculate the person's age.

1
2
3
4
5
6
7
8
9

// The two years we know
const currentYear = 2026;
const birthYear = 2002;

// Subtract to get the age
const age = currentYear - birthYear;

// Show a friendly sentence
console.log(`You are ${age} years old.`);

➜ webbo3 node app.js
You are 24 years old.

2. Transport Fare

Given a fare per trip and the number of trips per week, calculate the weekly cost.

1
2
3
4
5
6
7
8
9
10
11

// The fare and how often you travel
const farePerTrip = 500;
const tripsPerWeek = 10;

// Weekly cost, then four weeks of it
const weeklyCost = farePerTrip * tripsPerWeek;
const monthlyCost = weeklyCost * 4;

// Show both totals
console.log(`Weekly transport cost: N${weeklyCost}`);
console.log(`Monthly transport cost: N${monthlyCost}`);

➜ webbo3 node app.js
Weekly transport cost: N5000
Monthly transport cost: N20000

3. Temperature Converter

Convert 37 degrees Celsius to Fahrenheit.

1
2
3
4
5
6
7
8

// The temperature in Celsius
const celsius = 37;

// The conversion formula: multiply by 9, divide by 5, add 32
const fahrenheit = celsius * 9 / 5 + 32;

// Show both temperatures
console.log(`${celsius}°C is ${fahrenheit}°F`);

➜ webbo3 node app.js
37°C is 98.6°F

4. Score Summary

Given three test scores, calculate the total, average and whether the student passed.

1
2
3
4
5
6
7
8
9
10
11

// Three test scores in an array
const scores = [72, 66, 87];

// Add the first, second and third scores (arrays count from 0)
const total = scores[0] + scores[1] + scores[2];

// The average is the total divided by the number of scores
const average = total / 3;

// Show the total, the average and whether it is 50 or more
console.log(`Total ${total}, average ${average}, passed: ${average >= 50}`);

➜ webbo3 node app.js
Total 225, average 75, passed: true

1
2
3
4
5
6
7
8
9
10
11

// Remember the facts
const student = 'Musa';
const price = 1500;
const bundles = 3;

// Calculate the total
const total = price * bundles;

// Build the message and show it
const message = `Hi ${student}, ${bundles} bundles cost N${total}.`;
console.log(message);

➜ webbo3 node app.js
Hi Musa, 3 bundles cost N4500.

Checkpoint

1
2

// Two values from a form, both text
console.log("20" + "30");

➜ webbo3 node app.js
2030

1
2
3
4
5
6
7
8
9

// Declared, never given a value
let a;

// Deliberately set to "nothing"
const b = null;

// Compare them
console.log(a);
console.log(b);

➜ webbo3 node app.js
undefined
null

1
2

// Ask for the type of null
console.log(typeof null);

➜ webbo3 node app.js
object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// What the customer chose
const customer = 'Musa';
const product = 'JavaScript Course';
const price = 50000;
const quantity = 1;

// Calculate the total
const total = price * quantity;

// Build a multi-line receipt
const receipt = `Customer: ${customer}
Product: ${product}
Quantity: ${quantity}
Total: N${total}`;

// Show it
console.log(receipt);

➜ webbo3 node app.js
Customer: Musa
Product: JavaScript Course
Quantity: 1
Total: N50000

Tomorrow, Day 2: Decisions and functions. You will turn these values into logic that can make decisions, and package that logic into reusable blocks of code.