APIs for interacting with the Document Object Model.

DOM Manipulation Methods

literals are a concise syntax for creating values or data structures directly in code, without using constructors or variables. They represent fixed values that can be assigned to variables, used in expressions, or as part of objects/arrays. Here's a breakdown of common literals:
1. String Literals
Use quotes (', ", or `) to define text.

    Single/double quotes: 'Hello', "World".
    Template literals: `Hello ${name}` (supports interpolation).

2. Numeric Literals
Represent integers, decimals, or special forms:

    Integers: 42, 0b1010 (binary), 0xA (hex).
    Floats: 3.14, 2.5e3 (scientific notation).
    BigInt: 123n (for large integers).

3. Boolean Literals
true or false to represent logical values.
4. Object Literals
Create objects with {} syntax:

literals

It is used to control the flow of the code.  
When the condition inside the `if` block is true, it will execute the code inside the `{}` curly braces.  
If the condition is **not** met, it will **not** run that block of code.  

If you want to run a different block of code when the `if` condition is **not** met, you can write that code inside the `else` block.

**Syntax:**

```js
if (condition) {
  // block of code that runs when condition is true
} else {
  // block of code that runs when condition is false
}
```

**Example:**

```js
if (name === "Alan") {
  console.log("Your name is Alan"); // when the condition is true
} else {
  console.log("You are not Alan"); // when the condition is false
}
```

Also, you can write another condition inside the `else` block using another `if`.  
This is useful when you want to check multiple things one after another.

**For example**, if you want to check if a person’s age is above 20, and if not, then check if they are at least 18, you can write it like this:

```js
if (age >= 20) {
  console.log("Above 20 aged");
} else {
  if (age >= 18) {
    console.log("You are aged more than 18 but not more than 20");
  }
}
```

That’s how you can use `if-else` statements. It’s a **crucial** part in every programming language and can be used in many ways — nested, non-nested, etc.


if...else Statement

**Shorthand for if-else statements**  
This is a quick way to check a condition and choose between two values.  

**Format:**  
`condition ? valueIfTrue : valueIfFalse`

**Example:**  
`age >= 18 ? "You are an adult" : "You are a minor"`

**Explanation:**  
- First, write the condition you want to check (e.g., `age >= 18`)  
- Then, after the `?`, write what should happen if the condition is true  
- After the `:`, write what should happen if the condition is false

Ternary Operator

Values considered true or false in boolean contexts.

Truthy & Falsy Values

Skips the current iteration of a loop and continues with the next one.

Continue Statement

You can **display the current date and time in JavaScript** in a couple of simple ways. One common method is by using the **`new Date()`** function. Here, **`new`** is a keyword used to **create an instance of the `Date` object**, which is responsible for handling date and time. When you use `new Date()` alone, it returns the current date and time in **ISO format**, like:

> `"2025-04-24T09:32:45.123Z"`

However, if you want the output to be **more human-readable**, you can use:

```javascript
new Date().toString()
```

This will return something like:

> `"Thu Apr 24 2025 19:08:57 GMT+0530 (India Standard Time)"`

---

Another way to work with date and time is by using **specific methods** of the Date object. These include:

- **`getDate()`** – Gets the day of the month  
- **`getMonth()`** – Gets the month (0–11, where January is 0)  
- **`getFullYear()`** – Gets the four-digit year  
- **`getHours()`**, **`getMinutes()`**, **`getSeconds()`** – Get time components

You can combine these methods to create a **custom format** like this:

```javascript
const date = new Date();
const formatted = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
console.log(formatted);
```

This would print something like:

> `24/4/2025 19:8:57`



Print Current Time

var has function scope and hoisting; let has block scope; const declares read-only bindings.

var vs let vs const

Different ways to create objects in JavaScript.

Object Creation

Built-in methods for object manipulation and inspection.

Object Methods

Function that splits a sentence into an array of words, handling punctuation.

Convert Sentence to Array of Words

Function to retrieve the second digit from a numeric value.

Extract Second Digit of Numbers

Function to remove the nth element from an array.

Remove nth Element from Array

map() returns a new array, while forEach() executes a function for side effects.

Map vs forEach

Maps values then flattens the result by one level.

flatMap() Method

Function to determine if a string reads the same forwards and backwards.

Check if a String is Palindrome

Transforms camel-cased strings to snake_case using regex and string manipulation.

Convert PascalCase to snake_case

Function to find the longest word in a given text.

Longest Word in a String

Using Array.reduce() to find the maximum value in an array.

Reduce Function for Finding Largest

Returns the right-hand operand when the left-side value is null or undefined.

Nullish Coalescing Operator

Concise function syntax with lexical this binding.

Arrow Functions

### What is a Pure Function?

Pure functions are the functions that follow **2 main rules**:

1. **It will give the same output for the same arguments always.**  
   Example:  
   ```js
   function test(a, b) {
     return a + b;  // 8 is the answer always when we pass 5 and 3
   }

   test(5, 3);  // always returns 8
   ```

2. **It will not make any side effects.**  
   That means:
   - It will not modify any external variables (variables that are outside the function).
   - It will not access network (like calling an API).
   - It will not access file systems.
   - It will not manipulate the DOM.

   Example of a function **not pure**:
   ```js
   let count = 0;

   function test() {
     count++;  // modifies external variable
     return count;
   }
   ```

   Example of a **pure function**:
   ```js
   function test(count) {
     return count;  // does not change anything outside
   }
   ```

---

### How Pure Functions Become Useful:

- ✅ **Predictable behavior** – If you give the same input, you always get the same output. No surprises.
- ✅ **Helps in functional programming** – Because they are independent and don’t rely on anything outside.
- ✅ **Easy to debug** – Since there are no side effects, you don’t need to worry about other parts of code affecting it.


Pure Functions

Functions treated as first-class citizens (can be passed as arguments, returned, etc.).

First-Class Functions

Function composition combines functions to create a pipeline, while currying transforms a multi-argument function into a sequence of single-argument functions.

Function Composition vs Currying

Used to generate an error or exception programmatically.

Throw Keyword

Checks if an object's prototype chain contains the prototype property of a constructor.

instanceof Operator

Function designed to initialize new objects using the new keyword.

Constructor Function

Syntactic sugar for constructor functions and prototype-based inheritance.

Class Syntax

Constructor provided by default when none is explicitly defined in a class.

Default Constructor in JavaScript

Refers to the parent class constructor or methods in class inheritance.

Super Keyword

Ensuring a class has only one instance with global access point.

Singleton Class Pattern

Creates objects with shared structure but different implementations.

Factory Function Pattern

Using a method from one object on another object by explicitly setting the context.

Function Borrowing in JavaScript

Alternative name for a variable, object, or function.

Alias in JavaScript

Automatic conversion between data types during operations.

Implicit Type Conversion

Function to determine if two objects have the same properties and values.

Compare Two Objects

Technique to organize code and avoid global namespace pollution.

Namespaces in JavaScript

Best practices for writing readable and maintainable code.

JavaScript Coding Conventions

Both store key-value pairs, but sessionStorage clears when session ends.

LocalStorage vs SessionStorage

Programming paradigm where program flow is determined by events or messages.

Event-Driven Programming

Phase of event propagation where the event moves from parent to child elements.

Event Bubbling

Phase of event propagation where the event moves from outermost element to target.

Event Capturing

Attaching a single event listener to a parent element that handles events from descendant elements.

Event Delegation

Creates a promise that immediately rejects with a specified reason.

Promise.reject()

Returns a promise that resolves when all provided promises resolve.

Promise.all()

Promise.any() returns when any promise fulfills, while Promise.race() returns when any promise settles (fulfilled or rejected).

Promise.any() vs Promise.race()

Used to specify functions called when a promise settles.

then() Method

Protocol for transmitting resources on the web using methods like GET, POST, etc.

HTTP Concepts

Working with file downloads and streaming in web applications.

File Response Handling

Process of selecting the best representation of a resource based on client capabilities.

Content Negotiation

Terminate a repeating timer after a specified duration.

Stop setInterval After 5 Seconds

Schedules a callback to execute after I/O events but before timers.

setImmediate()

Schedules a callback to execute after the current operation but before the event loop continues.

process.nextTick()

Primitive data type representing a unique, immutable token.

Symbol Primitive

Method that returns the default iterator for an object.

Symbol.iterator

Identifiers for statements, used with break or continue.

Labels in JavaScript

Enables strict mode which imposes stricter parsing and error handling.

Use Strict Directive

Evaluates JavaScript code represented as a string.

eval() Function

Removing potentially dangerous HTML content to prevent XSS attacks.

HTML Sanitization

Finds single differing character between two strings.

Find Extra Letter in String

**Deep freeze and shallow freeze are related to objects in JavaScript.**
By using shallow freeze, you can freeze an object.

Example:

```javascript
let obj = {
  name: "John",
  address: {
    Street: "221B Baker Street",
    City: "London"
  }
};
```

Here, by using `Object.freeze(obj)`, it will freeze editing the object.
But we can still edit nested key-value pairs.

For example:

* `name` is now frozen—we can't edit it using `obj.name = "new name"` ❌
* But we can still edit `obj.address.City = "New York"` ✅

This is still possible because we are editing a nested object directly—that’s called **shallow freeze**.

---

On the other hand, in **deep freeze**, we can’t edit both keys in the nested object also.
If you are using deep freeze, here we are recursively freezing each nested object—no matter how deeply nested it is.

### Deep Freeze Example:

```javascript
function deepFreeze(obj) {
  Object.freeze(obj);

  for (let key in obj) {
    if (
      obj.hasOwnProperty(key) &&
      typeof obj[key] === "object" &&
      !Object.isFrozen(obj[key])
    ) {
      deepFreeze(obj[key]);
    }
  }

  return obj;
}

let obj = {
  name: "John",
  address: {
    Street: "221B Baker Street",
    City: "London"
  }
};

deepFreeze(obj);

obj.name = "New Name";             // ❌ won't work
obj.address.City = "New York";     // ❌ won't work

console.log(obj);
```


Deep Freeze vs Shallow Freeze


Arrays where indices are not contiguous or have undefined elements.

Sparse Arrays

Arrays of arrays where each subarray can have different lengths.

Jagged Arrays

Arrays containing elements of different data types.

Heterogeneous Arrays

Array-like objects with fixed data types for binary data manipulation.

Typed Arrays

Data structure that implements an associative array.

Hashmap Implementation

Publish-subscribe pattern implementation for event-driven architecture.

EventEmitter Usage

System design where components interact through events and callbacks.

Event-Driven Architecture

**Error-first callback** can be used in JavaScript, especially in the Node.js environment. When we pass callbacks in a function, in **error-first callbacks**, the **first argument** is always the **error**, followed by other things like **data, variables, etc.**

In that specific function, we **first check** if there is an error. If there’s **no error**, then only the **main code block** will run.

For example, if we are accessing a file from the local machine using the **`fs` module**, the first argument will be the error. Then we will show the main data that we accessed **only if there’s no error**.

Here’s a code example:

```js
function accessData(error, data) {
  if (error) {
    console.log(error);  // If there is an error, data access will not work
  } else {
    console.log(data, "data is accessed");  // If no error is found, then this code block will run
  }
}
```

**Error-first callback** is the safest and standard way to help with **smooth execution** of the code and to **prevent it from crashing**.


Error-First Callback Pattern

Converting callback-based APIs to return Promises instead.

Promisify Callback Functions

Control flow abstraction for asynchronous operations and iteration.

Practical Generator Functions

Function to determine if a linked list reads the same forwards and backwards.

Check if a Linked List is Palindrome

Intercepts and defines custom behavior for fundamental operations (e.g., property lookup, assignment).

Proxy Object

Using Proxy to validate object property assignments.

Proxy for Input Validation

Use weak references for keys, allowing garbage collection if only referenced in the collection.

WeakSet and WeakMap

References that don't prevent garbage collection of the referenced object.

Weak References

Security vulnerability where malicious input modifies Object.prototype.

Prototype Pollution

Potential memory leaks and increased memory usage.

Disadvantages of Closures

Coordinates the call stack with web APIs. Microtasks (process.nextTick, Promises) execute before macrotasks (setTimeout).

Event Loop & Microtasks

Situation where a process is indefinitely delayed due to resource allocation.

Starvation in Concurrency

bind() returns a new function with preset this value and arguments.

Return DataType of bind()

Programs that can read or modify their own code.

Meta-Programming

Ability of a program to inspect and modify its own structure.

Reflection in JavaScript

Transpilers (like Babel) convert code between similar languages, while compilers target machine code.

Transpiler vs Compiler

Optimization technique that removes code that doesn't affect program results.

Dead Code Elimination

Adapting software to different languages, regional differences, and technical requirements.

Internationalization (i18n)

APIs for interacting with the browser environment beyond the DOM.

Browser Object Model (BOM)

Implementation of navigational breadcrumbs in JavaScript.

Breadcrumbs Navigation

ASCII represents 128 characters, while Unicode represents over 143,000 characters.

ASCII vs Unicode

Variable-length character encoding for Unicode that is backward compatible with ASCII.

UTF-8 Encoding

Line feed (LF) and carriage return + line feed (CRLF) are line ending conventions.

LF vs CRLF

### 🔁 What is the `break` statement?

The `break` statement is used to **stop a loop right away** when a certain condition is true.

---

### 🧠 Example:  
Imagine you have a `for` loop that counts numbers from **1 to 10**.  
But you want to **stop the loop** when the number reaches **6**.

---

### 💻 Code:
```js
for (let i = 0; i < 10; i++) {
  if (i == 5) {
    break; // stops the loop when i reaches 5 — till 0 to 4 the loop will work
  }
}
```

---

### 📌 What happens here?
- The loop starts from `i = 0`
- It runs again and again, increasing `i` by 1 each time
- When `i` becomes `5`, the `if (i == 5)` condition becomes **true**
- The `break` statement runs → 💥 **loop stops immediately**
- It **won’t go up to 10**, it just **stops at 5**

> ✅ So instead of going through all the numbers from 1 to 10,  
> the loop **ends early** because of the `break` statement.


JavaScript Tutorial ✦

DOM Manipulation Methods