JavaScript

JavaScript is the programming language of the web.
It can update and change both HTML and CSS.
It can calculate, manipulate and validate data.
extension - .js
Single line comments start with //.
Multi-line comments start with /* and end with */.
JavaScript is a case sensitive language.

TypeScript

JavaScript is a dynamically typed language used for web development, whereas TypeScript is a superset of JavaScript that adds static typing, making code more maintainable and reducing runtime errors; however, TypeScript requires compilation (.ts → .js) before execution.
JavaScript (dynamic, quick for small tasks) vs. TypeScript (adds static types, catches errors early, scales for large apps). TS compiles to JS but boosts code safety and teamwork. Use JS for simplicity, TS for complex projects. We can also learn TypeScript in future.

How to use

Internal : JavaScript code is inserted between <script> code </script> tags.
You can place any number of scripts in an HTML document.
Scripts can be placed in the body, or in the head section of an HTML page, or in both.

External : External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name or path of the script file in the src (source) attribute of a <script> tag: <script src="app.js"></script>
You can place an external script reference in head or body as you like. But best practice is At the End of body(The page content loads first, preventing render-blocking delays.).

let

let age = 25; or let age; e.t.c
let is block-scoped, meaning it is only accessible within the block (or curly braces) where it is declared. It can be updated but not redeclared within the same block.

const

const pi = 3.14;
Its value cannot be reassigned after initialization.
It must be initialized when declared.
const is also block-scoped like let.

var

var name = "John"; or var name; e.t.c
var is function-scoped, meaning it is accessible within the function where it is declared.
It can be redeclared and updated.

Data Types

String - Use double (" ") or single (' ') quotes. Example: let str = "Inderjit 'Singh' "; or let str = 'Inder'; It can also store numbers or be empty: "23", "a", "".
Indexing in JavaScript starts from 0 it can also apply on strings also. e.g str[1] = n
We can also get string length using name.length
String Concatenation - using (+) sign. e.g - "inder" + "jit" = inderjit also like "inder" + 1(number) = inder1

Number - Represents positive, negative, integer, and floating-point numbers. Example: let num = 42; or let num = -3.5;. JavaScript has a maximum limit for numbers.

BigInt - Used for very large numbers beyond the Number type's limit. Example: let bigNum = 9007199254740991n;

Boolean - Represents true or false values. Example: let isCodingFun = true;

Undefined - A variable that has been declared but not assigned a value. Example: let x; // undefined

Null - Represents an empty or unknown value. Example: let data = null;

Symbol - Used to create unique identifiers. Example: let sym = Symbol('id');

Object - A complex data type used to store key-value pairs. Example: let person = { name: "Inder", age: 20 };

JavaScript automatically detects the data type when a variable is assigned a value.
We can change the type of variables in JavaScript. Example: let value = "Hello"; // String, then value = 25; // Now Number

Nan

NaN stands for "Not-a-Number." It is a special value that represents an undefined or unrepresentable number, especially when a mathematical operation cannot return a valid number.
e.g = let result = 0 / 0; - result will be NaN,
let number = Number("hello"); // number will be NaN
To check if a value is NaN, you cannot directly use the equality operator (===) because NaN is not equal to itself. Instead, you should use the Number.isNaN() method:
let value = NaN;
console.log(Number.isNaN(value)); // true

Types of JavaScript Operators

Comparing Strings

JavaScript compares strings character by character based on Unicode values.
e.g - onsole.log("apple" > "banana"); // false (because "a" < "b" in Unicode)
a(61) < b(62) < c(63) e.t.c OR A(41) < B(42) < C(43) e.t.c OR A < a e.t.c.
also console.log('*' < '&') // false e.t.c.

Operator Precendence

For some operators : () > ** > *, /, % > +, -
if two operators with same precedence then calculate from left to right
there are more operators with different precedence levels.

rules:-

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with $ and _ (but not start with numbers).
Names are case sensitive (y and Y are different variables).
Reserved words (like JavScript keywords) cannot be used as names.

camelCase

We use camelCase for identifier names (variables and functions) in JavaScript.
Camel Case: Use camel case for variable and function names. The first letter is lowercase, and each subsequent word starts with an uppercase letter.
e.g - firstName, totalPrice, lastWord e.t.c.
It's not mandatory, but following these practices can help improve coding standards.

console.log()

console.log() is used to print output to the browser's console. It is mainly used for debugging.
e.g: console.log("Hello World");, console.log(num);, console.log(1+2);, console.log("Hello", num, (1+2)); e.t.c.

1. String Interpolation (Embedding Variables & Expressions)

Template literals allow you to embed variables and expressions directly within a string using ${}.
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
Output: Hello, my name is Alice and I am 25 years old.

2. Multi-line Strings (Without \n or Concatenation)

Template literals preserve newlines and whitespace automatically.
e.g: const message = `This is a multi-line,
string in JavaScript.`;
console.log(message); - No need for + operators or \n!

3. Expression Evaluation (Math, Functions, etc.)

You can perform calculations and function calls inside ${}.
e.g : console.log(`The sum of ${x} and ${y} is ${x + y}.`);

If, else, else if statements

Switch statements

alert()

The alert() function displays a simple message in a dialog box with an "OK" button.
e.g - alert("This is an alert!");

console.error()

Used to log error messages. It highlights the message in red and may include a stack trace.
console.error("This is an error message!");

console.warn()

Used to log warning messages. It displays messages in yellow.
console.warn("This is a warning message!");

prompt()

The prompt() function is used to get user input via a popup dialog box with a text field.
let userInput = prompt("Enter your name:");
Returns null if the user clicks "Cancel".
We can manupulate all these methods in many ways or use their combination we can also learn that.

String length

The length property returns the length of a string.(it is a property not method but i included here)
syntax - stringName.length;

trim()

The trim() method removes whitespace from both sides of a string.
let text1 = "   Hello   "; let text2 = text1.trim(); // text2 = "Hello"

toUpperCase() and toLowerCase()

A string is converted to upper case with toUpperCase().
A string is converted to lower case with toLowerCase().
e.g = str = "HELLO world"
str.toUpperCase() - HELLO WORLD, str.toLowerCase() - hello world

inderOf(arg)

The indexOf() method returns the index (position) of the first occurrence of a string in a string, or it returns -1 if the string is not found.
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate"); // output: 7

slice()

slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: start position, and end position (end not included).
e.g - let text = "Apple, Banana, Kiwi";
one argument - text.slice(7, 13); - "Banana"
only one argument - text.slice(7) - "Banana, Kiwi" (in this last = length of string);
negative argument - text.slice(-5) - "Kiwi" (because length(here 19) - 5 = 14) == text.slice(14);

replace()

The replace() method replaces a specified value with another value in a string.
e.g - let str = "i love coding"
str.replace("love","do") - output: "i do coding";
It only replace first occurance by default.
e.g - str.replace("o","x") - output: "i lxve coding" (only changed first o).

repeat()

The repeat() method returns a string with a number of copies of a string.
e.g - let str = "Hello"
str.repeat(5) - output: "HelloHelloHelloHelloHello"

All methods

charAt(), charCodeAt(), concat(), includes(), indexOf(), lastIndexOf(), localeCompare(), match(), matchAll(), normalize(), padEnd(), padStart(), repeat(), replace(), replaceAll(), search(), slice(), split(), startWith(), endsWith(), substring(), substr(), toLowerCase(), toUpperCase(), toLocaleLowerCase(), toLocaleUpperCase(), trim(), trimStart(), trimEnd(), valueOf(), split(), anchor(), big(), blink(), bold(), fixed(), fontcolor(), fontsize(), italics(), link(), small(), strike(), sub(), sup().
we can learn more methods.

Method Chaining

Method chaining in JavaScript refers to the technique of calling multiple methods on the same object or value in a single line of code.
let str = "   Hello World!   "
let result = str.trim().toUpperCase().replace("WORLD", "EVERYONE");
console.log(result); // "HELLO EVERYONE!"
Method chaining works if the methods return the object or value that the next method expects.

Arrays

An array is a special variable that can hold multiple values in a single reference.
Arrays in javascript are zero-indexed.
Arrays are mutable in javascript.
Arrays in JavaScript are dynamic (can change size) and can store different data types.
e.g = let arr = ["Apple", 23, 89.5]; - (array with different datatypes).

Creating an Array

Using Array Literal (Preferred Method):-
let fruits = ["Apple", "Banana", "Cherry"];

Using new Array() Constructor:-
let numbers = new Array(1, 2, 3, 4, 5);

Empty Array and Adding Elements:-
let arr = [];
arr[0] = "Hello";
arr[1] = "World";

Accessing Array Elements

1. console.log(fruits[1]); // Output: Banana

2. console.log(fruits[2][0]); // Output: C - (we can access index of elements of arrays like this).

3. array.length - Returns the number of elements in the array.(it is a property)
e.g fruits.length - 3
also length of elements - fruits[0].length - 5
also we can directly see length [1,2,3,4].length - 4

Modifying Arrays

As arrays are mutable.
let array = ["Apple", "Mango", "Cherry"];
array[0] = "Banana";
console.log(array) // Output: ["Banana", "Mango", "Cherry"] (array is changed).

we can add element in any index:-
array[10] = "Grapes";
console.log(array) // Output: ["Banana", "Mango", "Cherry", empty x 7, "Grapes"] (now the array.length = 11)
if we add element at index like greater then previous length then it is added to that index but there may empty spaces.
console.log(array[5]) //Output: undefined (as no element is present even array length is 11).

push()

The push() method adds a new element to an array (at the end).
let fruits = ["Banana", "Orange"];
fruits.push("Kiwi");
console.log(fruits); // Output: ["Banana", "Orange", "Kiwi"]

pop()

The pop() method removes the last element from an array and return it.
fruits.pop()
console.log(fruits); // Output: ["Banana", "Orange"]

unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements.
fruits.unshift("Apple")
console.log(fruits); // Output: ["Apple", "Banana", "Orange"]

shift()

The shift() method removes the first array element and return it, "shifts" all other elements to a lower index.
fruits.unshift()
console.log(fruits); // Output: ["Banana", "Orange"]

indexOf()

the .indexOf() method is used to find the index of a specific element in an array.
syntax - array.indexOf(element, fromIndex).
element - The value to search for.
fromIndex (optional) - The index to start searching from (default is 0).
e.g - fruits.indexOf("Orange"). //output: 1
it returns - The first index where the element if found OR -1 if the element is not found.

includes()

the .includes() method is used to check if an array contains a specific element.
syntax - array.includes(element, fromIndex)
element - The value to search for.
fromIndex (optional) - The index to start searching from (default is 0).

e.g - fruits.includes("Orange"). //output: true
it returns - true or false.

concat()

the .concat() method is used to merge two or more arrays without modifying the original arrays.
syntax - newArray = array1.concat(array2, array3, ...);
we write which array first their element become first

e.g - let fruits2 = ["Apple", "Mango"];
let result = fruits.concat(fruits2);
console.log(result); // Output: ["Banana", "Orange", "Apple", "Mango"]

reverse()

the .reverse() method is used to reverse the order of elements in an array.
syntax - array.reverse();
It modifies the original array and returns the same array.

e.g - result.reverse(); // Output: ["Mango", "Apple", "Orange", "Banana"]

slice()

.slice() method is used to extract a portion of an array without modifying the original array.
syntax - array.slice(startIndex, endIndex);
startIndex (optional) - The index where extraction begins (inclusive).
endIndex (optional) - The index where extraction stops (exclusive).
If no parameters are given, it returns a copy of the entire array.

let num = [1,2,3,4]; e.g - result.slice(); // Output: [1, 2, 3, 4]
e.g - result.slice(2); // Output: [3, 4]
e.g - result.slice(1,3); // Output: [2, 3]
e.g - result.slice(-4,-2); // Output: [1, 2]

splice()

The .splice() method is used to add, remove, or replace elements in an array by modifying the original array.
syntax - array.splice(startIndex, deleteCount, item1, item2, ...);
startIndex - The position where changes begin.
deleteCount (optional) - The number of elements to remove.
item1, item2, ... (optional) - Elements to insert at startIndex.

e.g :-
let arr = [10, 20, 30, 40, 50]; let removed = arr.splice(2, 2); console.log(arr); // Output: [10, 20, 50] (modified)
console.log(removed); // Output: [30, 40] (removed elements)
arr.splice(2, 0, 3, 4);
console.log(arr); // Output: [10, 20, 3, 4, 50] (deleted 0 added 3,4).
arr.splice(2);
console.log(arr); // Output: [10, 20] (Since deleteCount is not provided, all elements from index 2 onward are removed.)

sort()

The sort() method sorts an array alphabetically and modifies the original array.
syntax - array.sort OR array.sort(compareFunction);
compareFunction (optional) - A function that defines the sorting order.
By default, it sorts elements as strings in ascending order.

e.g :-
let fruits = ["Banana", "Apple", "Mango", "Orange"];
fruits.sort();
console.log(fruits); // Output: ["Apple", "Banana", "Mango", "Orange"]
let numbers = [100, 3, 20, 40];
numbers.sort();
console.log(numbers); // Output: [100, 20, 3, 40] ( Issue: Numbers are converted to strings and sorted based on the first digit (not numerical order)).

forEach()

The forEach() method in JavaScript is used to iterate over each element of an array. It executes a provided callback function once for each array element.

map()

The map method creates a new array by applying a callback function to each element of the original array. It transforms the elements and returns the result without modifying the original array.

filter()

The filter method creates a new array containing only the elements that pass a test (return true) in the callback function. It’s used to select a subset of elements without altering the original array.

every()

The every method checks if all elements in an array satisfy a given condition. It returns true if every element passes. false if at least one element fails the test. It stops processing as soon as it encounters the first element that doesn't meet the condition(this is called short-circuiting).

some()

The some method checks if at least one element in an array satisfies a given condition. It returns: true if at least one element passes. false if no elements pass. It stops processing as soon as it finds the first element that meets the condition (short-circuiting).

reduce()

The reduce() method is used to iterate through an array and accumulate a single value based on a callback function. It processes each element of the array (from left to right) and returns a single value result.

All array methods names

push(), pop(), unshift(), shift(), splice(), slice(), concat(), indexOf(), lastIndexOf(), includes(), find(), findIndex(), forEach(), map(), filter(), reduce(), some(), every(), sort(), reverse(), join(), split(), flat(), flatMap(), fill(), copyWithin(), toString(), toLocaleString(), Array.isArray().
We can also learn about them.

Array Reference

In JavaScript, arrays are reference types, meaning they are stored in memory as objects, and variables hold references (memory addresses) to these arrays rather than their actual values.
Assigning Arrays by Reference - When you assign an array to another variable, both variables point to the same array in memory.
e.g:-

Copying Arrays Without Reference - To create new independent copy of an array (instead of referencing the same memory), there are many methods for now Using .slice() or assign manually.

const Array

When you declare an array with const, the reference to the array remains fixed, meaning you cannot reassign it to a new array. However, the elements inside the array can still be modified.
declaretion - const arr = [1, 2, 3];
Modifying Elements (Allowed) - like push, pop, adding, removing elements.
Reassigning a Constant Array (Not Allowed) - like arr = [1,2]; on same array.

Multi-dimensional Arrays

A nested array is an array inside another array. It is also called a multi-dimensional array.

For loop

While loop

break keyword

The break statement in JavaScript is used to exit a loop immediately when a specific condition is met.

for of loop

The for...of loop in JavaScript is used to iterate over iterable objects like arrays, strings, maps, and sets.

Object Literals

An object literal is a way to define an object using a set of key-value pairs enclosed in curly braces {}.
Key-Value Pairs - Each property has a key (property name) and a value.
A single key can hold multiple values using arrays, objects, or other data structures.
objects are unordered collections do not maintain a fixed order,Objects do not have indexing like arrays.

A const object behaves like a const array - you can modify its contents but cannot reassign it.

Accessing Object Properties

You can access object properties using object.key or object["key"].

JavaScript Automatically Converts Object Keys to Strings :-

Add/Update values

Delete values

We can use the delete operator to remove a property from an object.

Nested Objects

Array of Objects

Object Functions(Methods)

Object methods are functions that are defined inside an object and can operate on the object's properties. They provide behavior to the objects.

Math Properties (Constants)

The syntax for any Math property is : Math.property.

Math Methods

The syntax for Math any methods is : Math.method(number).

random integer - to print any random numbers between any range we can manupulate Math.random
e.g - to print between x to y - Math.floor(Math.random() * (y - x + 1)) + x; e.t.c

Functions

There are several ways to define a function in JavaScript.

Assigned to a variable(Function Expression) :-

return - anything after return statement will not execute.

Default Parameters

Default parameters allow you to set default values for function arguments if no value or undefined is passed.

The default value is used if the argument is undefined but not if it is null or a falsy value like 0.

Higher-Order Functions

Higher-order functions in JavaScript are functions that can either take other functions as arguments, return a function as a result, or both.

Arrow Functions

Arrow functions(=>) are a shorter syntax for writing function expressions. They were introduced in ES6 and are often used for shorter, simpler functions.

No this Binding: Arrow functions do not have their own this. They inherit this from their lexical scope. If you need this to refer to the object, use a regular function instead.
Cannot be used as Constructors: They can't be used with the new keyword.

1. Global Scope

Variables declared outside of any function or block. Accessible from anywhere in the code.

2. Local Scope

Variables declared inside a function. Accessible only within that function.

3. Block Scope (ES6)

Variables declared with let or const inside curly braces {}. Accessible only within that block.

4. Function Scope

Variables declared with var are function-scoped. Accessible only within the function, but not restricted by blocks.

5. Lexical Scope

Inner functions have access to variables of their parent functions. This concept forms the basis of closures.

Scope Chain

If a variable is not found in the current scope, JavaScript looks up in the outer scope until the global scope.

1. Global Context

In the global scope (outside of any function), this refers to the global object (window in browsers, global in Node.js).

2. Inside a Method (Object Context)

When used inside an object method, this refers to the object calling the method.

3. Inside a Normal Function

In normal functions, the value of this depends on the calling object — the object that invokes the function. It is determined at runtime and is dynamic.

4. Inside a Arrow Functions

In arrow functions, this has lexical scoping. It inherits this from its parent scope (the scope where it was defined), and it cannot be changed by how or where it is called.

This has many other uses here short summary:-

try block

The try block contains code that might throw an error. JavaScript attempts to execute this code. If no error occurs, it runs normally, and the catch block is skipped. If an error does occur, execution stops in the try block, and control jumps to the catch block.

catch block

The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.It receives an error object as an argument(optional).If we used try then catch must also be used with it otherwise error come also.

finally Block (Optional)

You can add a finally block after try and catch. This block runs no matter what—whether an error occurred or not. It's commonly used for cleanup tasks, such as closing resources.

example

Common Use Cases:
Handling network requests or API failures.
Preventing application crashes due to undefined variables or incorrect data types.
Providing meaningful error messages to users.

Features of Window Object

Global Scope: All global variables and functions are properties and methods of the window object.

Implicit Reference: You can omit window while accessing its properties and methods.

Global variables declared with var become properties of the window object. However, variables declared with let or const do not.

properties and methods

Some Window Object properties and methods there are many more also

setTimeout

setTimeout() is a built-in JavaScript function that executes a piece of code or a function(callback) after a specified delay (in milliseconds).

Example 1: Using a Named Function

Example 2: Using an Anonymous Function(without name)

Example 3: Passing Arguments

Example 4: Clearing a Timeout

setInterval

setInterval() is a built-in JavaScript function that repeatedly executes a function or code snippet at a specified time interval (in milliseconds) until it's stopped.

Example 1: Using a Named Function (all Syntax same as setTimeout)

Example 2: Using an Anonymous Function (without name)

Example 3: Passing Arguments

Example 4: Clearing an Interval. If we not clear interval it will run infinitely

spread(...) operator

The spread operator (...) allows you to expand or unpack elements from arrays, objects, or iterables. It helps create copies of arrays/objects, merge them, and pass multiple elements as function arguments.

The spread operator only creates a shallow copy. Changes to nested objects affect the original. If an array contains objects, those objects are still referenced, not cloned.

rest(...) parameter

The rest parameter (...) is used in function definitions to gather multiple arguments into an array. It helps handle a variable number of arguments easily.

Spread VS Rest: Rest collects multiple elements into an array. Spread expands elements from an array or object.

1. Array Destructuring

2. Object Destructuring

3. Nested Destructuring

Document Object Model(DOM)

The DOM is essentially a representation of a webpage that a browser creates when it loads an HTML document. The DOM is a tree-like structure that represents the elements of a webpage as nodes. Each element (such as paragraphs, images, and headings) becomes an object that scripts can access and modify.

Document Object - The document object is the entry point to the DOM, representing the whole webpage in the browser. It allows JavaScript to dynamically access, modify, and update page content and structure. We can print it using console.dir(document);

getElementById

Finds a single element by its id attribute.
Returns: The element object if found, or null if no match.

getElementsByClassName

Finds all elements with a specific class name from the DOM.
Returns: It returns a live HTMLCollection (a dynamic list) of all elements that match the given class name. If no elements match, it returns an empty collection.

getElementsByTagName

Finds all elements with a specified tag name from the DOM.
Returns: It returns a live HTMLCollection of all elements matching the given tag name. If no elements match, it returns an empty collection.

Live Collection: The collection updates automatically if elements are added or removed.
Array-Like: It can be accessed using indices ([0], [1]), but it's not a real array.

querySelector

Finds the first matching element from the DOM based on a CSS selector. It is widely used and powerful, allowing you to use any valid CSS selector to target elements.
Returns: The first matching element, or null if no match.

querySelectorAll

Finds all matching elements from the DOM based on a CSS selector.
Returns: A NodeList (a static list-like object) of matching elements. If no matching elements are found, it returns an empty NodeList.

Returns a Static NodeList: This method returns a static list. It does not update automatically if the DOM changes.
Array-Like: The returned NodeList is array-like and can be iterated using forEach(), but it does not have all array methods like map() or filter().

1. innerText

Gets or sets the visible text content of an element, ignoring hidden elements, script/style tags, and HTML markup.
Behavior: It reflects what a user actually sees on the page, taking CSS visibility into account (e.g., it skips text with display: none).

2. textContent

Gets or sets the raw text content of an element, including all text within it (even hidden elements and script/style tags), but without interpreting HTML.
Behavior: It grabs everything as plain text, ignoring visibility or rendering rules.

3. innerHTML

Gets or sets the HTML content of an element, including tags, as a string. When setting it, the browser parses the string as HTML.
Behavior: It deals with markup, not just text, so you can add or manipulate elements and their structure.

When to use: When you need to work with HTML structure (e.g., adding tags, elements, or styling).
Note: Be cautious when setting innerHTML with user input—it can lead to security issues like XSS (cross-site scripting) if not sanitized.

1. getAttribute()

Retrieves the value of a specified attribute from an element.
Returns: The attribute's value as a string, or null if it doesn't exist.

2. setAttribute()

Sets or updates the value of an attribute on an element.
Behavior: If the attribute exists, it updates it; if not, it creates it.

3. hasAttribute()

Checks if an element has a specific attribute.
Behavior: true if the attribute exists, false if not (even if it's empty).

4. removeAttribute()

Removes a specified attribute from an element.

5. Using Properties Directly

For standard attributes (like id, className, src, value), you can access or modify them as properties of the element object.
Behavior: These are often more convenient than getAttribute/setAttribute, but they only work for well-known attributes.

6. Working with data-* Attributes

Custom attributes prefixed with data- can be accessed via the dataset property.

Style property

The style property in JavaScript allows you to directly manipulate the inline CSS styles of an HTML element. You access the style property through the DOM (Document Object Model) by selecting an element.

Limitations: It only affects inline styles, not styles from external CSS files or <style> tags unless overridden.

classList property

The classList property is a read-only property that returns a live collection (DOMTokenList) of the class names assigned to an HTML element. It provides methods to easily add, remove, toggle, and check class names.

The classList property is useful for dynamically applying or modifying styles defined in external stylesheets or CSS files.

DOM Navigation

DOM navigation refers to moving between elements in the HTML structure (like a family tree) using properties of DOM nodes.
This is useful for manipulating elements, including styles or classes, without relying solely on selectors like querySelector.

document.createElement()

To create elements using JavaScript, you can use the document.createElement() method.

1. append()

Appends multiple elements or strings as the last children of the parent. More flexible than appendChild() because it accepts multiple arguments and can also used to add strings.

2. appendChild()

Adds a single element as the last child of the parent element. Only works with a single element (not multiple elements or strings).

3. prepend()

Adds multiple elements or strings as the first children of the parent. Similar to append(), but inserts at the beginning.

4. insertAdjacentElement()

Inserts a single element at a specific position relative to the target element. Not able to add string directly like append().

there may other methods to append elements or strings....

1. removeChild()

Removes a specified child element from its parent. You need a reference to both the parent and the child element.

2. remove()

Removes the element directly from the DOM without needing a reference to its parent. Simpler than removeChild().

3. innerHTML = ""

Clears all content inside an element by setting its innerHTML to an empty string. Usage: When you want to remove all child elements and text inside a container.

also There are many other ways to remove elements...

Types of Events in JavaScript

A variety of events occur in JavaScript, categorized into different types:

Ways to use Events

Events in JavaScript can be handled in multiple ways, ranging from inline event handlers to advanced event delegation. Below are the different ways you can use events in JavaScript:

1. Inline Event Handlers

This is when you add event handlers directly in the HTML using attributes like onclick, onmouseenter, etc. Write the event attribute in the HTML tag and assign it a JavaScript expression or function call.

2. Using Event Properties

Select the element with JavaScript and set its event property to a function.

3. Using addEventListener() (Best Practice)

The modern, preferred method. You use addEventListener() to attach events programmatically. Select an element and call addEventListener(event, function) to bind the event. Multiple listeners can be added to the same event.

4. Event Delegation(Handling Multiple Elements)

Instead of adding individual event listeners to multiple elements, use event delegation by adding a single event listener to a parent element. More efficient for dynamically added elements

There are many other ways to use Events...

this keyword in Event Listners

event listener's this keyword refers to the same element that triggered the event (i.e., the element to which the event listener is attached).

event Object

The event object in JavaScript is an automatically passed argument in event handlers that contains details about the event (such as the type of event, the target element, and additional properties related to the specific event type). e.g - MouseEvent, KeyboardEvent, PointerEvent e.t.c depending on the type of event.

used to track user interactions like key presses, mouse actions, form submissions, scrolling, and more. e.g - in games we have to track ArrowDown, ArrowUp e.t.c

preventDefault()

The preventDefault() method prevents the default behavior of an event in JavaScript.It is commonly used in forms, links, key presses, and context menus.
Use Cases: Prevent form submission, Disable right-click menu, Block copy-paste e.t.c many more things that done by default after a event occurs.

Event Bubbling

When an event (like a click, mouseover, etc.) occurs on an element, it doesn't just affect that element—it "bubbles up" through its parent elements, all the way to the root of the DOM (usually the document or window object), unless stopped.

Stopping Bubbling: Use event.stopPropagation() to prevent the event from bubbling up further.

If you don't define an event listener on the parent, event bubbling still occurs, but nothing will happen at the parent level because there's no handler to respond to the event.

Call Stack and Breakpoints

The call stack in JavaScript is a data structure (specifically a LIFO - Last In, First Out stack) that keeps track of function calls in your program. It helps JavaScript manage the order of execution, especially when functions call other functions.

When Function is called JavaScript pushes the function onto the call stack. Once the function completes (returns a value or reaches its end), it's popped off the stack.
Single-Threaded Nature: JavaScript is single-threaded, meaning it can only process one thing at a time. The call stack reflects this by handling one function call at a time.

When a function is removed from the call stack, its execution context, including all variables defined inside it, is typically removed from memory, which is why we cannot access them outside the function.
However, if those variables are referenced by a closure or another persistent reference, they may remain in memory even after the function is popped off the stack.

Breakpoints

Breakpoints are intentional stopping points in your code that you set while debugging. They pause the execution of your JavaScript program at a specific line, allowing you to inspect the state of the program—like variable values, the call stack, and scope—at that moment. They're a key tool in developer tools (e.g., Chrome DevTools, VS Code debugger) to troubleshoot and understand code behavior.
Setting Breakpoints:-
1. In Browser DevTools: Open the "Sources" tab, navigate to your script, and click the line number where you want to pause.
2. Programmatically: Use the debugger statement in your code, which acts like a breakpoint when DevTools is open.

Types of Breakpoints: Line Breakpoint, Conditional Breakpoint, Function Breakpoint, Exception Breakpoint, Watchpoint (Variable Breakpoint). and many other also...
We will study and use breakpoints while debugging...

Single-Threaded

JavaScript is single-threaded, meaning it has one call stack and can only execute one piece of code at a time. This design simplifies some aspects of programming but introduces challenges, especially when dealing with time-consuming tasks or concurrency.

Event Loop: Asynchronous operations (e.g., timers, network requests) are offloaded to the browser or Node.js runtime, which uses additional threads internally, but the JavaScript code itself runs on one thread via the event loop.

Callback hell

Callback hell in JavaScript refers to a situation where multiple nested callbacks make the code hard to read, maintain, and debug. It often happens when dealing with asynchronous operations, like fetching data or handling events, where each step depends on the result of the previous one.

Problems with Callback Hell :-
1.Difficult to Read & Maintain - Code becomes messy due to deep nesting.
2.Hard to Debug - If an error occurs, tracing the issue through nested callbacks is difficult.
3.Pyramid of Doom - The nested structure makes the code look like a pyramid, reducing clarity. e.t.c

How to Fix Callback Hell - Promises, Async/Await, Modularize e.t.c

Promises in JavaScript

A Promise in JavaScript is an object that represents the eventual completion or failure of an asynchronous operation. It helps avoid callback hell and makes asynchronous code more readable.

.then() and .catch() in Promises

.then() and .catch() are used to handle Promises in JavaScript - .then() Executes when the Promise is resolved (fulfilled), .catch() Executes when the Promise is rejected (failed).

Promise Chaining

Promise chaining is a technique where multiple .then() methods are linked together to execute asynchronous tasks in a sequence.

async and await

An async function is a special type of JavaScript function that always returns a Promise, whether you explicitly return one or not. An async function lets you write asynchronous code that looks and behaves like synchronous code using the await keyword.

await keyword - The await keyword can only be used inside an async function.
It tells JS to: Wait for the Promise to resolve, Then move to the next line of code.
It lets you wait for a promise to resolve without nesting .then() calls.

Handling Rejections

Async functions handle errors gracefully with try...catch, just like synchronous code:

API

An API (Application Programming Interface) is a set of rules that allows one software application to communicate with another. It defines how requests and responses should be structured, making integration between different systems possible.

How They Work

• An API exposes specific "endpoints" (like URLs or functions) that a program can call.
• You send a request (e.g., "Give me the weather for New York") in a format the API understands (often HTTP with JSON or XML).
• The API processes it and sends back a response (e.g., "It's 72°F and sunny").

Sending Requests

Sending a request means your application (client) contacts a server (API) and asks for something — like data, a save operation, update, or deletion. The server then responds with data or a status.

1. fetch()
fetch() is a JavaScript function built into modern browsers that allows you to make HTTP requests to fetch resources (like data, images, etc.) from a server or API. It returns a Promise.

2. axios()
Axios is a JavaScript library used to send HTTP requests from the browser or Node.js to a server or API. It automatically parses json data.
we need to install it (using - npm install axios)
OR add this <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Types of APIs

• Web APIs: Most common today, accessed over the internet (e.g., Twitter API, Google Maps API).
• RESTful APIs: A popular style of web API using standard HTTP methods (GET, POST, etc.), known for being simple and scalable.
• Library APIs: Built into programming languages or frameworks (e.g., Python's os module).
• Operating System APIs: Let apps interact with your computer (e.g., Windows API).
• Operating System APIs: APIs provided by the OS (e.g., Windows API, Linux syscalls). other type may also

How Developers Use APIs

• Get an API key: (if required) to authenticate requests.
• Read the API's documentation: to learn its endpoints and rules.
• Write code to send requests: (e.g., using JavaScript's Fetch API, Python's requests library etc., to send requests and handle responses).

API testing tools

• Postman - A very popular and beginner-friendly tool used to test RESTful APIs. Supports GET, POST, PUT, DELETE requests and more. You can also automate tests and save collections.
• Hoppscotch - A fast, open-source alternative to Postman. Web-based, supports REST, GraphQL, and WebSocket testing. No need to download/sign up can use directly for quick usage.
• There are many more tools also we can learn them accordingly...

Why They're Useful and Real-World Examples

Efficiency: Developers can use pre-built services instead of coding everything from scratch.
Interoperability: Apps can share data—like how your weather app pulls data from a weather service.
Modularity: Keeps systems separate but connected, making updates easier.

Examples: Social Media(e.g X API lets developers pull posts or user info), Maps(e.gGoogle Maps API lets apps show locations or calculate routes), Payments(e.g Stripe's API lets websites process credit card payments), e.t.c

JSON

JSON stands for JavaScript Object Notation. It is a lightweight data-interchange format, easy for humans to read and write and easy for machines to parse and generate. JSON is often used to exchange data between a client and a server in web applications.

File extension - .json

JSON Syntax Rules

• Data is in name/value pairs.
• Data is comma-separated.
• Curly braces {} hold objects.
• Square brackets [] hold arrays.
• Names (keys) must be strings (in double quotes).
• Values can be:
  • String ("text")
  • Number, Float (10, 3.14)
  • Object ({})
  • Array ([])
  • Boolean (true or false)
  • null

JSON vs JavaScript Object

Accessing JSON Data

When data comes from an API, it usually arrives in string format — even though it looks like a JavaScript object. To use it, we must convert it into an actual JavaScript object.

JSON.parse()

JSON.parse() is a JavaScript method that takes a JSON string and converts it into a JavaScript object so that you can access it like javascript object.

JSON.stringify()

JSON.stringify() is a JavaScript method that takes a JavaScript object and converts it into a JSON string so that it can be sent to a server or stored.

Ajax

AJAX (Asynchronous JavaScript and XML) is a technique used in web development to send and receive data from a server without reloading the entire page. Despite the name, AJAX can work with JSON, XML, HTML, or plain text — not just XML.

Key features of Ajax

• Allows web pages to update dynamically
• Avoids full page reload
• Communicates with the server in the background
• Often used in forms, search suggestions, live updates, etc.

HTTP Verbs

HTTP verbs (also called HTTP methods) define the type of action you want to perform on a resource when communicating with a web server (usually via an API).

Common HTTP Verbs & Their Purpose:

• GET: Retrieve data from the server (e.g., get a list of users).
• POST: Send data to the server to create a new resource (e.g., add a new user).
• PUT: Update an existing resource completely (e.g., replace user details).
• PATCH: Update part of a resource (e.g., change just the user's email).
• DELETE: Remove a resource from the server (e.g., delete a user).
• there are other also...

HTTP Status Codes

HTTP status codes are 3-digit responses from the server that tell the client (browser or API) what happened with the request — whether it succeeded, failed, or something else.

Path Parameters

Path parameters are placeholders in the URL path that represent specific resources or identifiers.
Use Case: Accessing a specific resource (e.g., a user by ID).

Query Parameters

Query parameters are key-value pairs appended to the URL after a ?, separated by &. They're commonly used for filtering, sorting, or optional settings.
Use Case: Filtering results, pagination, or specifying options.

You can combine path and query parameters for complex requests.

We can manipulate an API link using variable query strings by dynamically adding key-value pairs in the URL based on user input or variables in your code.

HTTP Headers

HTTP headers are key-value pairs sent in the request or response of an HTTP transaction. In API requests, headers provide metadata about the request, such as:

• Authentication credentials (e.g., API keys, tokens).
• Content type of the request or response (e.g., JSON, XML).
• Instructions for caching, compression, or behavior.
• Unlike URL parameters or the request body, headers are not part of the URL but are included in the HTTP request's header section.
• They're essential for secure and efficient API communication.

In Console:-

Core OOP Concepts

• Encapsulation: Bundling data (properties) and methods (functions) that operate on that data into a single unit (object or class), restricting direct access to some of an object's components.
• Inheritance: A mechanism where one class inherits properties and methods from another, promoting code reuse.
• Polymorphism: The ability of different classes to be treated as instances of the same class through a common interface (e.g., method overriding).
• Abstraction: Hiding complex implementation details and exposing only the necessary parts to the user.

Some Benefits of OOPs in JavaScript includes:

• Improved code organization (structure of code)
• Reusability of code
• Better maintainability of code
• Closeness to real-world objects

Without Prototypes example

arr.__proto__ (Reference to the Prototype)

arr.__proto__ is a reference to Array.prototype, the prototype object for all arrays. Array.prototype contains methods like push, pop, slice, forEach, etc., which all arrays inherit.

Array.prototype.__proto__ is Object.prototype (since Array.prototype inherits from Object.prototype).

datatype.prototype

In JavaScript, every constructor function for a built-in data type (e.g., Array, String, Number, etc.) has a prototype property, which is an object. (e.g., Array.prototype, String.prototype e.t.c, that holds the shared functionality for objects of that type.)

Factory Functions

A factory function is just a normal function that returns an object.

Not commonly Used - As No automatic prototype sharing, So Each object returned by the factory has its own copy of methods. This wastes memory if many objects share the same method.

Constructor Functions

A constructor function is a regular function used to create multiple objects of the same type using the new keyword.

new Keyword

The new keyword is used to invoke a constructor function, creating a new object and setting up its prototype chain. When you call a function with new, JavaScript performs the following steps:

• Creates a new empty object: {}
• Sets the prototype: newObj.__proto__ = User.prototype
• Binds this: Sets this to the new object within the constructor function.
• Executes the Constructor: Runs the constructor function, initializing the object with properties/methods.
• Returns the Object: Implicitly returns the new object (unless the constructor explicitly returns another object).