JavaScript Language Refresher

Variables & Types

• Declarations: let, const (recommended), var (avoid).
• Scope: let/const are block-scoped; var is function-scoped (or global).
• Dynamic typing: the same variable can hold values of different types across time.

CopyTry itlet x = 42;
x = "hello";
const PI = 3.14159;
var legacy = true; // avoid
function hello() {}
console.log(typeof x);       // "string"
console.log(typeof hello);   // "function"

Conditionals

CopyTry itconst age = 20;
const hasLicense = true;

// if / else
if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

// Ternary operator
const status = (age >= 18) ? "Adult" : "Minor";

// Logical operators
// && (AND) - both conditions must be true
if (age >= 18 && hasLicense) {
  console.log("Can drive");
}

// || (OR) - at least one condition must be true
if (age < 18 || !hasLicense) {
  console.log("Cannot drive");
}

// ! (NOT) - inverts a boolean
const isMinor = !(age >= 18);
console.log(isMinor); // false

// Comparison operators
console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 >= 5);  // true
console.log(5 <= 4);  // false
console.log(5 === 5); // true (strict equality)
console.log(5 !== 3); // true (strict inequality)
console.log(5 == "5");  // true (loose - avoid!)
console.log(5 === "5"); // false (strict - prefer!)

Loops

CopyTry itconst arr = [1, 2, 3];

// classic for
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// for...of (values)
for (const v of arr) {
  console.log(v);
}

// for...in (keys/indices) - better for objects
const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

// while - checks condition first
let n = 3;
while (n > 0) {
  console.log(n--);
}

// do...while - executes at least once, then checks
let m = 0;
do {
  console.log("Runs at least once:", m);
  m++;
} while (m < 3);

Functions

Functions are reusable blocks of code. In JavaScript you create them either via a declaration (hoisted) or a function expression (created at runtime). The number of arguments you pass is flexible (you can pass fewer or more than the parameters declared), you can use default parameters, and traditional functions expose an arguments object. JavaScript has no true runtime overloads; you simulate them via optional/default/rest parameters and runtime checks. Function expressions can be named or anonymous.

Syntax: Declaration vs Expression

CopyTry it// Function declaration (hoisted)
function add(a, b) {
  return a + b;
}

// Function expression (created when this line runs)
const addExpr = function (a, b) {
  return a + b;
};

// Named function expression (better stack traces)
const addNamed = function addNamed(a, b) {
  return a + b;
};

Parameter flexibility (argument count is flexible)

JS doesn’t enforce counts: missing parameters are undefined, extra arguments are ignored unless you read them.

CopyTry itfunction demo(a, b) {
  console.log('a:', a); // maybe undefined
  console.log('b:', b);
}
demo(1);           // a: 1, b: undefined
demo(1, 2, 3, 4);  // a: 1, b: 2 (extra args ignored unless used)

Default parameters

CopyTry itfunction greet(name = 'stranger', punctuation = '!') {
  return `Hello, ${name}${punctuation}`;
}
greet();              // "Hello, stranger!"
greet('Mehdi');       // "Hello, Mehdi!"
greet('Mehdi', '!!'); // "Hello, Mehdi!!"

// Defaults are evaluated at call time
function getId() { return Math.floor(Math.random() * 1000); }
function makeUser(id = getId(), role = 'reader') {
  return { id, role };
}

The arguments object (traditional functions)

Traditional (non-arrow) functions expose arguments, which contains all values passed. Prefer rest parameters for clarity.

CopyTry itfunction sumUsingArguments() {
  var total = 0;
  for (var i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// Prefer rest parameters
function sum(/* rest collects extra values */ ...nums) {
  var total = 0;
  for (var i = 0; i < nums.length; i++) {
    total += nums[i];
  }
  return total;
}

Rest parameters (...args)

Use rest parameters to collect any additional arguments passed to the function. Rules: only one rest parameter and it must be the last in the parameter list.

CopyTry it// Variadic sum
function sumAll(/* collects extra values */ ...nums) {
  var total = 0;
  for (var i = 0; i < nums.length; i++) {
    total += nums[i];
  }
  return total;
}
sumAll(1, 2, 3); // 6

// Mixing named parameters with rest (no array methods)
function log(label, /* any extra values */ ...values) {
  console.log('[' + label + ']', values); // values are just forwarded/printed
}
log('nums', 10, 20, 30);

// Traditional function using rest
function product(/* numbers */ ...nums) {
  var result = 1;
  for (var i = 0; i < nums.length; i++) {
    result *= nums[i];
  }
  return result;
}

// Invalid: rest must be the last parameter
// function badRest(...a, b) {}

// Note: We'll revisit the spread operator later when we cover arrays.

No true overloads in JavaScript

Declaring the same function name twice overwrites the previous definition. Simulate overloads with optional/default/rest parameters and runtime checks.

CopyTry itfunction format(value, options = {}) {
  if (typeof value === 'number') return value.toFixed(options.decimals ?? 2);
  if (typeof value === 'boolean') return value ? 'yes' : 'no';
  return String(value);
}

// TypeScript note: TS overloads are compile-time only; runtime is still one JS function.

Named vs Anonymous

CopyTry it// Declaration (named by syntax)
function hello() {}

// Anonymous function expression
const anon = function () {};

// Named function expression
const named = function doWork() {};

console.log(hello.name); // "hello"
console.log(anon.name);  // may be inferred by engines (e.g., "anon")
console.log(named.name); // "doWork"

Arrow Functions

General syntax (at a glance)

Generic shape: (params) => { body }

CopyTry it// General forms
// (parameters) => expression
// (parameters) => { statements }

// Examples
const f1 = x => x * 2;            // one parameter, implicit return
const f2 = (a, b) => a + b;        // multiple parameters
const f3 = () => Date.now();       // zero parameters

// Block body: use an explicit return
const f4 = (x) => {
  const y = x * 2;
  return y;
};

// Returning an object literal: wrap in parentheses
const makePoint = (x, y) => ({ x, y });

Motivation: shorter syntax for inline callbacks and a lexical this (captures from surrounding scope), which avoids manual .bind in many cases. Arrow functions are always anonymous (engines may infer a name from the variable/property they’re assigned to).

Syntax variations & abbreviations

• Parameter parentheses are optional only when there is exactly one parameter: x => x * 2. For zero or more than one parameter, you must use parentheses: () => ..., (a, b) => ....
• Braces are optional only when the body is a single expression (no statements): x => x * 2. If you use a block body with braces { ... }, you write normal statements.
• With a single-expression body (no braces), the result is returned implicitly. With a block body { ... }, use an explicit return for output.

CopyTry it// Single parameter, implicit return
const double = x => x * 2;

// Zero or multiple parameters need parentheses
const add = (a, b) => a + b;      // implicit return
const now = () => Date.now();     // implicit return

// Block body requires explicit return
const addVerbose = (a, b) => {
  const sum = a + b;
  return sum;
};

// Returning an object literal (wrap in parentheses)
const makePoint = (x, y) => ({ x, y });

// Defaults (rest covered above)
const greet = (name = 'stranger') => `Hello, ${name}!`;
const fullName = ({ first, last }) => `${first} ${last}`;

Always anonymous (with name inference)

CopyTry itconst doThing = () => {};
console.log(doThing.name); // often "doThing" (inferred), but arrow syntax itself has no name slot

Key differences: this and arguments

Examples in practice

CopyTry it// Event listener
document.querySelector('button').addEventListener('click', (evt) => {
  console.log('Clicked at', evt.clientX, evt.clientY);
});

// Timers
setTimeout(() => console.log('Hello after 1s'), 1000);

// Simple math helpers
const square = x => x * x;
const add = (a, b) => a + b;

// Returning objects succinctly
const makePoint = (x, y) => ({ x, y });

Callbacks

A callback is a function passed as an argument to customize behaviour (e.g., what to do with a result).

CopyTry itfunction compute(a, b, render) {
  const res = a + b; // internal work
  render(res);       // delegate final action to the callback
}

compute(2, 3, x => console.log("Result:", x));

// async example
setTimeout(() => console.log("Hello after 1s"), 1000);

Why callbacks? Decoupling behaviour from logic

Consider a small “guess game” where the function compares your number to a random one and prints a message. If the function prints inside, the behaviour is hardcoded and cannot be changed by the caller.

CopyTry itfunction randomNumber() {
  // random integer in [1, 5]
  return Math.floor(Math.random() * 5) + 1;
}

function devinette(nbr) {
  const aleatoire = randomNumber();
  if (aleatoire === nbr) {
    console.log("bravo");
  } else {
    console.log("echec");
  }
}

devinette(3);

CopyTry itfunction randomNumber() {
  return Math.floor(Math.random() * 5) + 1;
}

function devinette(nbr, onSuccess, onFailure) {
  const secret = randomNumber();
  if (secret === nbr) {
    onSuccess(secret, nbr);
  } else {
    onFailure(secret, nbr);
  }
}

// Caller decides behaviours
function celebrate(secret, guess) {
  console.log("🎉 bravo — secret:", secret, "guess:", guess);
}
function report(secret, guess) {
  console.log("❌ echec — secret:", secret, "guess:", guess);
}

devinette(3, celebrate, report);
devinette(2, (secret, guess) => console.log("Nice!", secret, guess), (secret, guess) => console.log("Try again.", secret, guess));

CopyTry itfunction randomNumber() {
  return Math.floor(Math.random() * 5) + 1;
}

function devinette(nbr, done) {
  const secret = randomNumber();
  const success = secret === nbr;
  done({ success, secret, guess: nbr });
}

devinette(4, (r) => {
  if (r.success) {
    console.log("bravo —", r);
  } else {
    console.log("echec —", r);
  }
});

Objects

Ways to create objects: literal, function constructor, class (ES2015+).

CopyTry it// object literal with properties and a method
const user = {
  id: 1,
  name: "Mehdi",
  hello: function () { // method using 'this'
    console.log(`Hi, I'm ${this.name}`);
  }
};

// add properties dynamically
user.age = 32;

// call existing method
user.hello(); // Hi, I'm Mehdi

// add a method dynamically
user.rename = function (newName) {
  this.name = newName;
};
user.rename("Sara");
user.hello(); // Hi, I'm Sara

// remove a property
delete user.id;

// membership check
console.log("name" in user); // true

CopyTry itfunction Person(name) {
  this.name = name;
  this.hello = function () {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const p = new Person("Sara");
p.hello();

CopyTry itfunction Counter(start) {
  // private (not accessible from the instance)
  let count = (typeof start === 'number') ? start : 0;

  // public methods (privileged: they can see 'count')
  this.get = function () { return count; };
  this.inc = function () { count++; };
  this.reset = function () { count = 0; };
}

const c = new Counter(5);
console.log(c.count);      // undefined (private)
console.log(c.get());      // 5
c.inc();
console.log(c.get());      // 6
c.reset();
console.log(c.get());      // 0

CopyTry itclass Person {
  constructor(name) { this.name = name; }
  hello() { console.log(`Hi, I'm ${this.name}`); }
}
const q = new Person("Youssef");
q.hello();

this and arguments

CopyTry itconst obj = {
  value: 42,
  withFunction() {
    setTimeout(function() {
      console.log('function this.value =', this && this.value); // undefined in browsers (this === window)
    }, 0);
  },
  withArrow() {
    setTimeout(() => {
      console.log('arrow this.value =', this.value); // 42 (inherits obj as this)
    }, 0);
  }
};
obj.withFunction();
obj.withArrow();

CopyTry itfunction demo() {
  console.log('arguments length =', arguments.length);
  console.log('first arg =', arguments[0]);
  const arr = Array.from(arguments);
  console.log('as real array =', arr.join(', '));
}
demo(1, 'a', true);

function better(...args) {
  console.log('args is a real array:', Array.isArray(args), args);
}
better(1, 2, 3);

Rest & Spread Operators (...)

The ... syntax serves two opposite purposes depending on context. Understanding the difference is crucial:

REST: Collecting Multiple → One

CopyTry it// REST in function parameters: collect arguments into array
function sum(...numbers) {  // Gathers all arguments
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
// numbers = [1, 2, 3, 4] - collected into array

// REST with named parameters (rest must be last!)
function greet(greeting, ...names) {
  return `${greeting} ${names.join(', ')}!`;
}
console.log(greet('Hello', 'Ali', 'Sara', 'Omar'));
// "Hello Ali, Sara, Omar!"

// REST in array destructuring: collect remaining items
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5] - collected remaining

// REST in object destructuring: collect remaining properties
const user = { name: 'Mehdi', age: 32, city: 'Casa', role: 'dev' };
const { name, ...otherProps } = user;
console.log(name);       // "Mehdi"
console.log(otherProps); // { age: 32, city: 'Casa', role: 'dev' }

SPREAD: Expanding One → Multiple

CopyTry it// SPREAD in arrays: expand array into individual elements
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Combine arrays
const combined = [...arr1, ...arr2];  // Spreads both arrays
console.log(combined); // [1, 2, 3, 4, 5, 6]

// Clone array (shallow copy)
const clone = [...arr1];
console.log(clone); // [1, 2, 3]

// SPREAD in function calls: expand array into arguments
const nums = [1, 5, 3, 9, 2];
console.log(Math.max(...nums)); // 9
// Equivalent to: Math.max(1, 5, 3, 9, 2)

// SPREAD in objects: expand object into properties
const user = { name: "Mehdi", age: 32 };
const location = { city: "Casablanca", country: "Morocco" };

// Merge objects
const profile = { ...user, ...location };  // Spreads both objects
console.log(profile);
// { name: "Mehdi", age: 32, city: "Casablanca", country: "Morocco" }

// Override properties (later values win)
const updated = { ...user, age: 33, role: "admin" };
console.log(updated);
// { name: "Mehdi", age: 33, role: "admin" }

Putting It Together: REST + SPREAD

CopyTry it// Use both in same function!
function mergeAndLog(label, ...arrays) {  // REST: collect arrays
  const merged = [].concat(...arrays);    // SPREAD: expand each array
  console.log(`${label}:`, merged);
  return merged;
}

mergeAndLog('Numbers', [1, 2], [3, 4], [5, 6]);
// "Numbers: [1, 2, 3, 4, 5, 6]"

// Practical example: updating nested objects immutably
const state = {
  user: { name: 'Ali', age: 25 },
  settings: { theme: 'dark', lang: 'en' }
};

// Update user age without mutating original
const newState = {
  ...state,                          // SPREAD: copy all properties
  user: {
    ...state.user,                   // SPREAD: copy user properties
    age: 26                          // Override age
  }
};
console.log(state.user.age);      // 25 (original unchanged)
console.log(newState.user.age);   // 26 (new state updated)

// ❌ WRONG: Can't use rest in the middle
function bad(...first, last) { }  // SyntaxError!

// ✅ CORRECT: Rest must be last parameter
function good(first, ...rest) { }

// ❌ WRONG: Can't spread into nothing
const x = ...arr;  // SyntaxError!

// ✅ CORRECT: Spread inside array/object/call
const x = [...arr];
const y = Math.max(...arr);

Template Literals

Template literals use backticks (`) and provide a cleaner, more readable way to work with strings compared to concatenation.

Why Template Literals? The Problem with Concatenation

CopyTry itconst user = { name: 'Mehdi', email: 'mehdi@example.com' };
const orderCount = 5;
const total = 249.99;

// ❌ CONCATENATION: Hard to read, easy to make mistakes
const msg1 = 'Hello ' + user.name + ',\n' +
           'You have ' + orderCount + ' orders.\n' +
           'Total: $' + total.toFixed(2) + '\n' +
           'Email: ' + user.email;

// ✅ TEMPLATE LITERAL: Clean, readable, maintainable
const msg2 = `Hello ${user.name},
You have ${orderCount} orders.
Total: $${total.toFixed(2)}
Email: ${user.email}`;

console.log(msg2);

// Spot the difference:
// - No + operators cluttering the code
// - Multi-line strings work naturally (no \n needed)
// - Easy to see the structure
// - Expressions inside ${} are clear

Basic Features

CopyTry itconst name = "Mehdi";
const age = 32;

// Expression interpolation
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);

// Any expression works
const price = 100;
const tax = 0.2;
const total = `Total: ${price * (1 + tax)} MAD`;
console.log(total); // Total: 120 MAD

// Function calls
const loud = (text) => text.toUpperCase();
console.log(`Message: ${loud('hello')}`); // Message: HELLO

// Conditional expressions
const status = age >= 18 ? 'adult' : 'minor';
const info = `${name} is an ${status}`;
console.log(info); // Mehdi is an adult

Practical Use Cases

CopyTry it// Use Case 1: HTML Generation
function createUserCard(user) {
  return `
    

      
${user.name}
      
Email: ${user.email}
      
        ${user.active ? '● Active' : '○ Inactive'}
      
    
  `;
}

const html = createUserCard({ 
  name: 'Sara', 
  email: 'sara@example.com', 
  active: true 
});
console.log(html);

// Use Case 2: SQL Queries (be careful with injection!)
function buildQuery(table, conditions) {
  const where = conditions.map(c => `${c.field} = '${c.value}'`).join(' AND ');
  return `SELECT * FROM ${table} WHERE ${where}`;
}

const query = buildQuery('users', [
  { field: 'age', value: 25 },
  { field: 'city', value: 'Casa' }
]);
console.log(query);

// Use Case 3: URLs and API endpoints
const userId = 123;
const apiUrl = `https://api.example.com/users/${userId}/posts?limit=10`;
console.log(apiUrl);

// Use Case 4: Log messages with context
function logAction(action, user, timestamp = Date.now()) {
  console.log(`[${new Date(timestamp).toISOString()}] ${user.name} performed: ${action}`);
}

logAction('login', { name: 'Ali' });

Destructuring (Objects & Arrays)

Destructuring lets you extract values from objects or arrays into distinct variables using a clean, declarative syntax. It's a shorthand for pulling out what you need.

Object Destructuring

Extract properties from an object by matching variable names to property keys.

CopyTry itconst user = {
  name: "Mehdi",
  age: 32,
  city: "Casablanca"
};

// Extract properties into variables
const { name, age } = user;
console.log(name); // "Mehdi"
console.log(age);  // 32

// Rename while destructuring
const { name: userName, city: location } = user;
console.log(userName); // "Mehdi"
console.log(location); // "Casablanca"

// Default values (if property doesn't exist)
const { country = "Morocco", email = "none" } = user;
console.log(country); // "Morocco"
console.log(email);   // "none"

CopyTry it// Before: accessing object properties manually
function displayUserOld(user) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

// After: destructure in the parameter list
function displayUser({ name, age, city = "Unknown" }) {
  console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}

const user = { name: "Youssef", age: 28 };
displayUser(user); // Name: Youssef, Age: 28, City: Unknown

// REST in destructuring: collect remaining properties
const { name, ...rest } = { name: "Ali", age: 25, city: "Fes" };
console.log(name); // "Ali"
console.log(rest); // { age: 25, city: "Fes" }

Array Destructuring

Extract values from arrays by position rather than by name.

CopyTry itconst colors = ["red", "green", "blue", "yellow"];

// Extract by position
const [first, second] = colors;
console.log(first);  // "red"
console.log(second); // "green"

// Skip elements using commas
const [, , third] = colors;
console.log(third); // "blue"

// Default values
const [a, b, c, d, e = "default"] = colors;
console.log(e); // "default" (no 5th element)

// Swapping variables without temp variable
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

CopyTry itconst numbers = [1, 2, 3, 4, 5];

// Capture first element and rest
const [first, ...rest] = numbers;
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

// Function returning multiple values
function getCoordinates() {
  return [10, 20];
}
const [x, y] = getCoordinates();
console.log(x, y); // 10 20

// Destructure in loop
const pairs = [[1, 2], [3, 4], [5, 6]];
pairs.forEach(([a, b]) => {
  console.log(`a=${a}, b=${b}`);
});

CopyTry itconst users = [
  { id: 1, name: "Fatima", role: "admin" },
  { id: 2, name: "Hassan", role: "user" },
  { id: 3, name: "Nadia", role: "moderator" }
];

// Destructure first user's properties
const [{ name: firstName, role }] = users;
console.log(firstName); // "Fatima"
console.log(role);      // "admin"

// Map with destructuring
const names = users.map(({ name }) => name);
console.log(names); // ["Fatima", "Hassan", "Nadia"]

// Filter admins using destructuring
const admins = users.filter(({ role }) => role === "admin");
console.log(admins); // [{ id: 1, name: "Fatima", role: "admin" }]

Arrays

In JS, arrays are objects with flexible size (no fixed length required).

CopyTry itconst t = [10, 20];
t.push(30);     // [10, 20, 30]
t[10] = 99;     // holes allowed; length becomes 11
console.log(t.length);

Array Methods with Callbacks

⚡ Quick Decision Guide: Which Method to Use?

CopyTry it// Decision Guide:
// Transform each item → .map()
// Select some items → .filter()
// Combine to single value → .reduce()
// Find one item → .find()
// Check if any match → .some()
// Check if all match → .every()

const orders = [
  { id: 1, total: 50, status: 'paid' },
  { id: 2, total: 120, status: 'pending' },
  { id: 3, total: 80, status: 'paid' }
];

// Transform → .map()
const ids = orders.map(o => o.id);
console.log('IDs:', ids); // [1, 2, 3]

// Select → .filter()
const paid = orders.filter(o => o.status === 'paid');
console.log('Paid:', paid.length); // 2

// Combine → .reduce()
const revenue = paid.reduce((sum, o) => sum + o.total, 0);
console.log('Revenue:', revenue); // 130

// Find → .find()
const order = orders.find(o => o.id === 2);
console.log('Found:', order?.total); // 120

// Check any → .some()
const hasLarge = orders.some(o => o.total > 100);
console.log('Has large:', hasLarge); // true

// Check all → .every()
const allPaid = orders.every(o => o.status === 'paid');
console.log('All paid:', allPaid); // false

Why these methods? Compare with traditional loops

Before these helpers, you wrote and repeated a lot of boilerplate: create variables, loop with indexes, push into new arrays, etc.

CopyTry itconst nums = [1, 2, 3, 4];

  // 1) Sum
  let sum = 0;
  for (let i = 0; i < nums.length; i++) {
    sum += nums[i];
  }
  console.log('sum =', sum);

// 2) Transform (squares) → build a new array → build a new array
const squares = [];
for (let i = 0; i < nums.length; i++) {
  squares.push(nums[i] * nums[i]);
}
console.log('squares =', squares);

// 3) Filter evens → build a new array conditionally → build a new array conditionally
const evens = [];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) evens.push(nums[i]);
}
console.log('evens =', evens);

forEach — perform side effects

CopyTry itconst nums = [1, 2, 3];
let sum = 0;
nums.forEach((value, index, array) => {
  sum += value;
});
console.log(sum); // 6

map — transform into a new array

CopyTry itconst celsius = [0, 20, 30];
const fahrenheit = celsius.map(c => c * 9/5 + 32);
console.log(fahrenheit); // [32, 68, 86]

// map objects
const users = [{id:1,name:"A"}, {id:2,name:"B"}];
const names = users.map(u => u.name);

filter — keep items that match a predicate

CopyTry itconst nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0); // [2,4,6]

// filter objects
const people = [
  { name: "Sara", age: 22 },
  { name: "Ali", age: 17 },
];
const adults = people.filter(p => p.age >= 18);

sort — order items (mutates the array)

CopyTry itconst nums = [10, 2, 5];
// default is lexicographic by string
console.log([...nums].sort());       // [10,2,5] → ["10","2","5"] → [10,2,5]

// numeric ascending / descending
console.log([...nums].sort((a,b) => a - b)); // [2,5,10]
console.log([...nums].sort((a,b) => b - a)); // [10,5,2]

// sort strings (case-insensitive)
const names = ["zara","Ali","mehdi"];
console.log([...names].sort((a,b) => a.localeCompare(b, undefined, { sensitivity: "base" })));

// sort objects by field
const people = [{name:"Sara",age:22},{name:"Ali",age:30}];
people.sort((p,q) => p.age - q.age); // by age asc (mutates)

More useful ones

CopyTry it// find / findIndex
const arr = [5, 12, 8, 130, 44];
const firstBig = arr.find(n => n > 10);      // 12
const idxBig   = arr.findIndex(n => n > 10); // 1

// some / every
[1, 3, 5].some(n => n % 2 === 0);  // false
[2, 4, 6].every(n => n % 2 === 0); // true

// reduce (sum)
const total = [1,2,3,4].reduce((acc, n) => acc + n, 0); // 10

Error Handling with try / catch

Use try { ... } catch (err) { ... } finally { ... } to handle exceptions and keep your program in control. You can also throw your own errors when inputs are invalid.

Basic try/catch

CopyTry itconst text = '{"id":1,"name":"Mehdi"}';
try {
  const obj = JSON.parse(text);
  console.log('Parsed:', obj.name);
} catch (err) {
  console.error('Invalid JSON:', err.message);
}

Throwing your own errors

CopyTry itfunction validateAge(age) {
  if (typeof age !== 'number' || Number.isNaN(age)) {
    throw new TypeError('age must be a number');
  }
  if (age < 0) throw new RangeError('age must be >= 0');
  return age;
}

try {
  const a = validateAge(20);
  console.log('ok:', a);
  validateAge('x'); // will throw
} catch (e) {
  console.error('Validation error:', e.message);
}

finally for cleanup

CopyTry itfunction work() {
  console.log('start');
  try {
    // do stuff that may throw
    JSON.parse('{ bad json');
  } catch (e) {
    console.error('caught:', e.message);
  } finally {
    console.log('cleanup always runs');
  }
  console.log('end');
}
work();

CopyTry ittry {
  setTimeout(() => { throw new Error('async boom'); }, 0);
} catch (e) {
  console.log('This will NOT catch the async error');
}

// Fix: catch inside the callback
setTimeout(() => {
  try {
    throw new Error('async boom');
  } catch (e) {
    console.log('Caught later:', e.message);
  }
}, 0);

Error levels: bubbling to the nearest catch

When an error occurs, JavaScript looks for the nearest surrounding try/catch up the call stack. If none is found, it reaches the global error handler and can halt your program. Catch at the appropriate boundary to avoid app crashes.

CopyTry itfunction c() {
  throw new Error('boom in c');
}
function b() {
  c(); // no catch here
}
function a() {
  try {
    b();
    console.log('after b'); // not reached
  } catch (e) {
    console.log('caught in a:', e.message);
  }
}
a();

CopyTry itfunction c() {
  throw new Error('boom in c');
}
function b() {
  try {
    c();
  } catch (e) {
    console.log('handled in b:', e.message);
  }
}
function a() {
  b();
  console.log('a continues'); // reached
}
a();

⚡ Where to Place try/catch: Practical Guidance

Understanding error mechanics is one thing - knowing where to catch errors is another. Here's how to think about it:

CopyTry it// ❌ BAD: Catching too granularly (too many try/catch)
function processUserBad(data) {
  let parsed;
  try {
    parsed = JSON.parse(data);
  } catch (e) {
    console.error('Parse error:', e.message);
    return null;
  }
  
  try {
    validate(parsed);
  } catch (e) {
    console.error('Validation error:', e.message);
    return null;
  }
  
  try {
    save(parsed);
  } catch (e) {
    console.error('Save error:', e.message);
    return null;
  }
  
  return parsed;
}

// ✅ GOOD: Catch at function boundary, handle meaningfully
function processUserGood(data) {
  try {
    const parsed = JSON.parse(data);
    validate(parsed);
    save(parsed);
    return { success: true, data: parsed };
  } catch (error) {
    console.error('Failed to process user:', error.message);
    // Log context for debugging
    console.error('Input data:', data);
    return { success: false, error: error.message };
  }
}

// 📝 Helper functions
function validate(user) {
  if (!user.email) throw new Error('Email required');
  if (!user.name) throw new Error('Name required');
}

function save(user) {
  // Simulate DB save that might fail
  if (Math.random() < 0.1) throw new Error('Database error');
  console.log('Saved:', user.name);
}

// Test it
const result1 = processUserGood('{"name":"Ali","email":"ali@test.com"}');
console.log('Result:', result1);

const result2 = processUserGood('invalid json');
console.log('Result:', result2);

🎯 Decision Guide: Where to Catch Errors

CopyTry it// Level 1: Function boundary (pure function)
function calculateTotal(items) {
  try {
    return items.reduce((sum, item) => sum + item.price, 0);
  } catch (error) {
    // Log and return safe default
    console.error('Calculation error:', error.message);
    return 0;
  }
}

// Level 2: Module boundary (API route handler)
function handleUserRequest(req, res) {
  try {
    const user = parseUser(req.body);
    const saved = saveToDatabase(user);
    res.json({ success: true, user: saved });
  } catch (error) {
    // Caught at boundary, log context, send user-friendly response
    console.error('[API Error]', error.message, { body: req.body });
    res.status(400).json({
      success: false,
      error: 'Failed to create user',
      details: error.message
    });
  }
}

// Level 3: Global error handler (last resort)
window.addEventListener('error', (event) => {
  console.error('[Global Error]', event.error);
  // Send to error tracking service
  // Show user-friendly message
});

// Don't catch too early - let errors bubble to the right level!

Promises & Asynchronous Programming

Motivation: As programs grow, nesting callbacks leads to callback hell (a “pyramid” of indentation) and scattered error handling. Promises give a standard way to represent an async result (pending → settled), compose steps, and handle errors in one place. async/await is syntax on top of promises for a synchronous style.

Callback hell (the pyramid)

The problem is most visible when each API expects a callback, and inside your callback you must call the next API that also expects a callback, and so on… leading to deep nesting and duplicated error checks.

CopyTry it// Real example: fetch users → user details → user posts → comments
  // Each API expects a callback: (err, data)
  function fetchUsers(cb){
    setTimeout(function(){ cb(null, [ {id:1,name:'A'}, {id:2,name:'B'} ]); }, 30);
  }
  function fetchUserDetails(userId, cb){
    setTimeout(function(){ cb(null, { id:userId, email:'a@example.com' }); }, 30);
  }
  function fetchUserPosts(userId, cb){
    setTimeout(function(){ cb(null, [ { id:10, userId, title:'Hello' } ]); }, 30);
  }
  function fetchPostComments(postId, cb){
    setTimeout(function(){ cb(null, [ { id:100, postId, text:'Nice!' } ]); }, 30);
  }

  // Pyramid of doom: callback inside callback inside callback…
  fetchUsers(function (err, users) {
    if (err) return console.error('users error:', err.message || err);
    const user = users[0];
    fetchUserDetails(user.id, function (err, details) {
      if (err) return console.error('details error:', err.message || err);
      fetchUserPosts(user.id, function (err, posts) {
        if (err) return console.error('posts error:', err.message || err);
        const post = posts[0];
        fetchPostComments(post.id, function (err, comments) {
          if (err) return console.error('comments error:', err.message || err);
          console.log('done (callbacks):', { user, details, post, comments });
        });
      });
    });
  });

From callbacks to promises

CopyTry it// Promise that resolves after a delay
  function delay(ms) {
    return new Promise((resolve) => {
      setTimeout(() => resolve(ms), ms);
    });
  }

  delay(200).then((v) => {
    console.log('resolved after', v, 'ms');
  });

  // Real-life: users → details (promises)
  function fetchUsersP(){
    return new Promise((resolve) => setTimeout(() => resolve([
      {id:1,name:'A'}, {id:2,name:'B'}
    ]), 30));
  }
  function fetchDetailsP(id){
    return new Promise((resolve) => setTimeout(() => resolve({ userId:id, score:id*10 }), 30));
  }

  fetchUsersP()
  .then(users => Promise.all(users.map(u =>
    fetchDetailsP(u.id).then(d => ({ id:u.id, name:u.name, details:d }))
  )))
  .then(all => console.log('all done (promises):', all))
  .catch(err => console.error('error:', err.message));

Chaining and returning

CopyTry itfunction step(n) {
  return new Promise((resolve) => setTimeout(() => resolve(n), 50));
}

step(1)
  .then(v => { console.log('step', v); return step(v + 1); })
  .then(v => { console.log('step', v); return step(v + 1); })
  .then(v => { console.log('step', v); })
  .catch(err => console.error('caught:', err));

Error propagation

CopyTry itnew Promise((resolve, reject) => {
  reject(new Error('boom'));
})
  .then(() => console.log('will not run'))
  .catch(err => console.error('handled once:', err.message));

Promise Chaining Scenarios

Each button above demonstrates a different promise flow pattern. Here are the code examples:

CopyTry it// Promise resolves → .then() handles the value
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success! Data loaded'), 1000);
});

promise
  .then(value => {
    console.log(value); // "Success! Data loaded"
    return value.toUpperCase();
  })
  .then(upperValue => {
    console.log(upperValue); // "SUCCESS! DATA LOADED"
  });

CopyTry it// Promise rejects → .catch() handles the error
const promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('Network timeout')), 1000);
});

promise
  .then(value => {
    console.log('This will not run');
  })
  .catch(error => {
    console.error('Caught:', error.message); // "Caught: Network timeout"
    return 'Recovered with default value';
  })
  .then(recovered => {
    console.log(recovered); // "Recovered with default value"
  });

CopyTry it// .then() receives value but throws an error
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve({ id: 42, name: 'Alice' }), 500);
});

promise
  .then(user => {
    console.log('User received:', user); // {id: 42, name: "Alice"}
    
    // Validate user ID and throw error if invalid
    if (user.id < 100) {
      throw new Error('User ID too low');
    }
    return user;
  })
  .catch(error => {
    console.error('Error caught:', error.message);
    // "Error caught: User ID too low"
  });

CopyTry it// .then() returns a new promise that resolves - promise chaining
function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve({ id, name: 'Bob' }), 300);
  });
}

function fetchUserPosts(userId) {
  return new Promise(resolve => {
    setTimeout(() => resolve(['Post 1', 'Post 2']), 400);
  });
}

fetchUser(123)
  .then(user => {
    console.log('Got user:', user); // {id: 123, name: "Bob"}
    // Return another promise - chain waits for it to resolve
    return fetchUserPosts(user.id);
  })
  .then(posts => {
    console.log('Got posts:', posts); // ["Post 1", "Post 2"]
  });

CopyTry it// .finally() runs regardless of success or failure
let isLoading = true;

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 500);
  });
}

fetchData()
  .then(data => {
    console.log('Success:', data); // "Success: Data loaded"
  })
  .catch(error => {
    console.error('Error:', error.message);
  })
  .finally(() => {
    isLoading = false;
    console.log('Cleanup: isLoading =', isLoading); // false
    console.log('This always runs!'); // Always runs
  });

Async/await: Modern Asynchronous JavaScript

Async/await is syntactic sugar over promises that makes asynchronous code look and behave like synchronous code. It's the modern, preferred way to work with promises.

⚡ Sequential vs Parallel Execution

CopyTry itfunction slowTask(name, ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`${name} completed`);
      resolve(name);
    }, ms);
  });
}

// ❌ SLOW: Sequential (300ms total)
async function runSequential() {
  console.log('=== Sequential ===');
  const task1 = await slowTask('Task 1', 100); // Wait 100ms
  const task2 = await slowTask('Task 2', 100); // Then wait 100ms
  const task3 = await slowTask('Task 3', 100); // Then wait 100ms
  console.log('Sequential done'); // ~300ms total
}

// ✅ FAST: Parallel (100ms total)
async function runParallel() {
  console.log('=== Parallel ===');
  const [task1, task2, task3] = await Promise.all([
    slowTask('Task 1', 100),
    slowTask('Task 2', 100),
    slowTask('Task 3', 100)
  ]);
  console.log('Parallel done'); // ~100ms total
}

// Test: runParallel();

CopyTry itfunction fakeApi(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) resolve({ id, name: 'Item ' + id });
      else reject(new Error('invalid id'));
    }, 60);
  });
}

// using then/catch
fakeApi(1)
  .then(x => fakeApi(x.id + 1))
  .then(x => console.log('then chain got:', x))
  .catch(e => console.error('then chain error:', e.message));

// using async/await + try/catch
async function run() {
  try {
    const a = await fakeApi(1);
    const b = await fakeApi(a.id + 1);
    console.log('await got:', b);
  } catch (e) {
    console.error('await error:', e.message);
  }
}
run();

// Real-life with async/await: users → details
function fetchUsersP(){
  return new Promise((resolve) => setTimeout(() => resolve([
    {id:1,name:'A'}, {id:2,name:'B'}
  ]), 30));
}
function fetchDetailsP(id){
  return new Promise((resolve) => setTimeout(() => resolve({ userId:id, score:id*10 }), 30));
}

async function runUsers(){
  try{
    const users = await fetchUsersP();
    const detailed = await Promise.all(users.map(async (u) => ({
      id: u.id,
      name: u.name,
      details: await fetchDetailsP(u.id)
    })));
    console.log('all done (await):', detailed);
  }catch(e){
    console.error('await users error:', e.message);
  }
}
runUsers();