Variables, Data Types, and Operators

JavaScript is a versatile, high-level, interpreted programming language primarily known for making web pages interactive. Before diving into complex applications, it's crucial to understand its fundamental building blocks: variables, data types, and operators.

Variables: Storing Data

Variables are containers for storing data values. In JavaScript, you declare variables using `var`, `let`, or `const` keywords.

• `var`: Oldest way to declare variables. Function-scoped and can be re-declared and re-assigned. Prone to hoisting issues.
• `let`: Introduced in ES6. Block-scoped and can be re-assigned but not re-declared in the same scope. Preferred over `var` for mutable variables.
• `const`: Introduced in ES6. Block-scoped and cannot be re-assigned after initial declaration. Must be initialized. Preferred for values that should not change.

// Using var (older style)
var greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!
greeting = "Hi there!"; // Can be re-assigned
console.log(greeting); // Output: Hi there!

// Using let (modern, mutable)
let userName = "Alice";
console.log(userName); // Output: Alice
userName = "Bob"; // Can be re-assigned
console.log(userName); // Output: Bob

// Using const (modern, immutable reference)
const PI = 3.14159;
console.log(PI); // Output: 3.14159
// PI = 3.14; // This would cause an error: Assignment to constant variable.

const user = { name: "Charlie" };
user.name = "David"; // Object properties can be changed even if const
console.log(user.name); // Output: David
// user = { name: "Eve" }; // This would cause an error: Assignment to constant variable.

Data Types: Classifying Data

JavaScript has several built-in data types, broadly categorized into primitive and non-primitive types.

• Primitive Data Types (values are immutable):
  • `string`: Textual data (e.g., `"hello"`, `'JavaScript'`).
  • `number`: Both integers and floating-point numbers (e.g., `10`, `3.14`).
  • `boolean`: Logical values (`true` or `false`).
  • `null`: Represents the intentional absence of any object value.
  • `undefined`: Represents a variable that has been declared but not yet assigned a value.
  • `symbol` (ES6): Unique and immutable values, often used as object property keys.
  • `bigint` (ES2020): For numbers larger than `2^53 - 1`.
• Non-Primitive Data Type (values are mutable, stored by reference):
  • `object`: A collection of key-value pairs. Arrays and functions are also special types of objects.

let text = "Coding is fun"; // string
let age = 30;              // number
let isActive = true;       // boolean
let emptyValue = null;     // null
let notAssigned;           // undefined
let id = Symbol('id');     // symbol
let bigNum = 1234567890123456789012345678901234567890n; // bigint

let person = { name: "Frank", age: 25 }; // object
let colors = ["red", "green", "blue"]; // array (type of object)

console.log(typeof text);       // Output: string
console.log(typeof age);        // Output: number
console.log(typeof emptyValue); // Output: object (a historical quirk of JS)
console.log(typeof notAssigned); // Output: undefined

Operators: Performing Actions

Operators are symbols that perform operations on values and variables.

• Arithmetic Operators: `+`, `-`, `*`, `/`, `%` (modulus), `**` (exponentiation), `++` (increment), `--` (decrement).
• Assignment Operators: `=`, `+=`, `-=`, `*=`, `/=`, `%=`.
• Comparison Operators: `==` (loose equality, type coercion), `===` (strict equality, no type coercion), `!=`, `!==`, `>`, `<`, `>=`, `<=`.
• Logical Operators: `&&` (AND), `||` (OR), `!` (NOT).
• Ternary Operator: `condition ? exprIfTrue : exprIfFalse`. A shorthand for `if-else`.

let x = 10;
let y = 5;

// Arithmetic
console.log(x + y); // 15
console.log(x * y); // 50

// Assignment
x += 5; // x is now 15

// Comparison
console.log(x == 15);   // true
console.log(x === "15"); // false (strict equality checks type)
console.log(x > y);     // true

// Logical
let hasPermission = true;
let isAdmin = false;
console.log(hasPermission && !isAdmin); // true

// Ternary
let status = (age >= 18) ? "Adult" : "Minor";
console.log(status); // Output: Adult (if age is 30)

let num1 = 25;
let num2 = 7;

let sum = num1 + num2;
let isEven = (sum % 2 === 0);
let isGreaterThanFifty = (sum > 50);

console.log("Sum:", sum);
console.log("Is sum even?", isEven);
console.log("Is sum greater than 50?", isGreaterThanFifty);
console.log("Is sum even AND greater than 50?", isEven && isGreaterThanFifty);

Control Structures and Loops

Control structures dictate the flow of execution in your JavaScript code, allowing you to make decisions and execute different blocks of code based on conditions. Loops enable you to repeat a block of code multiple times, which is essential for iterating over collections of data or performing repetitive tasks.

Conditional Statements: Making Decisions

• `if`, `else if`, `else`: Executes a block of code if a specified condition is true. `else if` allows for multiple conditions, and `else` provides a fallback if none of the preceding conditions are met.
• `switch`: Provides a more concise way to handle multiple possible execution paths based on the value of a single expression.

let temperature = 25;

// if-else if-else
if (temperature > 30) {
  console.log("It's hot outside!");
} else if (temperature > 20) {
  console.log("It's warm.");
} else {
  console.log("It's cool.");
}

let day = "Wednesday";

// switch statement
switch (day) {
  case "Monday":
    console.log("Start of the week.");
    break;
  case "Friday":
    console.log("Almost weekend!");
    break;
  case "Sunday":
    console.log("Relax day.");
    break;
  default:
    console.log("Just another day.");
}

Loops: Repeating Code

Loops are fundamental for automation and working with collections of data.

• `for` loop: The most common loop, ideal when you know the number of iterations or need a counter.

  for (let i = 0; i < 5; i++) {
    console.log("Iteration number: " + i);
  }
  // Output: 0, 1, 2, 3, 4

• `while` loop: Repeats a block of code as long as a specified condition is true. Be careful to avoid infinite loops.

  let count = 0;
  while (count < 3) {
    console.log("Count is: " + count);
    count++;
  }
  // Output: 0, 1, 2

• `do...while` loop: Similar to `while`, but guarantees that the block of code is executed at least once, as the condition is checked after the first iteration.

  let i = 0;
  do {
    console.log("Do-while count: " + i);
    i++;
  } while (i < 0); // Condition is false, but runs once
  // Output: Do-while count: 0

• `for...in` loop: Iterates over the enumerable properties of an object.

  const car = { brand: "Toyota", model: "Camry" };
  for (let key in car) {
    console.log(`${key}: ${car[key]}`);
  }
  // Output: brand: Toyota, model: Camry

• `for...of` loop: Introduced in ES6, iterates over iterable objects (like arrays, strings, Map, Set, etc.).

  const fruits = ["apple", "banana", "cherry"];
  for (let fruit of fruits) {
    console.log(fruit);
  }
  // Output: apple, banana, cherry

`break` and `continue` Statements:

• `break`: Terminates the current loop (or `switch` statement) and transfers control to the statement immediately following the terminated loop.
• `continue`: Terminates execution of the statements in the current iteration of the current loop, and continues execution of the loop with the next iteration.

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // Skip 3
  }
  if (i === 7) {
    break; // Exit loop at 7
  }
  console.log(i);
}
// Output: 0, 1, 2, 4, 5, 6

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("Even numbers:");
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    console.log(numbers[i]);
  }
}
// Expected Output: 2, 4, 6, 8, 10

Functions and Scope

Functions are the core building blocks of JavaScript applications. They allow you to encapsulate reusable blocks of code, making your programs modular, organized, and easier to maintain. Understanding scope is crucial for knowing where variables and functions are accessible within your code.

Functions: Reusable Code Blocks

A function is a block of code designed to perform a particular task. It is executed when "something" invokes it (calls it).

• Function Declaration: The traditional way to define a function. Hoisted to the top of their scope, meaning you can call them before they are declared in the code.

  function greet(name) {
    return "Hello, " + name + "!";
  }
  console.log(greet("Alice")); // Output: Hello, Alice!

• Function Expression: Defines a function as part of an expression, often assigned to a variable. Not hoisted.

  const sayGoodbye = function(name) {
    console.log("Goodbye, " + name + "!");
  };
  sayGoodbye("Bob"); // Output: Goodbye, Bob!

• Parameters and Arguments:
  • Parameters: Named variables listed in the function definition (e.g., `name` in `greet(name)`).
  • Arguments: The actual values passed to the function when it is called (e.g., `"Alice"` in `greet("Alice")`).
• Default Parameters (ES6): Allows parameters to be initialized with a default value if no value or `undefined` is passed.

  function multiply(a, b = 2) {
    return a * b;
  }
  console.log(multiply(5));    // Output: 10 (5 * 2)
  console.log(multiply(5, 3)); // Output: 15 (5 * 3)

• Return Values: The `return` statement specifies the value that the function sends back to the caller. If no `return` statement is used, the function implicitly returns `undefined`.

Scope: Variable Accessibility

Scope determines the accessibility (visibility) of variables and other resources in your code. JavaScript has different types of scope:

• Global Scope: Variables declared outside of any function or block. Accessible from anywhere in your code. Avoid polluting the global scope.

  let globalVar = "I'm global";
  function accessGlobal() {
    console.log(globalVar); // Accessible here
  }
  accessGlobal(); // Output: I'm global

• Function Scope: Variables declared with `var` inside a function are only accessible within that function.

  function demonstrateVarScope() {
    var functionVar = "I'm function-scoped";
    console.log(functionVar);
  }
  demonstrateVarScope(); // Output: I'm function-scoped
  // console.log(functionVar); // Error: functionVar is not defined

• Block Scope (ES6: `let` and `const`): Variables declared with `let` or `const` inside a block (e.g., `if` statements, `for` loops, `{}` curly braces) are only accessible within that block.

  if (true) {
    let blockVar = "I'm block-scoped";
    const anotherBlockVar = "Me too!";
    console.log(blockVar); // Accessible here
    console.log(anotherBlockVar); // Accessible here
  }
  // console.log(blockVar); // Error: blockVar is not defined

Understanding scope is critical for preventing naming conflicts and for writing predictable, bug-free code. Block scope with `let` and `const` is a significant improvement in modern JavaScript, reducing common issues associated with `var`'s function scope.

function addNumbers(a, b) {
  let result = a + b; // 'result' is function-scoped
  console.log("Inside function, result is:", result);
  return result;
}

let sumResult = addNumbers(10, 20);
console.log("Outside function, sumResult is:", sumResult);

// console.log(result); // This line would cause an error because 'result' is not accessible here.

Objects and Arrays

Objects and Arrays are fundamental data structures in JavaScript, allowing you to store and organize complex collections of data. They are both non-primitive data types, meaning they are stored by reference rather than by value.

Objects: Collections of Key-Value Pairs

An object is a collection of properties, where each property has a name (or key) and a value. Objects are used to represent real-world entities or complex data structures.

• Object Literal: The most common way to create an object.

  const person = {
    name: "John Doe",
    age: 30,
    isStudent: false,
    hobbies: ["reading", "hiking"],
    address: {
      street: "123 Main St",
      city: "Anytown"
    },
    greet: function() { // Method
      console.log("Hello, my name is " + this.name);
    }
  };

• Accessing Properties:
  • Dot Notation: Preferred when the property name is a valid JavaScript identifier and known beforehand.

    console.log(person.name);       // Output: John Doe
    console.log(person.address.city); // Output: Anytown

  • Bracket Notation: Used when property names contain special characters, spaces, or when the property name is dynamic (stored in a variable).

    console.log(person["age"]); // Output: 30
    let prop = "isStudent";
    console.log(person[prop]);  // Output: false

• Adding/Modifying Properties:

  person.email = "john@example.com"; // Add new property
  person.age = 31; // Modify existing property
  console.log(person);

• Deleting Properties:

  delete person.isStudent;
  console.log(person);

• Methods: Functions stored as object properties.

  person.greet(); // Output: Hello, my name is John Doe

Arrays: Ordered Collections

An array is an ordered list of values. Arrays are zero-indexed, meaning the first element is at index 0.

• Array Literal: The most common way to create an array.

  const fruits = ["apple", "banana", "cherry"];
  const mixedData = [1, "hello", true, { id: 1 }];

• Accessing Elements: Use bracket notation with the index.

  console.log(fruits[0]); // Output: apple
  console.log(fruits[2]); // Output: cherry

• Common Array Methods:
  • `push()`: Adds one or more elements to the end.
  • `pop()`: Removes the last element.
  • `shift()`: Removes the first element.
  • `unshift()`: Adds one or more elements to the beginning.
  • `splice()`: Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
  • `slice()`: Returns a shallow copy of a portion of an array into a new array.
  • `forEach()`: Executes a provided function once for each array element.
  • `map()`: Creates a new array populated with the results of calling a provided function on every element in the calling array.
  • `filter()`: Creates a new array with all elements that pass the test implemented by the provided function.
  • `reduce()`: Executes a reducer function on each element of the array, resulting in a single output value.

  const numbers = [1, 2, 3, 4, 5];
  numbers.push(6); // [1, 2, 3, 4, 5, 6]
  const last = numbers.pop(); // 6, numbers is now [1, 2, 3, 4, 5]
  
  const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
  const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
  const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

JSON (JavaScript Object Notation):

JSON is a lightweight data-interchange format. It's often used when data is sent from a server to a web page. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including JavaScript.

• `JSON.stringify()`: Converts a JavaScript object or value to a JSON string.
• `JSON.parse()`: Parses a JSON string, constructing the JavaScript value or object described by the string.

const myObject = { name: "Alice", age: 28 };
const jsonString = JSON.stringify(myObject);
console.log(jsonString); // Output: {"name":"Alice","age":28}

const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // Output: Alice

const shoppingCart = [
  { name: "Laptop", price: 1200, quantity: 1 },
  { name: "Mouse", price: 25, quantity: 2 }
];

// Add a new item
shoppingCart.push({ name: "Keyboard", price: 75, quantity: 1 });
console.log("Cart after adding keyboard:", shoppingCart);

// Remove the mouse
const mouseIndex = shoppingCart.findIndex(item => item.name === "Mouse");
if (mouseIndex !== -1) {
  shoppingCart.splice(mouseIndex, 1);
}
console.log("Cart after removing mouse:", shoppingCart);

// Calculate total price
const totalPrice = shoppingCart.reduce((total, item) => total + (item.price * item.quantity), 0);
console.log("Total price of items in cart:", totalPrice);

Error Handling and Debugging

In programming, errors are inevitable. Understanding how to anticipate, handle, and debug errors is a crucial skill for any JavaScript developer. Proper error handling makes your applications more robust, user-friendly, and prevents unexpected crashes. Debugging helps you identify and fix issues in your code.

Types of Errors in JavaScript:

• Syntax Errors: Occur when you violate JavaScript's grammar rules. These are usually caught by the browser/interpreter before execution. (e.g., missing a parenthesis, misspelled keyword).
• Runtime Errors (Exceptions): Occur during the execution of the script. These are often caused by invalid operations (e.g., trying to access a property of `null`, dividing by zero). If not handled, they will stop script execution.
• Logical Errors: The hardest to find. The code runs without crashing, but it produces incorrect results because of flaws in the program's logic.

Error Handling with `try...catch...finally`:

The `try...catch...finally` statement allows you to test a block of code for errors, handle them gracefully, and execute code regardless of whether an error occurred.

• `try` block: Contains the code that might throw an error.
• `catch` block: Contains the code to be executed if an error occurs in the `try` block. It receives an `error` object as an argument, which contains details about the error.
• `finally` block: Contains code that will always be executed, regardless of whether an error occurred or was caught. It's often used for cleanup operations.

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("Division by zero is not allowed."); // Custom error
    }
    return a / b;
  } catch (error) {
    console.error("An error occurred:", error.message);
    return null; // Return a safe value
  } finally {
    console.log("Division attempt finished.");
  }
}

console.log(divide(10, 2)); // Output: 5, Division attempt finished.
console.log(divide(10, 0)); // Output: An error occurred: Division by zero is not allowed., Division attempt finished., null

The `throw` Statement:

The `throw` statement allows you to create custom errors. When `throw` is executed, the normal flow of the script is interrupted, and control is passed to the nearest `catch` block.

function validateAge(age) {
  if (age < 0 || age > 120) {
    throw new Error("Invalid age provided.");
  }
  console.log("Age is valid.");
}

try {
  validateAge(150);
} catch (e) {
  console.error("Validation error:", e.message); // Output: Validation error: Invalid age provided.
}

Debugging Tools and Techniques:

Debugging is the process of finding and fixing bugs or errors in your code. Modern browsers come with powerful developer tools that make debugging much easier.

• `console.log()`: The simplest and most common debugging tool. Use it to print values of variables, messages, or the flow of execution to the browser's console.
  • `console.warn()`: For warnings.
  • `console.error()`: For errors.
  • `console.table()`: For displaying tabular data.
• Browser Developer Tools:
  • Elements Tab: Inspect and modify HTML and CSS.
  • Console Tab: View `console.log` messages, errors, and execute JavaScript commands.
  • Sources Tab: The primary tab for debugging JavaScript.
    • Breakpoints: Pause code execution at specific lines.
    • Step Over/Into/Out: Control the flow of execution line by line.
    • Watch Expressions: Monitor the values of variables as code executes.
    • Call Stack: See the sequence of function calls that led to the current point.
• `debugger` statement: Inserts a breakpoint directly in your code. When the browser's developer tools are open, execution will pause at this line.

  function calculateTotal(price, quantity) {
    let total = price * quantity;
    debugger; // Execution will pause here if DevTools are open
    return total;
  }
  console.log(calculateTotal(20, 3));

Mastering error handling and debugging is essential for writing reliable and maintainable JavaScript applications. It transforms the frustrating experience of encountering bugs into a systematic problem-solving process.

function calculateDiscountedPrice(originalPrice, discountPercentage) {
  if (discountPercentage < 0 || discountPercentage > 100) {
    console.error("Discount percentage must be between 0 and 100.");
    return originalPrice;
  }

  // Bug: Let's assume we initially wrote `originalPrice + (originalPrice * discountPercentage / 100)`
  // Corrected line:
  let discountedPrice = originalPrice - (originalPrice * discountPercentage / 100);

  debugger; // Set a breakpoint here and inspect 'discountedPrice' in DevTools

  console.log("Original Price:", originalPrice);
  console.log("Discount Percentage:", discountPercentage + "%");
  console.log("Discounted Price:", discountedPrice);

  return discountedPrice;
}

calculateDiscountedPrice(100, 10); // Should be 90
calculateDiscountedPrice(200, 25); // Should be 150

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the page structure as a tree of objects, where each object corresponds to a part of the document (like an element, attribute, or text). JavaScript interacts with this tree to dynamically change the content, structure, and style of a web page, making it interactive.

What is the DOM?

When a web browser loads an HTML page, it creates a DOM representation of that page. Think of the DOM as a hierarchical, tree-like structure where every HTML element, attribute, and piece of text is a "node."

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="main-title">Welcome</h1>
    <p>Hello <strong>World</strong>!</p>
  </body>
</html>

This HTML would be represented in the DOM as a tree, with `document` at the root, then `html`, `head`, `body`, and so on, down to the individual text nodes. Each node is an object with properties and methods that JavaScript can access and manipulate.

Browser as a DOM Parser:

The browser's rendering engine parses the HTML code and constructs the DOM tree. This tree is then used by the browser to render the visual representation of the web page. JavaScript runs in the browser's JavaScript engine and uses the DOM API to interact with this tree.

Nodes: Element, Text, Attribute:

The DOM is composed of different types of nodes:

• Element Nodes: Represent HTML tags (e.g., `<div>`, `<p>`, `<img>`). These are the most common nodes you'll interact with.
• Text Nodes: Represent the actual text content within elements.
• Attribute Nodes: Represent attributes of HTML elements (e.g., `id`, `class`, `src`).
• Document Node: The root of the DOM tree, represented by the `document` object in JavaScript.

Accessing the DOM: The `document` Object

The `document` object is your entry point to the DOM. It represents the entire HTML document and provides methods to access, create, and modify elements.

console.log(document); // Logs the entire document object
console.log(document.documentElement); // Logs the <html> element
console.log(document.body); // Logs the <body> element
console.log(document.title); // Logs the content of the <title> tag

Understanding the DOM is fundamental to front-end web development, as it's the bridge between your JavaScript code and the visual presentation of your web page. All dynamic changes you see on modern websites (e.g., content loading, animations, form interactions) are made possible through DOM manipulation.

// Open your browser's console (F12 or right-click -> Inspect, then Console tab)
// Type these commands directly into the console:

console.log(document.URL); // Get the current page's URL
console.log(document.head); // Get the <head> element
console.log(document.body.children); // Get a collection of direct children of the body

// You can also try:
// document.body.style.backgroundColor = 'lightblue'; // This will change the background color of this page!

Selecting and Modifying Elements

Once you understand the DOM structure, the next crucial step is learning how to select specific elements on the page and then modify their content, attributes, or styles. JavaScript provides several methods for selecting elements, ranging from specific IDs to more general CSS-like selectors.

Selecting Elements:

• `document.getElementById(id)`: Selects a single element by its unique `id` attribute. Returns `null` if no element with that ID is found.

  const myDiv = document.getElementById('myDiv');
  console.log(myDiv);

• `document.getElementsByClassName(name)`: Selects all elements with a specific class name. Returns an HTMLCollection (live collection, similar to an array).

  const paragraphs = document.getElementsByClassName('my-paragraph');
  console.log(paragraphs); // Access with index: paragraphs[0]

• `document.getElementsByTagName(name)`: Selects all elements with a specific tag name (e.g., `'p'`, `'div'`, `'a'`). Returns an HTMLCollection.

  const allLinks = document.getElementsByTagName('a');
  console.log(allLinks);

• `document.querySelector(selector)`: The most versatile selector. Selects the *first* element that matches a specified CSS selector (e.g., `'.my-class'`, `'#my-id'`, `'div p'`).

  const firstParagraph = document.querySelector('p');
  const specificElement = document.querySelector('#header .logo');

• `document.querySelectorAll(selector)`: Selects *all* elements that match a specified CSS selector. Returns a NodeList (static collection, can be converted to array).

  const allButtons = document.querySelectorAll('button');
  const listItems = document.querySelectorAll('ul li');

Modifying Content:

• `element.textContent`: Gets or sets the text content of an element, including text of its descendants, but without any HTML tags. Safer for user-generated content as it prevents XSS attacks.

  const title = document.getElementById('main-title');
  title.textContent = "New Page Title"; // Changes the text
  console.log(title.textContent);

• `element.innerHTML`: Gets or sets the HTML content (including tags) of an element. Use with caution, as it can introduce security vulnerabilities if used with untrusted input.

  const contentDiv = document.getElementById('content-area');
  contentDiv.innerHTML = "<h2>Hello from JavaScript!</h2><p>This is new <strong>HTML</strong>.</p>";
  

Modifying Attributes:

• `element.setAttribute(name, value)`: Sets the value of an attribute on the specified element.

  const myImage = document.getElementById('myImage');
  myImage.setAttribute('src', 'new-image.jpg');
  myImage.setAttribute('alt', 'A new descriptive image');

• `element.getAttribute(name)`: Returns the value of a specified attribute.
• `element.removeAttribute(name)`: Removes a specified attribute.

Modifying Styles:

• `element.style.propertyName`: Directly sets inline styles. Property names are camelCased (e.g., `backgroundColor` for `background-color`).

  const myButton = document.querySelector('.submit-btn');
  myButton.style.backgroundColor = 'var(--accent-teal)';
  myButton.style.color = 'white';
  myButton.style.fontSize = '1.2rem';

• `element.classList`: A more robust way to manage styles by adding, removing, or toggling CSS classes. This is generally preferred over direct `style` manipulation for better separation of concerns.
  • `element.classList.add('class-name')`
  • `element.classList.remove('class-name')`
  • `element.classList.toggle('class-name')`
  • `element.classList.contains('class-name')`

  const messageBox = document.getElementById('messageBox');
  messageBox.classList.add('active'); // Add a class
  messageBox.classList.remove('hidden'); // Remove a class
  if (messageBox.classList.contains('error')) {
    console.log("Error message is active.");
  }

<h1 id="dynamic-greeting" style="padding: 10px; border-radius: 5px;">Initial Greeting</h1>

document.addEventListener('DOMContentLoaded', () => {
  const greetingElement = document.getElementById('dynamic-greeting');

  if (greetingElement) {
    greetingElement.textContent = "Hello, JavaScript World!";
    greetingElement.style.backgroundColor = '#667eea'; // Using a color from your theme
    greetingElement.style.color = 'white';
    greetingElement.style.textAlign = 'center';
  }
});

Event Handling and Listeners

Event handling is how JavaScript makes web pages interactive. An "event" is something that happens on the web page that the browser can detect (e.g., a user clicking a button, hovering over an image, typing in an input field, or the page finishing loading). Event listeners are functions that "listen" for specific events and execute a block of code when that event occurs.

What are Events?

Events are notifications that something interesting has occurred. They are part of the browser's environment, not directly part of the HTML or JavaScript language itself. Common events include:

• Mouse Events: `click`, `dblclick`, `mouseover`, `mouseout`, `mousemove`, `mousedown`, `mouseup`.
• Keyboard Events: `keydown`, `keyup`, `keypress`.
• Form Events: `submit`, `focus`, `blur`, `change`, `input`.
• Document/Window Events: `load`, `DOMContentLoaded`, `resize`, `scroll`.

`addEventListener()` and `removeEventListener()`:

The most modern and recommended way to handle events is using `addEventListener()`. It allows you to attach multiple event handlers to a single element for the same event type without overwriting previous handlers.

// Syntax: element.addEventListener(event, function, useCapture);

const myButton = document.getElementById('myButton');

// 1. Add an event listener for a 'click' event
myButton.addEventListener('click', function() {
  alert('Button clicked!');
});

// 2. You can also use an arrow function
myButton.addEventListener('mouseover', () => {
  console.log('Mouse is over the button!');
});

// 3. To remove an event listener, you need a reference to the function
function handleButtonClick() {
  console.log('Button clicked via named function!');
}
myButton.addEventListener('click', handleButtonClick);

// Later, to remove it:
// myButton.removeEventListener('click', handleButtonClick);

• `event`: A string representing the event type (e.g., `'click'`, `'submit'`).
• `function`: The function to be executed when the event occurs. This function is often called the "event handler" or "callback function."
• `useCapture` (optional): A boolean indicating whether to use event capturing (`true`) or event bubbling (`false`, default). Event bubbling is more common.

The Event Object (`e` or `event`):

When an event occurs, the browser creates an `Event` object and passes it as the first argument to your event handler function. This object contains useful information about the event that occurred.

document.addEventListener('click', (event) => {
  console.log('Event type:', event.type);      // 'click'
  console.log('Target element:', event.target); // The element that was clicked
  console.log('Mouse X position:', event.clientX);
  console.log('Keyboard key pressed (if keydown):', event.key);
});

Preventing Default Behavior and Stopping Propagation:

• `event.preventDefault()`: Stops the browser's default action for a given event. Common uses:
  • Preventing a form from submitting and reloading the page.
  • Preventing a link from navigating to a new URL.
  • Preventing a checkbox from being checked.

  const myForm = document.getElementById('myForm');
  myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Stop the form from submitting
    console.log('Form submission prevented!');
    // Perform custom validation or AJAX submission here
  });

• `event.stopPropagation()`: Prevents the event from "bubbling up" (or down during capturing) to parent elements.

  // HTML: <div id="parent"><button id="childButton">Click Me</button></div>
  const parentDiv = document.getElementById('parent');
  const childButton = document.getElementById('childButton');
  
  parentDiv.addEventListener('click', () => {
    console.log('Parent div clicked!');
  });
  
  childButton.addEventListener('click', (event) => {
    event.stopPropagation(); // Stop click from reaching parentDiv
    console.log('Child button clicked!');
  });

<p>Count: <span id="counter-display">0</span></p>
<button id="increment-button">Increment</button>

document.addEventListener('DOMContentLoaded', () => {
  const counterDisplay = document.getElementById('counter-display');
  const incrementButton = document.getElementById('increment-button');
  let count = 0;

  incrementButton.addEventListener('click', () => {
    count++;
    counterDisplay.textContent = count;
    console.log("Current count:", count);
  });
});

Form Validation and Interaction

While HTML5 provides basic client-side form validation (e.g., `required`, `type="email"`, `pattern`), JavaScript allows for more complex, dynamic, and user-friendly validation. It enables real-time feedback, custom error messages, and conditional logic based on user input, greatly enhancing the user experience. Remember, client-side validation is for convenience; server-side validation is always essential for security.

Accessing Form Input Values:

To perform validation or interact with form data, you first need to access the values entered by the user.

<input type="text" id="username-input" value="defaultUser">
<input type="checkbox" id="agree-checkbox" checked>
<select id="country-select"><option value="usa">USA</option><option value="can">Canada</option></select>

<script>
  const usernameInput = document.getElementById('username-input');
  const agreeCheckbox = document.getElementById('agree-checkbox');
  const countrySelect = document.getElementById('country-select');

  console.log(usernameInput.value);      // Gets text input value
  console.log(agreeCheckbox.checked);    // Gets boolean for checkbox
  console.log(countrySelect.value);      // Gets selected option's value
</script>

Basic Client-Side Validation with JavaScript:

You can listen for the form's `submit` event and prevent its default behavior to implement custom validation.

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span id="email-error" style="color: red;"></span><br>

  <label for="password">Password:</label>
  <input type="password" id="password" required minlength="6">
  <span id="password-error" style="color: red;"></span><br>

  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent default form submission

    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('email-error');
    const passwordError = document.getElementById('password-error');

    let isValid = true;

    // Email validation
    if (!emailInput.value.includes('@') || !emailInput.value.includes('.')) {
      emailError.textContent = 'Please enter a valid email address.';
      isValid = false;
    } else {
      emailError.textContent = '';
    }

    // Password validation
    if (passwordInput.value.length < 6) {
      passwordError.textContent = 'Password must be at least 6 characters long.';
      isValid = false;
    } else {
      passwordError.textContent = '';
    }

    if (isValid) {
      alert('Form submitted successfully!');
      // In a real application, you would send data to server via Fetch/AJAX here
      this.submit(); // You can submit the form programmatically if validation passes
    }
  });
</script>

Interacting with Form Elements:

• Checkboxes and Radio Buttons: Use the `.checked` property to get/set their state.

  const newsletterCheckbox = document.getElementById('newsletter-signup');
  if (newsletterCheckbox.checked) {
    console.log("User wants to subscribe to newsletter.");
  }
  newsletterCheckbox.checked = false; // Uncheck it

• Select Dropdowns: Use the `.value` property to get the value of the selected option.

  const selectedOption = document.getElementById('product-category').value;
  console.log("Selected category:", selectedOption);

• Textareas: Use the `.value` property.

  const messageTextarea = document.getElementById('user-message');
  console.log("User message:", messageTextarea.value);

Showing/Hiding Validation Messages:

Instead of `alert()`, it's better to display error messages directly on the page next to the offending input field. You can use `textContent` to set the message and CSS to style it (e.g., red text).

<label for="live-password">Password:</label>
<input type="password" id="live-password">
<p id="password-strength" style="font-size: 0.9em; margin-top: 5px;"></p>

document.addEventListener('DOMContentLoaded', () => {
  const passwordInput = document.getElementById('live-password');
  const strengthDisplay = document.getElementById('password-strength');

  passwordInput.addEventListener('input', () => {
    const password = passwordInput.value;
    if (password.length === 0) {
      strengthDisplay.textContent = '';
      strengthDisplay.style.color = 'var(--text-secondary)';
    } else if (password.length < 6) {
      strengthDisplay.textContent = 'Password is too short (min 6 characters)';
      strengthDisplay.style.color = 'var(--error-color)';
    } else {
      strengthDisplay.textContent = 'Password strength: Strong!';
      strengthDisplay.style.color = 'var(--success-color)';
    }
  });
});

Dynamic Content Creation

One of the most powerful capabilities of JavaScript and the DOM is the ability to create, append, and remove HTML elements dynamically. This allows you to build highly interactive web applications that respond to user actions or data fetched from a server, without needing to reload the entire page.

Creating New Elements: `document.createElement()`

The `document.createElement()` method creates a new HTML element node with the specified tag name. The element is created in memory but is not yet part of the document.

const newDiv = document.createElement('div');
const newParagraph = document.createElement('p');
const newImage = document.createElement('img');

console.log(newDiv); // Output: <div></div> (in memory)

Appending Elements: `appendChild()`, `prepend()`, `insertBefore()`

Once an element is created, you need to append it to an existing element in the DOM to make it visible on the page.

• `parentElement.appendChild(childElement)`: Appends a node as the last child of a specified parent node.

  const container = document.getElementById('container');
  const newListItem = document.createElement('li');
  newListItem.textContent = "New Item";
  container.appendChild(newListItem); // Adds <li> as the last child of #container

• `parentElement.prepend(childElement)`: (ES6+) Inserts a node as the first child of a specified parent node.

  const container = document.getElementById('container');
  const firstItem = document.createElement('li');
  firstItem.textContent = "First Item";
  container.prepend(firstItem); // Adds <li> as the first child of #container

• `parentElement.insertBefore(newNode, referenceNode)`: Inserts a node as a child of a parent node, before a specified reference node.

  const list = document.getElementById('myList'); // Assume <ul id="myList"><li>Item 1</li></ul>
  const firstExistingItem = list.querySelector('li');
  const newItem = document.createElement('li');
  newItem.textContent = "Inserted Item";
  list.insertBefore(newItem, firstExistingItem); // Inserts newItem before Item 1

Removing Elements: `removeChild()`

To remove an element from the DOM, you call `removeChild()` on its parent element, passing the child element as an argument.

const parent = document.getElementById('parent-container');
const childToRemove = document.getElementById('child-element');
if (parent && childToRemove) {
  parent.removeChild(childToRemove);
}

Alternatively, a simpler method (though not supported in very old browsers) is `element.remove()`:

const childToRemove = document.getElementById('child-element');
if (childToRemove) {
  childToRemove.remove(); // Removes the element itself
}

Cloning Elements: `cloneNode()`

The `cloneNode()` method creates a copy of a node. It takes a boolean argument: `true` for a deep clone (clones the element and all its descendants), `false` for a shallow clone (clones only the element itself, not its children).

const originalDiv = document.getElementById('original-div');
const clonedDiv = originalDiv.cloneNode(true); // Deep clone
clonedDiv.id = 'cloned-div'; // Change ID to avoid duplicates
document.body.appendChild(clonedDiv);

<h2>My To-Do List</h2>
<input type="text" id="todo-input" placeholder="Add a new task">
<button id="add-todo-button">Add Task</button>
<ul id="todo-list" style="margin-top: 15px;"></ul>

document.addEventListener('DOMContentLoaded', () => {
  const todoInput = document.getElementById('todo-input');
  const addTodoButton = document.getElementById('add-todo-button');
  const todoList = document.getElementById('todo-list');

  addTodoButton.addEventListener('click', () => {
    const taskText = todoInput.value.trim(); // .trim() removes leading/trailing whitespace

    if (taskText !== "") {
      const newListItem = document.createElement('li');
      newListItem.textContent = taskText;
      todoList.appendChild(newListItem);
      todoInput.value = ''; // Clear the input field
    } else {
      alert("Please enter a task!");
    }
  });
});

Arrow Functions and Template Literals

ECMAScript 2015 (ES6) introduced significant enhancements to JavaScript, making the language more powerful, concise, and easier to work with. Among the most popular features are Arrow Functions and Template Literals, which streamline common coding patterns.

Arrow Functions (`=>`): Concise Function Syntax

Arrow functions provide a shorter syntax for writing function expressions. They are particularly useful for anonymous functions and callbacks. Beyond syntax, they have a different approach to `this` binding, which is a common source of confusion in traditional functions.

• Concise Syntax:

  // Traditional function expression
  const addTraditional = function(a, b) {
    return a + b;
  };
  console.log(addTraditional(2, 3)); // Output: 5
  
  // Arrow function with explicit return
  const addArrowExplicit = (a, b) => {
    return a + b;
  };
  console.log(addArrowExplicit(2, 3)); // Output: 5
  
  // Arrow function with implicit return (for single-expression bodies)
  const addArrowImplicit = (a, b) => a + b;
  console.log(addArrowImplicit(2, 3)); // Output: 5
  
  // Single parameter, no parentheses needed
  const square = num => num * num;
  console.log(square(4)); // Output: 16
  
  // No parameters, empty parentheses required
  const greet = () => "Hello!";
  console.log(greet()); // Output: Hello!

• `this` Binding:

  This is a key difference. Arrow functions do not have their own `this` context. Instead, they inherit `this` from the surrounding (lexical) scope at the time they are defined. This solves a common problem in older JavaScript where `this` could behave unexpectedly inside callbacks.

  function Person(name) {
    this.name = name;
    this.sayHelloTraditional = function() {
      setTimeout(function() {
        // 'this' here refers to the global object (window in browsers) or undefined in strict mode
        console.log('Traditional:', this.name); // Output: Traditional: undefined
      }, 100);
    };
    this.sayHelloArrow = function() {
      setTimeout(() => {
        // 'this' here correctly refers to the Person instance
        console.log('Arrow:', this.name); // Output: Arrow: Alice
      }, 100);
    };
  }
  
  const alice = new Person("Alice");
  alice.sayHelloTraditional();
  alice.sayHelloArrow();

Template Literals (Backticks `` ` ``): Enhanced String Handling

Template literals provide a more flexible and powerful way to work with strings compared to traditional single or double quotes. They are enclosed by backticks (`` ` ``).

• String Interpolation: Embed expressions directly within string literals using `${expression}`. This eliminates the need for string concatenation (`+`).

  const name = "Bob";
  const age = 25;
  
  // Traditional concatenation
  const messageOld = "My name is " + name + " and I am " + age + " years old.";
  console.log(messageOld);
  
  // Using template literals
  const messageNew = `My name is ${name} and I am ${age} years old.`;
  console.log(messageNew);

• Multi-line Strings: Template literals can span multiple lines without needing special escape characters (`\n`).

  // Traditional multi-line (requires \n)
  const multiLineOld = "Line 1\nLine 2\nLine 3";
  console.log(multiLineOld);
  
  // Using template literals
  const multiLineNew = `Line 1
  Line 2
  Line 3`;
  console.log(multiLineNew);

const userProfile = {
  firstName: "Jane",
  lastName: "Doe",
  email: "jane.doe@example.com",
  membership: "Premium"
};

const getGreeting = (user) => `Welcome back, ${user.firstName}!`;

const profileSummary = (user) => `
  --- User Profile ---
  Name: ${user.firstName} ${user.lastName}
  Email: ${user.email}
  Membership: ${user.membership}
  --------------------
`;

console.log(getGreeting(userProfile));
console.log(profileSummary(userProfile));

Destructuring and Spread Operator

Destructuring assignment and the Spread/Rest Operator (`...`) are powerful ES6 features that simplify working with arrays and objects, making your code more readable and concise. They are commonly used in modern JavaScript development, especially with frameworks like React.

Destructuring Assignment: Extracting Values

Destructuring allows you to "unpack" values from arrays or properties from objects into distinct variables.

• Array Destructuring:

  Extracts values from arrays based on their position.

  const colors = ["red", "green", "blue"];
  
  // Old way
  // const firstColor = colors[0];
  // const secondColor = colors[1];
  
  // New way: Array Destructuring
  const [firstColor, secondColor, thirdColor] = colors;
  console.log(firstColor);  // Output: red
  console.log(secondColor); // Output: green
  
  // Skipping elements
  const [,, lastColor] = colors;
  console.log(lastColor); // Output: blue
  
  // Swapping variables (no temp variable needed!)
  let a = 10;
  let b = 20;
  [a, b] = [b, a];
  console.log(a, b); // Output: 20 10

• Object Destructuring:

  Extracts properties from objects based on their property names.

  const person = {
    name: "Alice",
    age: 30,
    city: "New York"
  };
  
  // Old way
  // const personName = person.name;
  // const personAge = person.age;
  
  // New way: Object Destructuring
  const { name, age } = person;
  console.log(name); // Output: Alice
  console.log(age);  // Output: 30
  
  // Renaming properties during destructuring
  const { name: fullName, city: homeCity } = person;
  console.log(fullName); // Output: Alice
  console.log(homeCity); // Output: New York
  
  // Default values
  const { country = "USA" } = person; // 'country' doesn't exist in person
  console.log(country); // Output: USA

Spread Operator (`...`): Expanding Iterables

The spread operator (`...`) allows an iterable (like an array or string) or an object to be expanded into individual elements or key-value pairs.

• Copying Arrays: Creates a shallow copy of an array.

  const originalArray = [1, 2, 3];
  const copiedArray = [...originalArray];
  console.log(copiedArray); // Output: [1, 2, 3]
  console.log(originalArray === copiedArray); // Output: false (different references)

• Merging Arrays: Combines multiple arrays into a new one.

  const arr1 = [1, 2];
  const arr2 = [3, 4];
  const combinedArray = [...arr1, ...arr2];
  console.log(combinedArray); // Output: [1, 2, 3, 4]

• Expanding Function Arguments: Pass elements of an array as individual arguments to a function.

  function sum(a, b, c) {
    return a + b + c;
  }
  const numbers = [1, 2, 3];
  console.log(sum(...numbers)); // Output: 6

• Copying Objects: Creates a shallow copy of an object.

  const originalObject = { a: 1, b: 2 };
  const copiedObject = { ...originalObject };
  console.log(copiedObject); // Output: { a: 1, b: 2 }

• Merging Objects: Combines properties from multiple objects into a new one. If keys conflict, the last one wins.

  const obj1 = { a: 1, b: 2 };
  const obj2 = { c: 3, b: 4 }; // 'b' conflicts
  const combinedObject = { ...obj1, ...obj2 };
  console.log(combinedObject); // Output: { a: 1, b: 4, c: 3 }

Rest Parameters (`...`): Collecting Arguments

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. It collects the remaining arguments into an array.

function sumAll(...numbers) { // 'numbers' is an array
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sumAll(1, 2, 3));      // Output: 6
console.log(sumAll(10, 20, 30, 40)); // Output: 100

function greet(firstName, ...otherNames) {
  console.log(`Hello ${firstName}!`);
  if (otherNames.length > 0) {
    console.log(`Also greeting: ${otherNames.join(', ')}`);
  }
}
greet("Alice", "Bob", "Charlie");
// Output: Hello Alice!
//         Also greeting: Bob, Charlie

const userNames = ["Alice", "Bob", "Charlie", "David"];
const userDetails = {
  id: 101,
  email: "alice@example.com",
  status: "active"
};

// Destructure first two names and collect the rest
const [firstUser, secondUser, ...remainingUsers] = userNames;
console.log(`First two users: ${firstUser}, ${secondUser}`);
console.log(`Remaining users: ${remainingUsers.join(', ')}`);

// Destructure email and status from userDetails, add a default for 'role'
const { email, status, role = "user" } = userDetails;
console.log(`User email: ${email}, status: ${status}, role: ${role}`);

// Create a new user object combining details and adding a name
const newUser = {
  name: "Alice Smith",
  ...userDetails, // Spread existing details
  registrationDate: "2025-07-31" // Add new property
};
console.log("New User Object:", newUser);

Classes and Inheritance

Before ES6, JavaScript used prototype-based inheritance, which could be confusing for developers coming from class-based languages like Java or C++. ES6 introduced the `class` keyword, providing a more familiar and syntactical sugar over JavaScript's existing prototype-based inheritance. While it doesn't change how JavaScript fundamentally works under the hood, it offers a cleaner and more organized way to define constructor functions and methods.

Defining Classes with `class` Keyword:

A class is a blueprint for creating objects (a particular object type). It encapsulates data for the object and methods that operate on that data.

class Person {
  // Constructor method: special method for creating and initializing an object
  constructor(name, age) {
    this.name = name; // 'this' refers to the instance of the class
    this.age = age;
  }

  // Method: a function associated with the class
  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }

  // Getter method
  get birthYear() {
    return new Date().getFullYear() - this.age;
  }

  // Static method: belongs to the class itself, not to instances
  static describe() {
    return "This is a blueprint for creating person objects.";
  }
}

// Creating instances (objects) from the class
const john = new Person("John", 30);
console.log(john.greet());      // Output: Hello, my name is John and I am 30 years old.
console.log(john.birthYear);    // Output: (current year - 30)

const jane = new Person("Jane", 25);
console.log(jane.greet());      // Output: Hello, my name is Jane and I am 25 years old.

// Calling a static method
console.log(Person.describe()); // Output: This is a blueprint for creating person objects.

Inheritance with `extends` and `super()`:

Inheritance allows you to create new classes that are based on existing classes, inheriting their properties and methods. This promotes code reusability and creates a hierarchical relationship between classes.

• `extends` keyword: Used to create a subclass (child class) that inherits from a superclass (parent class).
• `super()` keyword: Used within the constructor of a subclass to call the constructor of its superclass. It must be called before `this` is used in the subclass constructor. It can also be used to call methods of the superclass.

class Student extends Person { // Student inherits from Person
  constructor(name, age, studentId) {
    super(name, age); // Call the parent class's constructor
    this.studentId = studentId;
  }

  // Override parent method
  greet() {
    return `Hi, I'm ${this.name}, a student with ID ${this.studentId}.`;
  }

  study() {
    return `${this.name} is studying.`;
  }
}

const alice = new Student("Alice", 20, "S12345");
console.log(alice.greet());    // Output: Hi, I'm Alice, a student with ID S12345. (Overridden method)
console.log(alice.study());    // Output: Alice is studying.
console.log(alice.name);       // Output: Alice (inherited property)
console.log(alice instanceof Person); // Output: true
console.log(alice instanceof Student); // Output: true

Classes and inheritance provide a clear and structured way to organize your code, especially when dealing with complex object relationships. They are a cornerstone of object-oriented programming in JavaScript.

class Shape {
  constructor(color) {
    this.color = color;
  }

  describe() {
    return `This is a ${this.color} shape.`;
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color); // Call parent constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }

  // You can also override the describe method if needed
  describe() {
    return `This is a ${this.color} circle with radius ${this.radius}.`;
  }
}

const myCircle = new Circle("red", 5);
console.log(myCircle.describe()); // Output: This is a red circle with radius 5.
console.log(`Area of the circle: ${myCircle.getArea().toFixed(2)}`); // Output: Area of the circle: 78.54

Modules and Import/Export

As JavaScript applications grow in complexity, organizing code into smaller, reusable, and manageable units becomes essential. ES6 introduced JavaScript Modules, a standardized way to encapsulate and share code between different files. Modules promote modularity, reusability, and maintainability by allowing you to explicitly `export` parts of a file and `import` them into other files.

Why Use Modules?

• Code Organization: Break down large files into smaller, focused modules.
• Reusability: Easily reuse functions, classes, or variables across different parts of your application or even in other projects.
• Dependency Management: Clearly define what a file depends on (`import`) and what it provides to others (`export`).
• Encapsulation/Private Scope: Variables and functions within a module are private by default unless explicitly exported, preventing global scope pollution.
• Better Maintainability: Changes in one module are less likely to break other parts of the application.

`export`: Making Code Available

The `export` keyword is used to make variables, functions, classes, or constants available from a module.

• Named Exports: Export multiple values from a module. When importing, you must use the exact names.

  // file: math.js
  export const PI = 3.14159;
  
  export function add(a, b) {
    return a + b;
  }
  
  export const subtract = (a, b) => a - b;
  
  export class Calculator {
    // ...
  }

• Default Exports: Export a single value (function, class, or object) as the default for the module. There can only be one default export per module. When importing, you can give it any name.

  // file: utils.js
  const greeting = "Hello from utils!";
  export default greeting;
  
  // OR
  // export default function sayHello() {
  //   console.log("Hello!");
  // }
  
  // OR
  // export default class User { /* ... */ }

`import`: Using Exported Code

The `import` keyword is used to bring exported values from other modules into the current file.

• Importing Named Exports: Use curly braces `{}` and the exact names.

  // file: app.js
  import { PI, add, subtract } from './math.js'; // Relative path is crucial
  
  console.log(PI);        // 3.14159
  console.log(add(5, 3)); // 8

• Importing Default Exports: No curly braces, and you can choose any name for the imported value.

  // file: app.js
  import myGreeting from './utils.js'; // 'myGreeting' can be any name
  console.log(myGreeting); // Output: Hello from utils!

• Importing All as a Namespace: Imports all named exports into a single object.

  // file: app.js
  import * as MathFunctions from './math.js';
  
  console.log(MathFunctions.PI);
  console.log(MathFunctions.add(10, 5));

Browser Support and `type="module"`:

To use ES Modules directly in the browser, you need to add `type="module"` to your `<script>` tag. This tells the browser to treat the script as a module, enabling `import` and `export` statements.

<!-- In your HTML file -->
<script type="module" src="app.js"></script>

When using `type="module"`, scripts are deferred by default (they don't block HTML parsing) and run in strict mode automatically.

// calculator.js
export function add(a, b) {
  return a + b;
}

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

export const multiply = (a, b) => a * b; // Another named export

// main.js
import { add, subtract } from './calculator.js'; // Make sure path is correct

console.log("5 + 3 =", add(5, 3));     // Output: 5 + 3 = 8
console.log("10 - 4 =", subtract(10, 4)); // Output: 10 - 4 = 6

// You can also import all:
// import * as Calc from './calculator.js';
// console.log("2 * 6 =", Calc.multiply(2, 6));

<!-- In your HTML file -->
<script type="module" src="main.js"></script>

Map, Set, and Iterators

ES6 introduced new built-in objects, `Map` and `Set`, which provide more efficient and flexible ways to store and manage collections of data compared to plain objects and arrays for certain use cases. These, along with the concept of Iterators, enhance JavaScript's capabilities for data manipulation.

`Map`: Key-Value Pairs with Any Key Type

A `Map` object holds key-value pairs where the keys can be of any data type (unlike plain objects, where keys are implicitly converted to strings or symbols). It maintains the order of insertion of elements.

• Creation: `new Map()`
• Methods:
  • `set(key, value)`: Adds or updates a key-value pair.
  • `get(key)`: Retrieves the value associated with a key.
  • `has(key)`: Checks if a key exists.
  • `delete(key)`: Removes a key-value pair.
  • `clear()`: Removes all entries.
  • `size`: Property to get the number of entries.

const myMap = new Map();

// Setting values
myMap.set('name', 'Alice');
myMap.set(1, 'a number key');
myMap.set(true, 'a boolean key');
const objKey = { id: 1 };
myMap.set(objKey, 'an object as key');

console.log(myMap.get('name'));     // Output: Alice
console.log(myMap.get(1));          // Output: a number key
console.log(myMap.has('name'));     // Output: true
console.log(myMap.size);            // Output: 4

myMap.delete(true);
console.log(myMap.size);            // Output: 3

// Iterating over Map
for (let [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// Output:
// name = Alice
// 1 = a number key
// { id: 1 } = an object as key

`Map` is useful when you need to store data where keys are not always strings, or when you need to preserve insertion order.

`Set`: Collection of Unique Values

A `Set` object is a collection of unique values. It's useful when you need to store a list of items where duplicates are not allowed, or when you need to quickly check for the presence of an item.

• Creation: `new Set()`
• Methods:
  • `add(value)`: Adds a new unique value.
  • `has(value)`: Checks if a value exists.
  • `delete(value)`: Removes a value.
  • `clear()`: Removes all values.
  • `size`: Property to get the number of unique values.

const mySet = new Set();

mySet.add(1);
mySet.add("hello");
mySet.add(1); // Duplicate, will not be added
mySet.add({ id: 1 }); // Objects are unique by reference

console.log(mySet.size);      // Output: 3 (1, "hello", {id:1})
console.log(mySet.has("hello")); // Output: true

mySet.delete(1);
console.log(mySet.size);      // Output: 2

// Converting Set to Array
const uniqueArray = [...mySet];
console.log(uniqueArray); // Output: ["hello", { id: 1 }]

// Iterating over Set
for (let item of mySet) {
  console.log(item);
}

`Set` is excellent for removing duplicates from arrays or for efficiently checking if an item is present in a collection.

Iterators and Iterables:

The `for...of` loop, spread operator (`...`), and destructuring work with "iterable" objects. An object is iterable if it implements the `[Symbol.iterator]` method, which returns an "iterator." An iterator is an object with a `next()` method that returns an object with `value` and `done` properties.

Arrays, Strings, Maps, and Sets are all built-in iterables in JavaScript.

const myString = "hello";
const iterator = myString[Symbol.iterator]();

console.log(iterator.next()); // { value: 'h', done: false }
console.log(iterator.next()); // { value: 'e', done: false }
// ...
console.log(iterator.next()); // { value: undefined, done: true } (after all characters)

// This is what 'for...of' does behind the scenes:
for (let char of myString) {
  console.log(char);
}

Understanding iterators helps you grasp how `for...of` and other modern JavaScript features work with various data structures, and it allows you to create your own custom iterable objects.

const articleTags = ["JavaScript", "HTML", "CSS", "JavaScript", "WebDev", "CSS"];

// Get unique tags using Set
const uniqueTags = [...new Set(articleTags)];
console.log("Unique Tags:", uniqueTags); // Output: ["JavaScript", "HTML", "CSS", "WebDev"]

// Store user preferences in a Map
const userPreferences = new Map();
userPreferences.set(101, { theme: "dark", notifications: true });
userPreferences.set(102, { theme: "light", notifications: false });
userPreferences.set(103, { theme: "dark", notifications: true });

console.log("Preferences for User 101:", userPreferences.get(101));

// Check if a user has preferences stored
console.log("Does User 102 have preferences?", userPreferences.has(102)); // Output: true

// Iterate and display all user preferences
console.log("All User Preferences:");
for (let [userId, prefs] of userPreferences) {
  console.log(`User ID: ${userId}, Theme: ${prefs.theme}, Notifications: ${prefs.notifications}`);
}

Callbacks and Callback Hell

JavaScript is inherently single-threaded, meaning it executes one operation at a time. However, many operations in web development are time-consuming (e.g., fetching data from a server, reading a file, waiting for a user click). If these operations were synchronous, the browser would freeze. This is where asynchronous JavaScript comes in. It allows long-running tasks to run in the background without blocking the main thread.

Synchronous vs. Asynchronous Code:

• Synchronous: Code executes line by line, in order. Each operation must complete before the next one starts.

  console.log("Start");
  console.log("Middle");
  console.log("End");
  // Output: Start, Middle, End (immediately)

• Asynchronous: Tasks can start now and finish later. The main thread continues executing other code while the asynchronous task runs in the background. When the async task completes, it notifies the main thread (e.g., via a callback).

  console.log("Start");
  setTimeout(() => { // Asynchronous operation
    console.log("Inside setTimeout (after 0ms)");
  }, 0);
  console.log("End");
  // Output: Start, End, Inside setTimeout (after 0ms)
  // The setTimeout callback is put into a queue and runs after the synchronous code completes.

Callbacks: Functions as Arguments

A callback function is a function passed as an argument to another function, which is then executed inside the outer function at a later time. Callbacks are the traditional way to handle asynchronous operations in JavaScript.

function fetchData(callback) {
  setTimeout(() => {
    const data = "Data fetched successfully!";
    callback(data); // Execute the callback with the data
  }, 2000); // Simulate network delay of 2 seconds
}

function displayData(data) {
  console.log("Displaying:", data);
}

console.log("Fetching data...");
fetchData(displayData); // Pass displayData as a callback
console.log("Request sent. Waiting for data...");
// Output:
// Fetching data...
// Request sent. Waiting for data...
// (2 second delay)
// Displaying: Data fetched successfully!

Callback Hell (Pyramid of Doom):

While callbacks are essential, using many nested callbacks for sequential asynchronous operations can lead to highly unreadable, unmaintainable, and error-prone code. This pattern is often referred to as "Callback Hell" or the "Pyramid of Doom."

// Simulate fetching user, then posts, then comments
function getUser(id, callback) {
  setTimeout(() => {
    console.log(`Getting user ${id}...`);
    callback({ name: "Alice", id: id });
  }, 1000);
}

function getPosts(userId, callback) {
  setTimeout(() => {
    console.log(`Getting posts for user ${userId}...`);
    callback([{ title: "Post 1" }, { title: "Post 2" }]);
  }, 1000);
}

function getComments(postId, callback) {
  setTimeout(() => {
    console.log(`Getting comments for post ${postId}...`);
    callback(["Comment A", "Comment B"]);
  }, 1000);
}

// Callback Hell example:
getUser(1, (user) => {
  console.log("User:", user);
  getPosts(user.id, (posts) => {
    console.log("Posts:", posts);
    getComments(posts[0].title, (comments) => { // Assuming title as ID for simplicity
      console.log("Comments for Post 1:", comments);
      // And if you need to do something else after this... more nesting!
    });
  });
});
// This quickly becomes hard to read and manage as more steps are added.

Callback Hell is a significant problem that led to the introduction of Promises and Async/Await in modern JavaScript, which provide more structured and readable ways to handle asynchronous operations.

function performStep1(callback) {
  console.log("Starting Step 1...");
  setTimeout(() => {
    console.log("Step 1 complete!");
    callback(); // Call the next step
  }, 1500);
}

function performStep2() {
  console.log("Step 2 is now running!");
}

// Execute the sequence
performStep1(performStep2);

console.log("Script continues to run while steps are performed asynchronously.");

Promises and Promise Chaining

To address the challenges of "Callback Hell," ES6 introduced Promises. A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to write asynchronous code that looks more like synchronous code, making it easier to read and manage, especially for sequential operations.

What are Promises?

A Promise can be in one of three states:

• `pending`: Initial state, neither fulfilled nor rejected. The asynchronous operation is still in progress.
• `fulfilled` (or `resolved`): The operation completed successfully, and the promise has a resulting value.
• `rejected`: The operation failed, and the promise has a reason for the failure (an error).

Once a Promise is fulfilled or rejected, it is "settled" and its state cannot change again.

Creating Promises: `new Promise()`

You create a Promise using the `Promise` constructor, which takes a function (the "executor") as an argument. The executor function receives two arguments: `resolve` and `reject`.

• Call `resolve(value)` when the asynchronous operation completes successfully.
• Call `reject(error)` when the asynchronous operation fails.

const myPromise = new Promise((resolve, reject) => {
  // Simulate an asynchronous operation (e.g., fetching data)
  const success = true; // Change to false to see rejection

  setTimeout(() => {
    if (success) {
      resolve("Data successfully loaded!"); // Resolve the promise
    } else {
      reject("Failed to load data."); // Reject the promise
    }
  }, 2000);
});

console.log("Promise created, pending...");

Consuming Promises: `.then()`, `.catch()`, `.finally()`

To handle the outcome of a Promise, you attach methods to it:

• `.then(onFulfilled, onRejected)`:
  • `onFulfilled`: A function called when the promise is fulfilled. It receives the resolved value.
  • `onRejected`: (Optional) A function called when the promise is rejected. It receives the rejection reason.

  myPromise.then(
    (data) => {
      console.log("Success:", data);
    },
    (error) => {
      console.error("Error (from .then):", error);
    }
  );

• `.catch(onRejected)`: A specialized version of `.then()` that only handles rejections. It's the preferred way to handle errors at the end of a promise chain.

  myPromise
    .then((data) => {
      console.log("Success:", data);
    })
    .catch((error) => {
      console.error("Error (from .catch):", error);
    });

• `.finally(onFinally)`: (ES2018) A function that is called when the promise is settled (either fulfilled or rejected). It doesn't receive any arguments and is useful for cleanup operations.

  myPromise
    .then((data) => console.log("Success:", data))
    .catch((error) => console.error("Error:", error))
    .finally(() => console.log("Promise operation finished."));

Promise Chaining: Sequential Async Operations

The real power of Promises comes from chaining them. The `.then()` method always returns a new Promise, allowing you to chain multiple asynchronous operations sequentially. If a `.then()` callback returns a value, that value becomes the resolved value of the next promise in the chain. If it returns another Promise, the chain waits for that Promise to settle.

function fetchUser(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Fetched user ${userId}`);
      resolve({ id: userId, name: "Charlie" });
    }, 1000);
  });
}

function fetchPosts(user) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Fetched posts for ${user.name}`);
      resolve([{ title: "JS Basics" }, { title: "Async JS" }]);
    }, 1000);
  });
}

fetchUser(123)
  .then(user => {
    console.log("User data:", user);
    return fetchPosts(user); // Return a new promise
  })
  .then(posts => {
    console.log("Posts data:", posts);
    // You can continue chaining more .then() calls here
  })
  .catch(error => {
    console.error("An error occurred in the chain:", error);
  });
// This is much cleaner than nested callbacks!

`Promise.all()` and `Promise.race()`:

• `Promise.all(iterable)`: Takes an iterable of promises and returns a single Promise that resolves when all of the input promises have resolved, or rejects if any of the input promises reject.
• `Promise.race(iterable)`: Takes an iterable of promises and returns a single Promise that resolves or rejects as soon as one of the input promises resolves or rejects.

function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("User data fetched.");
      resolve({ id: 1, name: "Sarah" });
    }, 1000);
  });
}

function fetchProductData() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Product data fetched.");
      resolve({ productId: 50, name: "Laptop", price: 1500 });
    }, 1500);
  });
}

console.log("Fetching user and product data simultaneously...");
Promise.all([fetchUserData(), fetchProductData()])
  .then(results => {
    const [userData, productData] = results;
    console.log("All data fetched successfully!");
    console.log("User:", userData);
    console.log("Product:", productData);
  })
  .catch(error => {
    console.error("One of the fetches failed:", error);
  });

Async/Await Syntax

While Promises significantly improved asynchronous programming over callbacks, ES2017 introduced `async`/`await`, which makes asynchronous code even easier to read and write. It allows you to write asynchronous code that looks and behaves like synchronous code, making complex promise chains much more manageable and understandable.

The `async` Keyword:

The `async` keyword is used to define an asynchronous function. An `async` function always returns a Promise. If the function returns a non-Promise value, JavaScript automatically wraps it in a resolved Promise. If it throws an error, it automatically wraps it in a rejected Promise.

async function greeting() {
  return "Hello, Async World!"; // This will be wrapped in a resolved Promise
}

greeting().then(message => console.log(message)); // Output: Hello, Async World!

async function willThrowError() {
  throw new Error("Something went wrong!"); // This will be wrapped in a rejected Promise
}

willThrowError().catch(error => console.error(error.message)); // Output: Something went wrong!

The `await` Keyword:

The `await` keyword can only be used inside an `async` function. It pauses the execution of the `async` function until the Promise it's waiting for settles (either resolves or rejects). Once the Promise resolves, `await` returns its resolved value. If the Promise rejects, `await` throws an error, which can be caught using a `try...catch` block.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Resolved after 2 seconds');
    }, 2000);
  });
}

async function fetchData() {
  console.log('Starting data fetch...');
  const result = await resolveAfter2Seconds(); // Pause here until promise resolves
  console.log(result); // This line runs after 2 seconds
  console.log('Data fetch finished.');
}

fetchData();
// Output:
// Starting data fetch...
// (2 second delay)
// Resolved after 2 seconds
// Data fetch finished.

Error Handling with `try...catch` in `async/await`:

Since `await` throws an error when a Promise rejects, you can use standard `try...catch` blocks to handle errors in asynchronous code, just like you would with synchronous code. This is a significant readability improvement over `.catch()` chains.

function rejectAfter1Second() {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('Operation failed!'));
    }, 1000);
  });
}

async function performOperation() {
  try {
    console.log('Attempting operation...');
    const result = await rejectAfter1Second(); // This will throw an error
    console.log('Operation successful:', result); // This line won't be reached
  } catch (error) {
    console.error('Caught an error:', error.message); // Catches the error thrown by await
  } finally {
    console.log('Operation attempt completed.');
  }
}

performOperation();
// Output:
// Attempting operation...
// (1 second delay)
// Caught an error: Operation failed!
// Operation attempt completed.

Benefits of `async`/`await`:

• Readability: Makes asynchronous code look and feel synchronous, making it much easier to follow the flow of logic.
• Error Handling: Allows the use of familiar `try...catch` blocks for error management.
• Debugging: Easier to debug with standard debugger tools, as execution pauses at `await` statements.
• Sequential Logic: Simplifies writing code where one asynchronous operation depends on the result of another.

`async`/`await` is the preferred way to handle Promises in modern JavaScript due to its superior readability and error handling capabilities.

async function fetchUserId() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Fetching user ID...");
      resolve(42); // Simulate fetching an ID
    }, 1000);
  });
}

async function fetchUserDetails(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Fetching details for user ID: ${id}...`);
      resolve({ id: id, name: "Grace", email: "grace@example.com" });
    }, 1500);
  });
}

async function getUserProfile() {
  try {
    const userId = await fetchUserId();
    const userDetails = await fetchUserDetails(userId);
    console.log("User Profile:", userDetails);
  } catch (error) {
    console.error("Failed to get user profile:", error.message);
  }
}

getUserProfile();
// Expected output will show messages appearing sequentially after delays.

Fetch API and AJAX

Interacting with web servers to send and receive data without full page reloads is a cornerstone of modern web applications. This is broadly known as AJAX (Asynchronous JavaScript and XML), though modern implementations rarely use XML. The Fetch API is the modern, Promise-based way to make network requests in JavaScript, replacing the older `XMLHttpRequest`.

What is AJAX?

AJAX is a set of web development techniques using many web technologies on the client-side to create asynchronous web applications. With AJAX, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. This allows for dynamic updates to web pages without full page reloads, leading to a smoother user experience.

The Fetch API: Making HTTP Requests

The Fetch API provides a powerful and flexible way to make network requests, returning Promises that resolve to the `Response` object. It's the modern successor to `XMLHttpRequest`.

• Basic GET Request:

  fetch('https://jsonplaceholder.typicode.com/posts/1') // Returns a Promise
    .then(response => {
      // Check if request was successful (status code 200-299)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json(); // Parse the JSON body of the response
    })
    .then(data => {
      console.log('Fetched Post:', data);
    })
    .catch(error => {
      console.error('There was a problem with the fetch operation:', error);
    });

• Handling JSON Responses:

  The `response.json()` method is an asynchronous operation itself. It reads the response stream to completion and parses it as JSON. You need another `.then()` to handle the parsed data.

• Error Handling:

  The `fetch()` Promise only rejects if a network error occurs (e.g., no internet connection). It does *not* reject for HTTP errors like 404 Not Found or 500 Internal Server Error. You must explicitly check `response.ok` (which is `true` for 2xx status codes) to handle HTTP errors.

Making POST Requests (Sending Data):

To send data to a server (e.g., submitting a form), you typically use a `POST` request. You need to specify the `method`, `headers` (especially `Content-Type`), and `body` of the request.

async function createNewPost() {
  const newPost = {
    title: 'My New Post',
    body: 'This is the content of my new post.',
    userId: 1,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify content type
      },
      body: JSON.stringify(newPost), // Convert JS object to JSON string
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('New Post Created:', data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
}

createNewPost();

Request Headers:

Headers provide additional information about the request or the response. Common headers include:

• `Content-Type`: Specifies the media type of the resource (e.g., `application/json`, `text/plain`).
• `Accept`: Specifies the media types that are acceptable for the response.
• `Authorization`: For sending authentication tokens.

The Fetch API is a powerful and modern way to interact with APIs and build dynamic web applications. Combined with `async`/`await`, it makes asynchronous data fetching clean and readable.

<h2>Users List</h2>
<ul id="users-list">
  <li>Loading users...</li>
</ul>

document.addEventListener('DOMContentLoaded', async () => {
  const usersList = document.getElementById('users-list');
  usersList.innerHTML = ''; // Clear loading message

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`Failed to fetch users: ${response.statusText}`);
    }
    const users = await response.json();

    users.forEach(user => {
      const listItem = document.createElement('li');
      listItem.textContent = `${user.name} (${user.email})`;
      usersList.appendChild(listItem);
    });

  } catch (error) {
    console.error("Error fetching users:", error);
    usersList.innerHTML = '<li style="color: var(--error-color);">Failed to load users. Please try again later.</li>';
  }
});

Error Handling in Async Code

Asynchronous operations introduce complexities to error handling compared to synchronous code. Errors in callbacks, Promises, or `async`/`await` functions behave differently and require specific strategies to ensure your application remains robust and user-friendly. Proper error handling prevents unhandled rejections, provides meaningful feedback to users, and helps in debugging.

Error Handling with Callbacks (Challenges):

In callback-based asynchronous code, errors are typically handled by passing an `error` object as the first argument to the callback (Node.js style) or by having separate success/error callbacks. The main challenge is that a `try...catch` block around the initial asynchronous call won't catch errors that occur *inside* the callback, because the callback executes later, outside the original `try` block's execution context.

function fetchData(callback) {
  setTimeout(() => {
    const success = false; // Simulate failure
    if (success) {
      callback(null, "Data loaded!"); // Node.js style: (error, data)
    } else {
      callback(new Error("Network error!"), null);
    }
  }, 1000);
}

// Consuming with callback error handling
fetchData((error, data) => {
  if (error) {
    console.error("Callback Error:", error.message);
  } else {
    console.log("Callback Success:", data);
  }
});

// A try-catch here would NOT catch the error inside setTimeout:
try {
  setTimeout(() => {
    throw new Error("This error won't be caught by this try-catch!");
  }, 0);
} catch (e) {
  console.error("Caught by outer try-catch:", e.message); // This won't run
}

Error Handling with Promises: `.catch()`

Promises significantly improve error handling by providing a dedicated `.catch()` method. If any Promise in a chain rejects, control immediately jumps to the nearest `.catch()` block down the chain. This centralizes error handling and avoids deeply nested `if (error)` checks.

function fetchDataPromise(shouldSucceed) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldSucceed) {
        resolve("Promise data loaded!");
      } else {
        reject(new Error("Promise failed to load data!"));
      }
    }, 1000);
  });
}

fetchDataPromise(false) // This promise will reject
  .then(data => {
    console.log("Success:", data); // This won't run
    return data + " processed";
  })
  .then(processedData => {
    console.log("Processed:", processedData); // This won't run
  })
  .catch(error => { // Catches the rejection from fetchDataPromise
    console.error("Caught by .catch():", error.message);
  })
  .finally(() => {
    console.log("Promise chain finished.");
  });

// Chaining with potential errors at different stages:
fetchDataPromise(true) // This promise will resolve
  .then(data => {
    console.log("First .then success:", data);
    // Simulate another operation that might fail
    if (data.includes("loaded")) {
      throw new Error("Simulated error in second step!"); // Throws an error, which rejects the promise returned by this .then()
    }
    return data;
  })
  .then(finalData => {
    console.log("Final data:", finalData); // This won't run
  })
  .catch(error => { // Catches the simulated error from the previous .then()
    console.error("Caught error in chain:", error.message);
  });

Error Handling with `async`/`await`: `try...catch`

The `async`/`await` syntax brings back the familiar `try...catch` block for asynchronous error handling, making it the most intuitive approach. If an `await` expression's Promise rejects, it behaves like a `throw` statement, allowing the error to be caught by the surrounding `try...catch`.

function fetchUserAsync(shouldSucceed) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldSucceed) {
        resolve({ id: 1, name: "David" });
      } else {
        reject(new Error("Failed to fetch user."));
      }
    }, 1000);
  });
}

async function getUserData() {
  try {
    console.log("Attempting to get user data...");
    const user = await fetchUserAsync(false); // This will reject
    console.log("User data:", user); // This line won't be reached
  } catch (error) {
    console.error("Async/Await Error:", error.message); // Catches the rejection
  } finally {
    console.log("Async operation finished.");
  }
}

getUserData();

// Multiple async operations in a chain
async function processDataChain() {
  try {
    const step1Result = await fetchUserAsync(true); // Succeeds
    console.log("Step 1 successful:", step1Result);

    // Simulate a second step that might fail
    const step2Success = false;
    if (!step2Success) {
      throw new Error("Step 2 failed due to an issue.");
    }
    console.log("Step 2 successful.");

  } catch (error) {
    console.error("Error in async chain:", error.message); // Catches either rejection or thrown error
  }
}

processDataChain();

Best Practices for Robust Async Error Handling:

• Always Handle Rejections: Ensure every Promise chain has a `.catch()` or every `async` function uses `try...catch` to prevent "unhandled promise rejections."
• Centralize Error Reporting: Log errors to a centralized logging service or display user-friendly messages.
• Specific Error Messages: Provide clear and actionable error messages, both for developers (in console) and users (on UI).
• Graceful Degradation: Design your UI to handle errors gracefully (e.g., show a loading spinner, then an error message, rather than a blank screen).
• Retry Mechanisms: For transient network errors, consider implementing simple retry logic.

async function fetchDataRobust(url) {
  try {
    console.log(`Attempting to fetch from: ${url}`);
    const response = await fetch(url);

    if (!response.ok) {
      // Handle HTTP errors (e.g., 404, 500)
      const errorText = await response.text(); // Get error details from response body
      throw new Error(`HTTP Error: ${response.status} - ${response.statusText || errorText}`);
    }

    const data = await response.json();
    console.log("Data fetched successfully:", data);
    return data;

  } catch (error) {
    // Handle network errors or errors thrown from response.ok check
    console.error("Failed to fetch data:", error.message);
    // You might update UI here to show an error message to the user
    return null; // Return null or throw a re-wrapped error for calling code
  }
}

// Test case 1: Successful fetch
fetchDataRobust('https://jsonplaceholder.typicode.com/todos/1');

// Test case 2: Non-existent endpoint (will result in 404 HTTP error)
fetchDataRobust('https://jsonplaceholder.typicode.com/nonexistent-endpoint');

// Test case 3: Simulate network issue (e.g., by providing a non-resolvable URL or turning off internet)
// fetchDataRobust('http://this-url-does-not-exist-12345.com'); // Uncomment to test network error

Closures and Higher-Order Functions

Closures and Higher-Order Functions (HOFs) are two powerful and interconnected concepts in JavaScript that enable flexible, modular, and functional programming patterns. Mastering them is key to writing more sophisticated and efficient JavaScript code.

Closures: Remembering Their Environment

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In simpler terms, a closure gives you access to an outer function's scope from an inner function, even after the outer function has finished executing. This "remembrance" of the environment is what makes closures so powerful.

function createCounter() {
  let count = 0; // 'count' is in the outer function's scope

  return function() { // This inner function forms a closure
    count++;
    console.log(count);
  };
}

const counter1 = createCounter(); // counter1 is a closure
counter1(); // Output: 1
counter1(); // Output: 2

const counter2 = createCounter(); // counter2 is a separate closure
counter2(); // Output: 1 (starts its own count)
counter1(); // Output: 3 (counter1 continues its count)

In this example, `createCounter` returns an anonymous function. Even after `createCounter` has finished executing, the returned function "remembers" and can still access and modify the `count` variable from its outer scope. This is a classic use case for creating private variables in JavaScript.

Common Use Cases for Closures:

• Private Variables/Methods: Encapsulating data within a function's scope.
• Factory Functions: Functions that create and return other functions.
• Event Handlers: Event handlers often form closures, remembering variables from their creation context.
• Memoization: Caching function results.

Higher-Order Functions (HOFs): Functions that Operate on Functions

A Higher-Order Function is a function that either:

1. Takes one or more functions as arguments (callbacks).
2. Returns a function as its result.

HOFs are a cornerstone of functional programming paradigms and are widely used in JavaScript, especially with array methods.

• Taking Functions as Arguments:

  Examples: `Array.prototype.map()`, `Array.prototype.filter()`, `Array.prototype.reduce()`, `setTimeout()`, `addEventListener()`.

  const numbers = [1, 2, 3, 4, 5];
  
  // map is a HOF: takes a callback function
  const doubled = numbers.map(num => num * 2);
  console.log(doubled); // Output: [2, 4, 6, 8, 10]
  
  // filter is a HOF: takes a callback function
  const evens = numbers.filter(num => num % 2 === 0);
  console.log(evens); // Output: [2, 4]

• Returning Functions:

  This often involves closures, as the returned function will likely "close over" variables from the HOF's scope.

  function createMultiplier(factor) { // createMultiplier is a HOF
    return function(number) { // This returned function is a closure
      return number * factor;
    };
  }
  
  const multiplyBy5 = createMultiplier(5);
  console.log(multiplyBy5(10)); // Output: 50
  
  const multiplyBy10 = createMultiplier(10);
  console.log(multiplyBy10(10)); // Output: 100

Understanding closures and higher-order functions allows you to write more expressive, flexible, and powerful JavaScript code, especially when dealing with asynchronous operations, data transformations, and custom utilities.

function createFilter(conditionFn) { // HOF
  return function(arr) { // Closure
    const filteredArr = [];
    for (let i = 0; i < arr.length; i++) {
      if (conditionFn(arr[i])) {
        filteredArr.push(arr[i]);
      }
    }
    return filteredArr;
  };
}

// Define some condition functions
const isEven = num => num % 2 === 0;
const isLongString = str => str.length > 5;

// Create specific filter functions using the HOF
const filterEvens = createFilter(isEven);
const filterLongStrings = createFilter(isLongString);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const words = ["apple", "banana", "cat", "dog", "elephant"];

console.log("Filtered Evens:", filterEvens(numbers)); // Output: [2, 4, 6, 8, 10]
console.log("Filtered Long Strings:", filterLongStrings(words)); // Output: ["banana", "elephant"]

Prototypes and Prototype Chain

Unlike class-based languages, JavaScript is a prototype-based language. Every object in JavaScript has a prototype, which is another object. When you try to access a property or method on an object, JavaScript first looks for it directly on the object. If it doesn't find it, it then looks on the object's prototype, then on the prototype's prototype, and so on, until it reaches the end of the prototype chain (which is `null`). This mechanism is how JavaScript implements inheritance.

Understanding Prototypes:

Every JavaScript object has an internal property called `[[Prototype]]` (or `__proto__` in some environments, though `Object.getPrototypeOf()` is the standard way to access it). This property points to the object's prototype.

const person = {
  name: "Alice",
  greet: function() {
    return `Hello, I'm ${this.name}`;
  }
};

const bob = {
  name: "Bob"
};

// Set 'person' as the prototype of 'bob'
Object.setPrototypeOf(bob, person);

console.log(bob.name);  // Output: Bob (found directly on bob)
console.log(bob.greet()); // Output: Hello, I'm Bob (greet is found on person, 'this' refers to bob)

// Check prototype
console.log(Object.getPrototypeOf(bob) === person); // Output: true

The Prototype Chain:

When you try to access a property or method on an object, JavaScript traverses up the prototype chain until it finds the property or reaches `null`.

// Array.prototype is the prototype of all arrays
const myArray = [1, 2, 3];
console.log(Object.getPrototypeOf(myArray) === Array.prototype); // true

// Object.prototype is the prototype of all objects (and at the end of most chains)
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true

// The end of the chain
console.log(Object.getPrototypeOf(Object.prototype)); // null

// When you call myArray.push(4):
// 1. JS looks for 'push' on 'myArray'. Not found.
// 2. JS looks for 'push' on 'myArray.__proto__' (which is Array.prototype). Found!
// 3. The 'push' method is executed.

`new` Keyword and Constructor Functions:

Before ES6 classes, constructor functions were the primary way to create objects with shared methods. When you use the `new` keyword with a function:

1. A new empty object is created.
2. The constructor function is called with `this` bound to the new object.
3. The new object's prototype (`__proto__`) is set to the `constructorFunction.prototype`.
4. The new object is returned (unless the constructor explicitly returns another object).

function Animal(name) {
  this.name = name;
}

// Add methods to the prototype to be shared by all instances
Animal.prototype.speak = function() {
  return `${this.name} makes a sound.`;
};

const dog = new Animal("Buddy");
const cat = new Animal("Whiskers");

console.log(dog.speak()); // Output: Buddy makes a sound.
console.log(cat.speak()); // Output: Whiskers makes a sound.

// They share the same speak method from the prototype
console.log(dog.speak === cat.speak); // Output: true

ES6 `class` syntax is syntactic sugar over this prototype-based inheritance. When you define a class, its methods are automatically added to the class's `prototype` object.

class Vehicle {
  constructor(type) {
    this.type = type;
  }
  drive() {
    return `The ${this.type} is driving.`;
  }
}

const car = new Vehicle("car");
console.log(Object.getPrototypeOf(car) === Vehicle.prototype); // true
console.log(car.drive());

Understanding the prototype chain is fundamental to truly grasping how inheritance and object-oriented programming work in JavaScript, even when using the modern `class` syntax.

// Add a method to Array.prototype
Array.prototype.isEmpty = function() {
  return this.length === 0;
};

const myArray1 = [];
const myArray2 = [1, 2, 3];
const myArray3 = ["hello"];

console.log("myArray1 is empty?", myArray1.isEmpty()); // Output: true
console.log("myArray2 is empty?", myArray2.isEmpty()); // Output: false
console.log("myArray3 is empty?", myArray3.isEmpty()); // Output: false

// IMPORTANT: While this demonstrates prototypes, extending built-in prototypes
// directly in production code is generally discouraged to avoid conflicts
// with future JavaScript versions or other libraries.

Design Patterns in JavaScript

Design patterns are reusable solutions to common problems in software design. They are not specific pieces of code, but rather generalized templates that can be adapted to solve recurring design challenges. Understanding design patterns helps you write more organized, maintainable, and scalable JavaScript applications, improving communication among developers and promoting best practices.

While there are many design patterns, we'll look at a few common and highly relevant ones in JavaScript.

1. Module Pattern: Encapsulation and Private Data

The Module Pattern is one of the most popular patterns in JavaScript for achieving encapsulation and creating private variables and methods. It leverages closures to create a private scope, exposing only a public interface.

const ShoppingCart = (function() {
  // Private variables and functions (not accessible from outside)
  let items = [];
  let total = 0;

  function calculateTotal() {
    total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }

  // Public interface (returned object)
  return {
    addItem: function(item) {
      items.push(item);
      calculateTotal();
      console.log(`${item.name} added.`);
    },
    removeItem: function(itemName) {
      items = items.filter(item => item.name !== itemName);
      calculateTotal();
      console.log(`${itemName} removed.`);
    },
    getTotal: function() {
      return total;
    },
    getItems: function() {
      // Return a copy to prevent external modification of the original array
      return [...items];
    }
  };
})(); // The IIFE (Immediately Invoked Function Expression) creates the closure

ShoppingCart.addItem({ name: "Laptop", price: 1200, quantity: 1 });
ShoppingCart.addItem({ name: "Mouse", price: 25, quantity: 2 });
console.log("Current Total:", ShoppingCart.getTotal()); // Output: Current Total: 1250
console.log("Items:", ShoppingCart.getItems());
// console.log(ShoppingCart.items); // Undefined - 'items' is private

The **Revealing Module Pattern** is a variation where you define all private members first and then return an object literal that "reveals" only the public pointers to the private functions/variables.

2. Singleton Pattern: One Instance Only

The Singleton Pattern ensures that a class has only one instance and provides a global point of access to that instance. This is useful for managing a single resource, like a database connection, a configuration manager, or a logger.

const Logger = (function() {
  let instance; // Private variable to hold the single instance
  let logs = [];

  function init() { // Private constructor-like function
    console.log("Logger initialized for the first time.");
    return {
      addLog: function(message) {
        const timestamp = new Date().toISOString();
        logs.push(`${timestamp}: ${message}`);
        console.log(`LOG: ${message}`);
      },
      getLogs: function() {
        return [...logs];
      }
    };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init(); // Create instance only if it doesn't exist
      }
      return instance;
    }
  };
})();

const logger1 = Logger.getInstance();
logger1.addLog("Application started.");

const logger2 = Logger.getInstance(); // Returns the same instance
logger2.addLog("User logged in.");

console.log(logger1 === logger2); // Output: true (they are the same instance)
console.log(logger1.getLogs());

3. Factory Pattern: Creating Objects Without `new`

The Factory Pattern provides an interface for creating objects in a superclass, but allows subclasses to alter the type of objects that will be created. In JavaScript, it's often used to create objects without explicitly using the `new` keyword, providing more flexibility in object creation.

function createUser(type, name) {
  if (type === "admin") {
    return {
      name: name,
      role: "Admin",
      canEdit: true,
      canDelete: true
    };
  } else if (type === "editor") {
    return {
      name: name,
      role: "Editor",
      canEdit: true,
      canDelete: false
    };
  } else {
    return {
      name: name,
      role: "Viewer",
      canEdit: false,
      canDelete: false
    };
  }
}

const adminUser = createUser("admin", "Alice");
const viewerUser = createUser("viewer", "Bob");

console.log(adminUser);   // { name: 'Alice', role: 'Admin', canEdit: true, canDelete: true }
console.log(viewerUser);  // { name: 'Bob', role: 'Viewer', canEdit: false, canDelete: false }

Understanding these patterns helps you write more robust, maintainable, and scalable JavaScript applications by providing proven solutions to common architectural problems.

const NotificationManager = (function() {
  let instance;
  const notifications = [];

  function createManager() {
    return {
      showNotification: function(message, type = 'info') {
        const notification = { id: Date.now(), message, type, timestamp: new Date() };
        notifications.push(notification);
        console.log(`[${type.toUpperCase()}] ${message}`);
        // In a real app, you'd update the UI here to display the notification
      },
      getNotifications: function() {
        return [...notifications]; // Return a copy
      },
      clearNotifications: function() {
        notifications.length = 0; // Clear the array
        console.log("All notifications cleared.");
      }
    };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createManager();
      }
      return instance;
    }
  };
})();

const notifier1 = NotificationManager.getInstance();
notifier1.showNotification("Welcome to the app!", "success");

const notifier2 = NotificationManager.getInstance();
notifier2.showNotification("New message received.", "info");

console.log("All notifications:", notifier1.getNotifications());
notifier2.clearNotifications();
console.log("Notifications after clear:", notifier1.getNotifications());

Memory Management and Performance

Efficient memory management and overall performance optimization are crucial for building responsive and scalable JavaScript applications. Poor memory practices can lead to memory leaks, slow application responsiveness, and even crashes, especially on long-running applications or devices with limited resources. Understanding how JavaScript handles memory and common pitfalls can help you write more performant code.

Garbage Collection in JavaScript:

JavaScript is a garbage-collected language, meaning you don't manually allocate or deallocate memory. The JavaScript engine automatically manages memory by periodically running a "garbage collector" that identifies and reclaims memory that is no longer reachable or referenced by your program. This process is largely invisible to developers, but understanding its principles helps prevent issues.

The most common garbage collection algorithm is "Mark-and-Sweep":

1. Marking Phase: The garbage collector starts from a set of "roots" (global variables, active function call stack, etc.) and traverses all objects reachable from these roots, marking them as "active."
2. Sweeping Phase: All objects that were not marked as active are considered "garbage" and their memory is reclaimed.

Memory Leaks: Common Causes

A memory leak occurs when your application unintentionally holds onto references to objects that are no longer needed, preventing the garbage collector from reclaiming their memory. Over time, this can lead to increased memory consumption and performance degradation.

• Global Variables: Accidentally creating global variables (e.g., by forgetting `let`, `const`, or `var` in strict mode) can keep objects in memory longer than necessary.

  function createLeak() {
    leakyVariable = "This variable becomes global if not declared with var/let/const.";
    // In non-strict mode, this creates a global property on `window`
  }
  createLeak();
  // 'leakyVariable' will persist in memory.

• Forgotten Timers and Event Listeners: If you set up `setInterval`, `setTimeout`, or `addEventListener` and don't clear them (`clearInterval`, `clearTimeout`, `removeEventListener`) when the associated DOM element or component is removed, the callback function (and anything it references) might remain in memory.

  const button = document.getElementById('myButton');
  function handleClick() { /* ... */ }
  button.addEventListener('click', handleClick);
  
  // If 'button' is later removed from DOM, 'handleClick' still holds reference
  // to it, preventing garbage collection. Always remove listeners:
  // button.removeEventListener('click', handleClick);

• Detached DOM Elements: If you remove a DOM element from the document but still hold a JavaScript reference to it (e.g., in an array or object), the element and its children cannot be garbage collected.

  let detachedElements = [];
  const element = document.getElementById('some-element');
  document.body.removeChild(element); // Element removed from DOM
  detachedElements.push(element); // Still referenced in JS array, causing a leak.

• Closures: While powerful, closures can sometimes lead to leaks if not managed carefully, especially if the inner function holds a reference to a large outer scope that is no longer needed.

Performance Optimization Techniques (HTML/JS related):

• Debouncing and Throttling: Control how often a function is executed, especially for events that fire rapidly (e.g., `scroll`, `resize`, `input`).
  • Debouncing: Executes a function only after a certain amount of time has passed since the last time it was invoked. Useful for search suggestions, input validation.
  • Throttling: Limits the rate at which a function can be called. Executes the function at most once in a given time period. Useful for scroll events, button clicks.
• Event Delegation: Instead of attaching an event listener to every child element, attach a single listener to a common parent. This reduces memory footprint and improves performance for dynamic lists.

  // HTML: <ul id="myList"><li>Item 1</li><li>Item 2</li></ul>
  const myList = document.getElementById('myList');
  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') { // Check if the clicked element is an LI
      console.log('Clicked on:', event.target.textContent);
    }
  });

• Minimizing DOM Manipulations: Each DOM manipulation is expensive. Batch updates (e.g., build HTML string, then set `innerHTML` once) or use DocumentFragments to append multiple elements at once.
• Optimizing Loops: Use efficient loop constructs. For large arrays, `for` loops can sometimes be faster than `forEach` or `map` in performance-critical scenarios, though readability often favors HOFs.
• Code Splitting and Lazy Loading: Load JavaScript modules only when they are needed, rather than all at once on page load.

Browser Developer Tools for Memory Profiling:

Modern browser developer tools (e.g., Chrome DevTools "Memory" tab) provide powerful features to profile memory usage, identify memory leaks, and analyze performance bottlenecks. Learn to use them to diagnose and fix performance issues.

<h2>Debounced Input Example</h2>
<input type="text" id="debounced-input" placeholder="Type something...">
<p>Live Output (debounced): <span id="debounced-output"></span></p>

document.addEventListener('DOMContentLoaded', () => {
  const inputElement = document.getElementById('debounced-input');
  const outputElement = document.getElementById('debounced-output');
  let timeoutId;

  function debounce(func, delay) {
    return function(...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        func.apply(this, args);
      }, delay);
    };
  }

  const updateOutput = debounce((value) => {
    outputElement.textContent = value;
    console.log("Function executed with:", value);
  }, 500); // 500ms delay

  inputElement.addEventListener('input', (event) => {
    updateOutput(event.target.value);
  });
});

Testing with Jest and Cypress

Software testing is an integral part of modern software development, ensuring that your code works as expected, is robust, and can be maintained over time. For JavaScript applications, various testing frameworks and methodologies exist. This lesson introduces two popular tools: Jest for unit and integration testing, and Cypress for end-to-end (E2E) testing.

Why Test Your JavaScript Code?

• Bug Prevention: Catch bugs early in the development cycle.
• Refactoring Confidence: Make changes to your code without fear of breaking existing functionality.
• Code Quality: Encourages writing modular, testable code.
• Documentation: Tests can serve as living documentation for how your code is supposed to work.
• Collaboration: Helps teams ensure consistency and functionality across different contributions.

Types of Testing:

• Unit Testing: Tests individual, isolated units of code (e.g., a single function, a small class) to ensure they work correctly in isolation.
• Integration Testing: Tests how different units or modules work together, ensuring that their interactions are correct.
• End-to-End (E2E) Testing: Simulates real user scenarios by interacting with the entire application (from UI to backend) to ensure the complete system functions as expected.

Jest: Unit and Integration Testing Framework

Jest is a popular and powerful JavaScript testing framework developed by Facebook. It's often used for testing React applications but is versatile enough for any JavaScript project. Jest comes with a built-in assertion library, mocking capabilities, and a test runner.

Key Jest Concepts:

• `describe()`: Groups related tests.
• `it()` or `test()`: Defines an individual test case.
• `expect()`: Used for assertions, comparing the actual output to the expected output.
• Matchers: Methods chained to `expect()` to perform specific comparisons (e.g., `.toBe()`, `.toEqual()`, `.toContain()`, `.toBeTruthy()`).

Example (Conceptual - Jest runs in Node.js environment):

// math.js (the code we want to test)
export function add(a, b) {
  return a + b;
}

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

// math.test.js (the test file)
import { add, subtract } from './math'; // Assuming Node.js module resolution

describe('Math operations', () => {
  test('should correctly add two numbers', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(-1, 5)).toBe(4);
  });

  test('should correctly subtract two numbers', () => {
    expect(subtract(10, 5)).toBe(5);
    expect(subtract(5, 10)).toBe(-5);
  });

  test('add should return a number', () => {
    expect(typeof add(1, 2)).toBe('number');
  });
});

To run Jest tests, you typically install it via npm (`npm install --save-dev jest`) and configure your `package.json` scripts.

Cypress: End-to-End Testing Framework

Cypress is a next-generation front-end testing tool built for the modern web. It's specifically designed for end-to-end testing, allowing you to write tests that simulate real user interactions directly in the browser. Cypress provides a powerful dashboard, time-travel debugging, and automatic waiting.

Key Cypress Concepts:

• `cy.visit()`: Navigates to a URL.
• `cy.get()`: Selects DOM elements using CSS selectors.
• `cy.click()`, `cy.type()`: Simulate user interactions.
• `cy.contains()`: Asserts that an element contains specific text.
• `should()`: Used for assertions on elements.

Example (Conceptual - Cypress runs in its own test runner):

// cypress/e2e/todo.cy.js
describe('Todo App', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000'); // Visit your application's URL
  });

  it('should add a new todo item', () => {
    const newItem = 'Learn Cypress';
    cy.get('#todo-input').type(newItem); // Type into the input field
    cy.get('#add-todo-button').click(); // Click the add button
    cy.get('#todo-list li').should('have.length', 1); // Assert list has one item
    cy.get('#todo-list li').first().should('have.text', newItem); // Assert text content
  });

  it('should not add an empty todo item', () => {
    cy.get('#add-todo-button').click();
    cy.get('#todo-list li').should('have.length', 0); // List should remain empty
    cy.on('window:alert', (str) => { // Handle the alert
      expect(str).to.equal('Please enter a task!');
    });
  });
});

Cypress provides a visual test runner that shows your application running as the tests execute, making it very intuitive for debugging E2E flows.

Integrating testing into your JavaScript development workflow, whether through unit tests with Jest or E2E tests with Cypress, is a best practice that leads to more reliable, maintainable, and higher-quality web applications.

// For the 'add' function:
// test('add(2, 3) should return 5');
// test('add(-1, 1) should return 0');
// test('add(0.1, 0.2) should return 0.3 (handle floating point precision if needed)');

// For a UI component that displays results:
// test('displayResult(5) should update the result element to "5"');
// test('displayError("Invalid input") should show an error message');

// it('should correctly calculate 5 + 3 and display 8');
//   cy.get('#num1-input').type('5');
//   cy.get('#num2-input').type('3');
//   cy.get('#add-button').click();
//   cy.get('#result-display').should('have.text', '8');

// it('should show an error for invalid input');
//   cy.get('#num1-input').type('abc');
//   cy.get('#add-button').click();
//   cy.get('#error-message').should('be.visible').and('contain.text', 'Invalid input');