Jassif Team Institution

// Using let (can be changed)
let score = 10;
score = 20;
// Using const (cannot be reassigned)
const MAX_USERS = 100;

// Block scope with let
if (true) {
  let message = 'Hello';
  console.log(message); // Works here
}

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function (same as above)
const addArrow = (a, b) => a + b;

// Single parameter (no parentheses needed)
const double = num => num * 2;

// No parameters (parentheses needed)
const sayHello = () => 'Hello!';

// Using with array methods
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);

// Basic string interpolation
const name = 'Alice';
console.log(`Hello, ${name}!`);

// Multi-line string
const message = `
  This is a multi-line
  string in JavaScript.
`;
console.log(message);

// Simple expression
const price = 10;
const tax = 0.2;
console.log(`Total: $${price * (1 + tax)}`);

// Basic object destructuring
const user = { name: 'Alice', age: 30, location: 'New York' };
const { name, age } = user;
console.log(name, age);

// Basic array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
console.log(first, second, third);

// Skipping elements
const [primary, , tertiary] = colors;
console.log(primary, tertiary);

// Array spread - combining arrays
const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];
const combined = [...numbers, ...moreNumbers];
console.log(combined);

// Array spread - converting string to array of characters
const chars = [...'hello'];
console.log(chars);

// Rest parameter in functions
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5));

// Basic default parameter
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet());
console.log(greet('Kai'));

// Simple class with constructor and method
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I'm ${this.name}!`;
  }
}

// Create an instance
const person = new Person('Alice', 25);
console.log(person.greet()); // Hello, I'm Alice!

// Parent class
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a sound.`;
  }
}

// Child class
class Dog extends Animal {
  speak() {
    return `${this.name} barks!`;
  }
}

const dog = new Dog('Rex');
console.log(dog.speak());

// Class with private field (# prefix)
class Counter {
  #count = 0; // Private field

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount());
// console.log(counter.#count); // Error: Private field

// Creating a promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
     // Simulating an API call
     setTimeout(() => {
       const data = { id: 1, name: 'Product' };
       const success = true;

       if (success) {
         resolve(data); // Fulfilled with data
       } else {
         reject(new Error('Failed to fetch data')); // Rejected with error
       }
     }, 1000);
  });
};

// Using a promise
console.log('Fetching data...');

fetchData()
  .then(data => {
    console.log('Data received:', data);
    return data.id; // Return value is passed to the next .then()
  })
  .then(id => {
    console.log('Processing ID:', id);
  })
  .catch(error => {
    console.error('Error:', error.message);
  })
  .finally(() => {
    console.log('Operation completed (success or failure)');
  });

console.log('Continuing execution while fetch happens in background');

// Function that returns a promise
const fetchUser = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: `User ${id}` });
       } else {
        reject(new Error('Invalid user ID'));
       }
     }, 1000);
  });
};

// Using async/await
async function getUserData(id) {
  try {
    console.log('Fetching user...');
    const user = await fetchUser(id); // Waits for the promise to resolve
    console.log('User data:', user);

    // You can use the result directly
    return `${user.name}'s profile`;
  } catch (error) {
     // Handle errors with try/catch
     console.error('Error fetching user:', error.message);
     return 'Guest profile';
   }
}

// Async functions always return promises
console.log('Starting...');
getUserData(1)
  .then(result => console.log('Result:', result))
  .catch(error => console.error('Unexpected error:', error));
console.log('This runs before getUserData completes');

File: math.js

// Named exports
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// Default export
export default class Calculator {
  add(a, b) {
    return a + b;
  }

  subtract(a, b) {
    return a - b;
  }
}

File: app.js

// Import default export
import Calculator from './math.js';

// Import named exports
import { PI, add, multiply } from './math.js';

// Import with alias
import { add as mathAdd } from './math.js';

// Import all exports as a namespace
import * as MathUtils from './math.js';

const calc = new Calculator();
console.log(calc.subtract(10, 5)); // 5

console.log(add(2, 3)); // 5
console.log(mathAdd(4, 5)); // 9
console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.multiply(2, 3)); // 6

// Property shorthand
const name = 'Alice';
const age = 30;

// Instead of {name: name, age: age}
const person = { name, age };
console.log(person);

// Method shorthand
const calculator = {
  // Instead of add: function(a, b) { ... }
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};
console.log(calculator.add(5, 3));

function getUserCity(user) {
  return user?.address?.city;
}

const user1 = {
  name: 'Alice',
  address: { city: 'New York', country: 'USA' }
};

const user2 = {
  name: 'Bob'
};

const user3 = null;

console.log(getUserCity(user1)); // 'New York'
console.log(getUserCity(user2)); // undefined
console.log(getUserCity(user3)); // undefined

function calculatePrice(price, tax) {
  // Only uses default if tax is null or undefined
  return price + (tax ?? 0.1) * price;
}

console.log(calculatePrice(100, 0)); // 100 (correct! tax of 0 was used)
console.log(calculatePrice(100, null)); // 110 (using default)

// Helper function to simulate an API call
function fetchData(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve(`Data for ID ${id}`), 1000);
  });
}

// Sequential execution (~3 seconds total)
async function fetchSequential() {
  console.time('sequential');
  const data1 = await fetchData(1);
  const data2 = await fetchData(2);
  const data3 = await fetchData(3);
  console.timeEnd('sequential');
  return [data1, data2, data3];
}

// Run the sequential example
fetchSequential().then(results => {
  console.log('Sequential results:', results);
});

// Parallel execution (~1 second total)
async function fetchParallel() {
  console.time('parallel');
  const results = await Promise.all([
    fetchData(1),
    fetchData(2),
    fetchData(3)
  ]);
  console.timeEnd('parallel');
  return results;
}

// Run the parallel example
fetchParallel().then(results => {
  console.log('Parallel results:', results);
});