The Foundations
Updated Jul 4, 2026
💡
This is where it all starts. Variables, logic, and decisions. Every program ever built begins here.
1. Setup + Hello World
JavaScript runs inside the browser.
Inline — put it before the closing </body> tag
html
<body>
<!-- your HTML here -->
<script> console.log("Salaam, World!"); </script></body>External file — link it the same way
html
<body>
<!-- your HTML here -->
<script src="script.js"></script></body>javascript
// script.jsconsole.log("Salaam, World!");- console.log() → prints to the console
Open DevTools
| OS | Shortcut |
|---|---|
| Windows / Linux | F12 or Ctrl + Shift + J |
| Mac | Cmd + Option + J |
→ Click the Console tab to see output
Mental model: JavaScript = instructions the browser runs step by step
2. Variables
Variables store values you want to reuse.
javascript
let name = "Ahmed";let age = 25;Use let when the value changes:
javascript
let score = 10;score = 20;score = 30;Use const when the value should NOT change:
javascript
const country = "Norway";country = "Sweden"; // ❌ errorvar also exists — ignore it.
In practice
javascript
let price = 100;let discount = 20;
let finalPrice = price - discount;
console.log(finalPrice); // 80Mental model: Variable = a labeled box storing a value
3. Datatypes
JavaScript has different types of data.
javascript
let name = "Ahmed"; // stringlet age = 25; // numberlet isStudent = true; // booleanlet empty = null; // nothing (intentional)let x; // undefined (not set yet)Mental model:
4. Maths
Basic operations
javascript
let a = 10;let b = 5;
console.log(a + b); // 15console.log(a - b); // 5console.log(a * b); // 50console.log(a / b); // 2Shortcuts
javascript
let x = 10;
x += 5; // 15x -= 3; // 12x *= 2; // 24x /= 4; // 6Increment / Decrement
javascript
let count = 0;
count++; // 1count++; // 2count--; // 1In practice
javascript
let price = 200;let tax = 0.1;let quantity = 3;
let subtotal = price * quantity;let taxAmount = subtotal * tax;let total = subtotal + taxAmount;
console.log(total); // 660Mental model: You are transforming numbers step by step
5. Comparison
Comparisons return true or false.
javascript
5 === 5; // true5 === "5"; // falseLoose vs strict
javascript
5 == "5"; // true (converts type)5 === "5"; // false (no conversion)Always use ===
More comparisons
javascript
10 > 5; // true10 < 5; // false10 >= 10; // true10 <= 9; // falseIn practice
javascript
let age = 20;
console.log(age >= 18); // trueMental model: Comparison = a question → answer is true or false
6. Conditions
Run code based on a result.
javascript
let age = 18;
if (age >= 18) { console.log("Adult");} else { console.log("Minor");}Multiple conditions
javascript
let score = 75;
if (score >= 90) { console.log("A");} else if (score >= 70) { console.log("B");} else if (score >= 50) { console.log("C");} else { console.log("Fail");}Combine conditions
javascript
let age = 20;let hasID = true;
if (age >= 18 && hasID) { console.log("Allowed in");}- && → AND (both must be true)
- || → OR (one must be true)
In practice
javascript
let balance = 100;
if (balance >= 50) { console.log("You can buy");} else { console.log("Not enough money");}Mental model:
Summary
| Category | Key Ideas |
|---|---|
| Setup | <script>, console.log() |
| Variables | let, const |
| Datatypes | string, number, boolean, null, undefined |
| Maths | operations + shortcuts |
| Comparison | ===, >, < |
| Conditions | if / else, &&, || |