📖 Guide 01 — JavaScript Fundamentals

What you’ll learn: The absolute basics of JavaScript — variables, data types, operators, conditions, and loops. Everything else builds on this.
Assumes: You know what a variable and a loop are (from any language). No JS experience needed.

Section 1 — What Is JavaScript?

JavaScript (JS) started as a language to make web pages interactive. Today it runs:

┌─────────────────────────────────────────────────────────┐
│  Where JavaScript Runs                                   │
├──────────────────────┬──────────────────────────────────┤
│  Browser             │  Node.js (server)                │
│  ─────────────       │  ─────────────────               │
│  Runs in Chrome,     │  Runs on your computer           │
│  Firefox, Safari     │  or on servers in the cloud      │
│                      │                                  │
│  Powers: React,      │  Powers: APIs, Lambda            │
│  web pages,          │  functions, CLI tools,           │
│  user interfaces     │  scripts, backend services       │
└──────────────────────┴──────────────────────────────────┘

Same language, different environments. Code you write for Node.js and code you write for React use the same syntax — but they have access to different built-in APIs.

Section 2 — Variables: const, let, var

Variables store data. JavaScript has three keywords for declaring them:

// const — value cannot be reassigned (use this by default)
const serviceName = "PayStation";
const maxRetries = 3;
// serviceName = "Other"; ← ERROR: cannot reassign const

// let — value can change (use when value will change)
let status = "pending";
status = "completed";   // OK — let allows reassignment
let count = 0;
count = count + 1;      // OK

// var — OLD way, avoid it
// Has confusing scoping rules (covered in Guide 02)
var oldStyle = "don't use this";

Rule of thumb:

• Use const for everything by default
• Switch to let only when you know the value will change
• Never use var in modern code

// Real-world example — what you'll see in actual projects:
const API_BASE_URL = "https://api.example.com";   // never changes
const userConfig = { theme: "dark", lang: "en" }; // object itself doesn't change

let retryCount = 0;                                // changes in a loop
let isLoading = false;                             // changes based on events

Section 3 — Data Types

JavaScript has 7 primitive types and 1 object type:

Primitives (single values)

// 1. String — text, wrapped in quotes (single, double, or backtick)
const name = "Alice";
const title = 'Engineer';
const greeting = `Hello, ${name}!`;  // backtick = template literal (covered later)

// 2. Number — integers AND decimals (no separate int/float like Java)
const age = 25;
const pi = 3.14159;
const negative = -42;
const big = 1_000_000;  // underscores for readability (same as 1000000)

// 3. Boolean — true or false only
const isActive = true;
const hasPermission = false;

// 4. null — intentionally empty / no value
const ticket = null;       // this field exists but has no value yet

// 5. undefined — not assigned yet
let result;                // result is undefined (not yet set)
console.log(result);       // prints: undefined

// 6. Symbol — unique identifier (rare, mostly for advanced use)
const id = Symbol("id");

// 7. BigInt — integers too large for Number (rare)
const bigNumber = 9007199254740993n;  // 'n' at the end

Objects (complex values)

// Object — collection of key-value pairs
const fleet = {
    fleetId: "RIPE-NA",
    region: "us-east-1",
    peakTpm: 50000,
    isActive: true
};

// Array — ordered list
const regions = ["NA", "EU", "FE", "CN"];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["text", 42, true, null];   // arrays can hold any type

// Function — also an object in JavaScript
const greet = function(name) { return `Hello, ${name}`; };

// null and undefined are NOT the same:
console.log(null === undefined);    // false — different things
console.log(null == undefined);     // true — loose equality (avoid this)

Checking Types

typeof "hello"        // "string"
typeof 42             // "number"
typeof true           // "boolean"
typeof undefined      // "undefined"
typeof null           // "object" ← famous JS bug, null is NOT an object
typeof {}             // "object"
typeof []             // "object" (arrays are objects too)
typeof function(){}   // "function"

// Better check for arrays:
Array.isArray([1, 2, 3])    // true
Array.isArray("hello")      // false

Section 4 — Operators

Arithmetic

5 + 3    // 8    addition
10 - 4   // 6    subtraction
4 * 3    // 12   multiplication
10 / 3   // 3.333... (always decimal division)
10 % 3   // 1    remainder (modulo)
2 ** 8   // 256  exponentiation (2 to the power of 8)

// Common pattern: check if number is even
if (number % 2 === 0) {
    console.log("even");
}

Comparison (always use ===, never ==)

// === strict equality (checks value AND type)
5 === 5        // true
5 === "5"      // false — number vs string
null === null  // true

// == loose equality (converts types — avoid!)
5 == "5"       // true ← dangerous! different types
0 == false     // true ← dangerous!
null == undefined  // true ← dangerous!

// !== strict not-equal
5 !== 3        // true
5 !== 5        // false

// Comparison operators
5 > 3          // true
5 >= 5         // true (greater than or equal)
3 < 5          // true
3 <= 3         // true (less than or equal)

Always use === and !== in modern JavaScript. == causes subtle bugs.

Logical

// AND — both must be true
true && true    // true
true && false   // false

// OR — at least one must be true
true || false   // true
false || false  // false

// NOT — flips true/false
!true           // false
!false          // true
!""             // true — empty string is falsy

// Short-circuit evaluation (very important pattern)
const name = user && user.name;     // if user is falsy, stops — name is falsy
                                    // if user is truthy, name = user.name

const display = name || "Anonymous"; // if name is falsy, use "Anonymous"

// Nullish coalescing (modern, preferred over ||)
const value = data ?? "default";    // only uses default if data is null or undefined
                                    // NOT if data is 0, "", or false (unlike ||)

Ternary Operator

// Compact if/else on one line
// condition ? valueIfTrue : valueIfFalse
const label = isActive ? "Active" : "Inactive";

const message = count > 0
    ? `${count} items found`
    : "No items found";

// Can be nested (but avoid more than one level — gets unreadable)
const status = isComplete ? "done" : isPending ? "waiting" : "not started";

Section 5 — Conditions

if / else if / else

const score = 85;

if (score >= 90) {
    console.log("A grade");
} else if (score >= 80) {
    console.log("B grade");    // this runs
} else if (score >= 70) {
    console.log("C grade");
} else {
    console.log("Below C");
}

Truthy and Falsy Values

This is uniquely JavaScript — non-boolean values have an implicit true/false:

// FALSY values (treated as false in conditions):
if (false)      // obviously false
if (0)          // zero
if (-0)         // negative zero
if ("")         // empty string
if (null)       // null
if (undefined)  // undefined
if (NaN)        // Not a Number

// TRUTHY values (everything else, including):
if (1)          // any non-zero number
if ("hello")    // any non-empty string
if ([])         // even empty array!
if ({})         // even empty object!
if ("0")        // even the string "0"!

// Practical use:
function processData(data) {
    if (!data) {          // checks if data is null, undefined, empty string, 0...
        return;           // early return — stop processing
    }
    // ... rest of function
}

switch

const region = "EU";

switch (region) {
    case "NA":
        console.log("North America");
        break;          // IMPORTANT: always include break or it falls through
    case "EU":
        console.log("Europe");    // this runs
        break;
    case "FE":
        console.log("Far East");
        break;
    default:
        console.log("Unknown region");
}

// Multiple cases with same result:
switch (status) {
    case "pending":
    case "inProgress":
        console.log("Not done yet");  // runs for both
        break;
    case "completed":
        console.log("Done!");
        break;
}

Section 6 — Loops

for loop

// Classic for loop
for (let i = 0; i < 5; i++) {
    console.log(i);   // prints 0, 1, 2, 3, 4
}

// Loop with array index
const services = ["PayStation", "RIPE", "FORTRESS"];
for (let i = 0; i < services.length; i++) {
    console.log(i, services[i]);  // prints: 0 "PayStation", 1 "RIPE", ...
}

for…of (preferred for arrays)

// Much cleaner than index-based loop
const services = ["PayStation", "RIPE", "FORTRESS"];

for (const service of services) {
    console.log(service);  // prints each service name
}

// Works on strings too
for (const char of "hello") {
    console.log(char);  // h, e, l, l, o
}

for…in (for object keys)

const fleet = { fleetId: "RIPE-NA", region: "us-east-1", tpm: 50000 };

for (const key in fleet) {
    console.log(key, fleet[key]);
    // prints: "fleetId" "RIPE-NA"
    //         "region" "us-east-1"
    //         "tpm" 50000
}

while loop

let retryCount = 0;
const maxRetries = 3;

while (retryCount < maxRetries) {
    // try something
    retryCount++;
    if (success) break;   // exit loop early
}

Loop control: break and continue

const numbers = [1, 2, 3, -1, 4, 5];

for (const num of numbers) {
    if (num < 0) {
        continue;   // skip negative numbers, continue to next iteration
    }
    if (num > 4) {
        break;      // stop loop entirely when we hit 5
    }
    console.log(num);  // prints: 1, 2, 3, 4
}

Section 7 — Strings In Depth

Strings are immutable in JavaScript — you can’t change a character, you create new strings.

const message = "Hello, World!";

// Length
message.length            // 13

// Access character (index starts at 0)
message[0]                // "H"
message[7]                // "W"
message[message.length - 1] // "!" (last character)

// Find position
message.indexOf("World")  // 7 (position where "World" starts)
message.indexOf("xyz")    // -1 (not found)

// Check if contains
message.includes("World") // true
message.includes("xyz")   // false

// Check start/end
message.startsWith("Hello") // true
message.endsWith("!")       // true

// Extract part of string
message.slice(0, 5)        // "Hello" (from index 0, up to but not including 5)
message.slice(7)           // "World!" (from index 7 to end)
message.slice(-1)          // "!" (last character using negative index)

// Transform
message.toUpperCase()      // "HELLO, WORLD!"
message.toLowerCase()      // "hello, world!"
message.trim()             // removes whitespace from both ends
"  hello  ".trim()         // "hello"

// Replace
message.replace("World", "JS")      // "Hello, JS!"
"aabbcc".replace("b", "X")          // "aaXbcc" (only first match)
"aabbcc".replaceAll("b", "X")        // "aaXXcc" (all matches)

// Split into array
"NA,EU,FE".split(",")       // ["NA", "EU", "FE"]
"hello".split("")            // ["h", "e", "l", "l", "o"]

// Join array into string (opposite of split)
["NA", "EU", "FE"].join(", ")  // "NA, EU, FE"
["NA", "EU", "FE"].join("-")   // "NA-EU-FE"

Template Literals (use these instead of + concatenation)

const fleetId = "RIPE-NA";
const count = 42;

// Old way (ugly):
const msg1 = "Fleet " + fleetId + " has " + count + " hosts";

// Template literal (modern):
const msg2 = `Fleet ${fleetId} has ${count} hosts`;
// Result: "Fleet RIPE-NA has 42 hosts"

// Any expression works inside ${}:
const msg3 = `Total: ${count * 2} hosts`;
const msg4 = `Status: ${isActive ? "active" : "inactive"}`;

// Multi-line strings:
const query = `
    SELECT *
    FROM fleets
    WHERE region = '${region}'
    LIMIT 10
`;

Section 8 — Numbers In Depth

// Conversion
parseInt("42")        // 42 (string → integer)
parseInt("42.9")      // 42 (truncates decimal)
parseInt("42abc")     // 42 (stops at non-digit)
parseInt("abc")       // NaN (Not a Number)
parseFloat("3.14")    // 3.14
Number("42")          // 42
Number("42.5")        // 42.5
Number("")            // 0
Number("abc")         // NaN

// Check if valid number
isNaN(NaN)            // true
isNaN(42)             // false
isNaN("hello")        // true (converts to NaN first)
Number.isNaN(NaN)     // true (ONLY true for actual NaN — preferred)
Number.isNaN("hello") // false (won't convert — safer)

Number.isFinite(42)        // true
Number.isFinite(Infinity)  // false
Number.isInteger(42)       // true
Number.isInteger(42.5)     // false

// Math object
Math.round(4.6)    // 5
Math.floor(4.9)    // 4 (round down)
Math.ceil(4.1)     // 5 (round up)
Math.abs(-42)      // 42 (absolute value)
Math.max(3, 7, 2)  // 7
Math.min(3, 7, 2)  // 2
Math.pow(2, 8)     // 256 (same as 2**8)
Math.sqrt(16)      // 4
Math.random()      // random number between 0 (inclusive) and 1 (exclusive)

// Random integer between min and max (inclusive):
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
randomInt(1, 6)    // dice roll: 1 through 6

Section 9 — Type Coercion (The Weird Parts)

JavaScript automatically converts types in some situations — this causes famous bugs:

// + with strings: converts number to string (concatenation)
"5" + 3         // "53" — NOT 8!
"hello" + 42    // "hello42"
5 + 3 + "2"     // "82" (5+3=8, then "8"+"2"="82")
"2" + 5 + 3     // "253" (left to right: "25", "253")

// Other operators: convert string to number
"5" - 3         // 2
"5" * 2         // 10
"10" / 2        // 5
"5" - "3"       // 2

// Comparisons with ==:
0 == false      // true — dangerous!
"" == false     // true — dangerous!
null == undefined // true — sometimes convenient, usually dangerous

// Always use === to avoid these surprises
0 === false     // false — good, they're different types
"" === false    // false — good

Rule: Use === for comparisons. Use explicit conversion (Number(), String()) when you need to convert types.

Section 10 — console Methods (Your Best Friend)

console.log("basic message");              // standard output
console.log("Value:", someVariable);       // label + value
console.log({ name, age });               // logs object with keys (shorthand)

console.error("something went wrong");    // red in terminal
console.warn("be careful here");          // yellow in terminal

console.table([{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]);
// Prints a formatted table — great for arrays of objects

console.time("myOperation");
// ... some code ...
console.timeEnd("myOperation");           // prints time elapsed: "myOperation: 42ms"

console.assert(2 + 2 === 4, "Math is broken");   // only logs if assertion fails

Section 11 — Practice Exercises

Try these to check your understanding:

// Exercise 1: What does this print?
const x = 10;
let y = 5;
y = y + x;
console.log(y);           // ?

// Exercise 2: What does this print?
console.log("5" + 3);     // ?
console.log("5" - 3);     // ?
console.log(5 === "5");   // ?
console.log(5 == "5");    // ?

// Exercise 3: What does this print?
const score = 75;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
console.log(grade);       // ?

// Exercise 4: Write a loop that prints only odd numbers from 1 to 10

// Exercise 5: What does this print?
const msg = "hello world";
console.log(msg.includes("world"));    // ?
console.log(msg.split(" "));           // ?
console.log(msg.toUpperCase());        // ?

// Exercise 6: What is the type of each?
console.log(typeof null);              // ?
console.log(typeof []);                // ?
console.log(typeof {});               // ?
console.log(typeof undefined);        // ?

Answers:

1. 15
2. "53", 2, false, true
3. "C"
4. for (let i = 1; i <= 10; i++) { if (i % 2 !== 0) console.log(i); }
5. true, ["hello", "world"], "HELLO WORLD"
6. "object", "object", "object", "undefined"

Section 12 — Quick Reference