24. Appendix: JS Fundamentals from Scratch

Data Types & Type Coercion

// Primitive types: string, number, boolean, null, undefined, symbol, bigint
typeof 'hello';   // 'string'
typeof 42;        // 'number'
typeof true;      // 'boolean'
typeof undefined; // 'undefined'
typeof null;      // 'object' (historical bug)

// Type coercion
'5' - 2;   // 3
'5' + 2;   // '52'
+'5';      // 5 (unary plus)

Objects & Arrays

// Object
const user = { name: 'John', age: 30 };
user.name;           // 'John'
delete user.age;
Object.keys(user);   // ['name']

// Array
const arr = [1, 2, 3];
arr.push(4);         // [1, 2, 3, 4]
arr.map(x => x * 2); // [2, 4, 6, 8]
arr.filter(x => x > 1); // [2, 3, 4]
arr.find(x => x === 3); // 3

Functions, Scope & Hoisting

// Function declaration (hoisted)
function greet(name) { return `Hello ${name}`; }

// Function expression (not hoisted)
const greet2 = function(name) { return `Hello ${name}`; };

// Arrow function
const greet3 = (name) => `Hello ${name}`;

// Hoisting
console.log(x); // undefined (not ReferenceError)
var x = 5;

Promises & Async/Await (Deep Dive)

// Promise chain
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// Async/await
async function loadData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('Failed:', err);
  }
}

// Promise.all (parallel execution)
const [users, products] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/products').then(r => r.json()),
]);

Destructuring & Spread

// Object destructuring
const { name, age } = user;

// Array destructuring
const [first, second] = arr;

// Spread operator
const clone = { ...user, role: 'admin' };
const combined = [...arr, 5, 6];

Modules (ESM)

// math.js
export const add = (a, b) => a + b;
export default class Calculator { /* ... */ }

// app.js
import Calculator, { add } from './math.js';