Learning_Javascript

This repository is my personal collection of JavaScript notes, practice code snippets, and web development examples. It's built to help beginners and intermediate learners understand how JavaScript powers the web, and apply it in real-world scenarios like DOM manipulation, events, API handling, and more.

Explore this repo to learn, revise, and build your frontend development skills 💻✨

Table of content:

📚 Core JavaScript Learning Modules

#	Section	Topic	Description	Link
1	Fundamentals	JavaScript Basics	Core syntax, comments, variables	View
2	Fundamentals	DataTypes	Primitive & Non-primitive types	View
3	Fundamentals	Conditional Statements	if-else, switch statements	View
4	Fundamentals	Operators	Arithmetic, logical, comparison operators	View
5	Fundamentals	Type Coercion	Implicit vs explicit conversion	View
6	Fundamentals	Objects and Arrays	Object literals, array methods	View
7	Fundamentals	Loops	for, while, for...in, for...of loops	View
8	Fundamentals	Functions and Hoisting	Function types, scope, closures	View
9	DOM/BOM	Document Object Model	DOM manipulation, event handling	View
10	DOM/BOM	Browser Object Model	Window, location, navigator APIs	View
11	Advanced	Regular Expressions	Pattern matching, string validation	View
12	Advanced	OOP in JavaScript	Classes, inheritance, prototypes	View
13	Advanced	HTTP Requests	AJAX, Fetch API, async/await	View
14	Libraries	jQuery Basics	DOM manipulation with jQuery	View
15	Modern JS	ES6 for ReactJS	Modern JavaScript features	View

🎯 JavaScript Essentials by Category

#	Section	Topic	Description	Link
1	Basics	Keywords & Variables	word vs keyword concepts	View
2	Basics	Variable Declarations	var, const, let differences	View
3	Basics	Hoisting	Variable and function hoisting	View
4	Basics	Data Types	Primitive and reference types	View
5	Basics	Control Flow	Conditional statements	View
6	Basics	Iterations	Loop structures	View
7	Basics	Functions	Function declarations & expressions	View
8	Basics	Arrays	Array operations and methods	View
9	Basics	Array Methods	push, pop, shift, unshift	View
10	Basics	Objects	Object creation and manipulation	View

🔥 Intermediate JavaScript Concepts

#	Category	Topic	Concept	Link
1	Variables	Variable Declarations	Difference between var, let, const	View
2	Browser APIs	Window Object	Global window object and its properties	View
3	Memory Management	Stack Memory	Stack memory and primitive data storage	View
4	Memory Management	Heap Memory	Heap memory and object storage	View
5	Scope & Context	Lexical Environment	Lexical scoping and environment chains	View
6	Scope & Context	Execution Context	Call stack and execution context creation	View
7	Objects	Reference Values	How to copy reference values (shallow/deep)	View
8	Type System	Truthy and Falsy	Truthy/falsy values and type coercion	View
9	Control Flow	Switch Statements	Switch case statements and break	View
10	Loops	Advanced Loops	forEach, for...in, for...of, do...while	View
11	Functions	Callback Functions	Higher-order functions and callbacks	View
12	Functions	First Class Functions	Functions as first-class citizens	View
13	Arrays	Array Internals	How arrays are implemented internally	View
14	Objects	Property Deletion	How to delete object properties	View

🔥 Advanced JavaScript Concepts

#	Category	Topic	Concept	Link
1	Folder	Folder	Advanced of JS that matters	View

🚀 Problem Solving Questions - Organized by Difficulty Level

Basics Level (Q1-Q40)

Q#	Category	Problem	Concept	Link
1	Functions	Calculate sum of first N natural numbers	Basic function implementation	View
2	Conditional Logic	Check if number is even or odd	if-else statements	View
3	String Manipulation	Reverse a string	String methods and loops	View
4	String Manipulation	Check if string is palindrome	String comparison logic	View
5	Mathematical Operations	Find factorial of a number	Recursive or iterative approach	View
6	Mathematical Operations	Generate Fibonacci sequence	Sequence generation algorithms	View
7	Array Operations	Sum all numbers in array	Array iteration and accumulation	View
8	Array Operations	Find largest number in array	Array traversal and comparison	View
9	Array Operations	Find minimum value in array	Array search algorithms	View
10	Array Operations	Get last element of array	Array indexing	View
11	Array Operations	Remove first element from array	Array manipulation methods (shift)	View
12	Array Operations	Reverse an array	Array reversal techniques	View
13	Functions	Create arrow function	ES6 arrow function syntax	View
14	Objects	Add property to object	Object property manipulation	View
15	Objects	Delete property from object	Object property deletion	View
16	Objects	Create object and print property	Object creation and access	View
17	String/Array Conversion	Convert string to array of words	String split and array conversion	View
18	Conditional Logic	Write switch statement	Switch-case control structure	View
19	Mathematical Operations	Convert Celsius to Fahrenheit	Temperature conversion formula	View
20	Mathematical Operations	Convert Fahrenheit to Celsius	Temperature conversion formula	View
21	Mathematical Operations	Check if number is prime	Prime number algorithm	View
22	Mathematical Operations	Calculate power of a number	Exponentiation operations	View
23	String Analysis	Find words containing specific letter and its position	String search and indexing	View
24	Mathematical Operations	Reverse a number (1234 → 4321)	Number manipulation algorithms	View
25	Array Sorting	Sort array of characters alphabetically	Array sorting methods	View
26	Pattern Problems	Print right triangle star pattern	Nested loops and pattern logic	View
27	Pattern Problems	Print inverted star triangle	Pattern printing with loops	View
28	Pattern Problems	Print pyramid star pattern	Complex pattern algorithms	View
29	Pattern Problems	Print diamond star pattern	Advanced pattern printing	View
30	Pattern Problems	Print number triangle pattern	Number-based pattern logic	View
31	Pattern Problems	Print Floyd's triangle	Sequential number patterns	View
32	Mathematical Operations	Count digits in a number	Number analysis and counting	View
33	Array Operations	Find missing number in array	Array analysis and gap detection	View
34	Mathematical Operations	Swap two numbers without third variable	Variable swapping techniques	View
35	Conditional Logic	Check if year is leap year	Date logic and conditional checks	View
36	Mathematical Operations	Find GCD of two numbers	Greatest Common Divisor algorithm	View
37	Mathematical Operations	Find LCM of two numbers	Least Common Multiple algorithm	View
38	Loops	Print multiplication table	Loop-based table generation	View
39	String Analysis	Count words in a sentence	String parsing and word counting	View
40	String Manipulation	Remove spaces from string	String cleaning and manipulation	View

Medium Level (Q41-Q74)

Q#	Category	Problem	Concept	Link
41	Advanced Functions	Use callback function	Higher-order functions and callbacks	View
42	Array Methods	Filter even numbers from array	Array filtering with functional programming	View
43	Array Methods	Use map function on array	Array transformation and mapping	View
44	Array Methods	Sort array in ascending order	Array sorting algorithms	View
45	Array Methods	Sort array in descending order	Reverse sorting techniques	View
46	Array Methods	Sort array of strings alphabetically	String comparison and sorting	View
47	Array Methods	Remove duplicates from array	Set theory and array deduplication	View
48	Array Methods	Remove falsy values from array	Truthy/falsy evaluation and filtering	View
49	Array Methods	Merge two arrays	Array concatenation and spread operator	View
50	Array Methods	Find intersection of two arrays	Set operations and common elements	View
51	Array Methods	Find union of two arrays	Set operations and unique combinations	View
52	Array Methods	Merge arrays alternating elements	Advanced array manipulation patterns	View
53	String Analysis	Count character occurrences in string	Character frequency analysis	View
54	String Analysis	Count vowels in string	String parsing and pattern matching	View
55	String Analysis	Check if string contains substring	String search and inclusion methods	View
56	String Analysis	Find first non-repeated character	Character uniqueness and frequency analysis	View
57	String Analysis	Find longest word in string	String tokenization and length comparison	View
58	String Analysis	Get unique characters from string	String deduplication and Set operations	View
59	String Manipulation	Capitalize first letter of each word	String transformation and regex patterns	View
60	String Manipulation	Convert string to title case	Advanced string formatting techniques	View
61	Array/String Operations	Convert array of strings to uppercase	Array mapping with string methods	View
62	String Analysis	Check if two strings are anagrams	Character frequency comparison algorithms	View
63	Array Analysis	Find frequency of elements in array	Element counting and frequency maps	View
64	Array Analysis	Find max difference between array elements	Mathematical analysis and optimization	View
65	Array Analysis	Find largest and smallest in array	Multi-value array analysis	View
66	String Analysis	Count occurrences of each character	Comprehensive character frequency mapping	View
67	Array Operations	Calculate average of array numbers	Statistical calculations and array reduction	View
68	Array Operations	Find index of element in array	Array search and indexing methods	View
69	Array Analysis	Find second largest number in array	Advanced sorting and ranking algorithms	View
70	Array Methods	Group array elements by condition	Conditional grouping and data organization	View
71	Recursion	Calculate factorial using recursion	Recursive function design and base cases	View
72	OOP	Create simple class	ES6 class syntax and object-oriented programming	View
73	JSON Operations	Parse and stringify JSON	Data serialization and deserialization	View
74	Object/Array Conversion	Convert object to array	Data structure transformation techniques	View

Advanced Level (Q75-Q90)

Q#	Category	Problem	Concept	Link
75	Advanced Functions	Implement debounce function	Function throttling and performance optimization	View
76	Advanced Array Operations	Sort array of objects by key	Object property-based sorting algorithms	View
77	Advanced Objects	Implement deep clone function	Object cloning and reference handling	View
78	Advanced Array Operations	Merge two sorted arrays without built-in sort	Manual merge algorithms and optimization	View
79	Advanced String Operations	Check palindrome ignoring case and punctuation	Complex string normalization and comparison	View
80	Data Structures	Create linked list class	Custom data structure implementation	View
81	Advanced Array Operations	Flatten nested array	Recursive array processing and depth handling	View
82	Advanced String Analysis	Check if strings are anagrams (advanced)	Complex character analysis with edge cases	View
83	Optimization/Memoization	Fibonacci with memoization	Dynamic programming and performance caching	View
84	Algorithms	Implement binary search	Efficient search algorithms and divide-and-conquer	View
85	Array Algorithms	Rotate array by r positions	Array manipulation and circular rotation	View
86	Advanced String Manipulation	Reverse words in sentence without built-in reverse	Manual string processing without helper methods	View
87	Advanced Array Analysis	Find second smallest element in array	Advanced ranking and comparison algorithms	View
88	Utility Functions	Generate random alphanumeric string	Random generation and character set handling	View
89	Advanced Mathematical Operations	Convert number to Roman numerals	Complex number system conversion algorithms	View
90	Advanced Array Operations	Find largest element in nested array	Recursive traversal and nested data processing	View

Practical Level (Q91-Q99)

Q#	Category	Problem	Concept	Link
91	DOM/Timers	Create countdown timer	DOM manipulation with timer functions	View
92	Utility Functions	Generate random integer	Mathematical random number generation	View
93	String Analysis	Find longest word in sentence	String parsing and length comparison	View
94	String Manipulation	Truncate string	String slicing and text formatting	View
95	String Analysis	Check for unique characters	Character uniqueness validation	View
96	Security/Utility	Generate random password	Secure password generation algorithms	View
97	String Analysis	Count word occurrences	Text analysis and frequency counting	View
98	DOM Manipulation	Dynamically insert DOM components	Dynamic HTML element creation and insertion	View
99	Code Analysis	Analyze code output	Code execution flow and output prediction	View

🧠 Data Structures & Algorithms in JavaScript

Q#	Category	Topic	Problem/Concept	Algorithm Type	Link
1	Arrays	Kadane's Algorithm	Maximum Subarray Sum	Dynamic Programming	View
2	Arrays	Stock Trading	Stock Buy and Sell	Greedy Algorithm	View
3	Arrays	Majority Element	Find Majority Element (N/2 times)	Boyer-Moore Voting	View
4	Arrays	Array Deduplication	Remove Duplicates from Sorted Array	Two Pointers	View
5	Arrays	Consecutive Analysis	Count Maximum Consecutive Ones	Array Traversal	View
6	Arrays	Element Ranking	Kth Largest/Smallest Element	QuickSelect/Heap	View
7	Linked Lists	List Reversal	Reverse a Linked List	Iterative/Recursive	View
8	Linked Lists	Middle Element	Find Middle Element in Linked List	Two Pointers (Slow/Fast)	View
9	Binary Search	Mathematical Operations	Nth Root using Binary Search	Binary Search on Answer	View
10	Stacks & Queues	Stack Implementation	Implement Stack using Array	LIFO Data Structure	View
11	Stacks & Queues	Queue Implementation	Implement Queue using Array	FIFO Data Structure	View
12	Stacks & Queues	Next Greater Element	Next Greater Element using Stack	Monotonic Stack	View
13	Stacks & Queues	Stack Sorting	Sort a Stack	Recursion/Additional Stack	View
14	Stacks & Queues	Next Smaller Element	Next Smaller Element	Monotonic Stack	View
15	Strings	String Reversal	Reverse Words in a String	String Manipulation	View
16	Strings	Number System	Roman to Integer	Hash Map/String Processing	View
17	Strings	Common Prefix	Longest Common Prefix	Vertical/Horizontal Scanning	View
18	Strings	Pattern Matching	Z Function	String Matching Algorithm	View
19	Strings	Anagram Detection	Valid Anagram	Character Frequency	View
20	Binary Trees	Tree Traversal	Inorder Traversal	DFS (Left-Root-Right)	View
21	Binary Trees	Tree Traversal	Preorder Traversal	DFS (Root-Left-Right)	View
22	Binary Trees	Tree Traversal	Postorder Traversal	DFS (Left-Right-Root)	View
23	Binary Trees	Tree Views	Right/Left View of Binary Tree	Level Order with Direction	View
24	Binary Trees	Tree Views	Top View of Binary Tree	Vertical Distance Mapping	View
25	Binary Trees	Tree Traversal	Vertical Order Traversal	Coordinate-based Sorting	View
26	Binary Trees	Tree Traversal	Level Order Traversal	BFS (Breadth-First Search)	View
27	Binary Trees	Tree Traversal	Zig Zag Traversal	Level Order with Alternating Direction	View
28	BST	Tree Search	Search in BST	Binary Search Tree Properties	View
29	BST	Range Queries	Floor and Ceil in BST	BST Range Operations	View
30	BST	Stream Processing	Kth Largest in Stream	Min Heap with Stream	View
31	BST	Array Processing	Kth Largest in Array	QuickSelect/Heap Sort	View

Quick Overview : :

#	Topic	Summary
1	JavaScript Basics	Core syntax, comments, variable declarations (var, let, const), and environment setup (Browser, Node.js, VS Code).
2	Data Types	Primitive (String, Number, Boolean, Null, Undefined, Symbol, BigInt) and Non-Primitive (Object, Array, Function, Map, Set, JSON).
3	Conditional Statements	if, else if, else, switch statements; logical operators used in decision-making.
4	Operators	Arithmetic, Assignment, Comparison, Logical, Bitwise, Ternary, typeof, delete, and precedence rules.
5	Type Coercion	Implicit vs Explicit conversion; avoid bugs using === and type conversion functions.
6	Objects and Arrays	Object literals, methods, array operations (push, map, filter, reduce), Map, Set, JSON structures.
7	Loops	for, while, do...while, for...in, for...of; control flow using break, continue.
8	Functions and Hoisting	Function declaration/expression, arrow functions, scope (global, block, function), hoisting, closures, IIFE.
9	Document Object Model (DOM)	Selecting and manipulating HTML elements, addEventListener, event bubbling, capturing, delegation.
10	Browser Object Model (BOM)	Interacting with browser APIs: window, location, navigator, history, screen.
11	Regular Expressions	Pattern matching using test, exec, match, replace for string validation and search.
12	OOP in JavaScript	Objects, constructors, prototypes, ES6 classes, inheritance, encapsulation, polymorphism.
13	HTTP Requests (AJAX, Fetch, Promises)	Sending/receiving data using XMLHttpRequest, fetch(), Promises, async/await, and error handling.
14	jQuery Basics	DOM selection, manipulation, event handling, and AJAX with simplified syntax and cross-browser support.
15	ES6+ for ReactJS	let/const, arrow functions, destructuring, template literals, spread/rest, modules, Promises, async/await.
16	Asynchronous JavaScript	Event loop, task queue, callbacks, Promises, async/await, and proper error handling.
17	Advanced Function Concepts	this keyword, call, apply, bind, closures, higher-order functions, IIFE.
18	Design Patterns	Reusable solutions like Singleton, Module, Observer, Factory for structuring scalable applications.
19	Functional Programming in JS	Pure functions, immutability, first-class functions, higher-order functions, function composition.
20	Code Quality and Best Practices	"use strict", linting tools, debugging, testing practices to write reliable, maintainable code.
21	Tooling	npm, Babel, Webpack, Parcel, Prettier, ESLint, and testing frameworks like Jest, Mocha.
22	Project Structure and Architecture	Modular folder structure, dependency management, scalability, separation of concerns.
23	Web APIs	Local Storage, Session Storage, IndexedDB, Web Workers, Service Workers, Notifications.
24	Performance Optimization	Reducing DOM manipulation, debouncing/throttling, lazy loading, profiling with DevTools.
25	Event Handling & Types	Click events: click, dblclick, contextmenu, mousedown, mouseup. Total 15+ mouse events, 13+ keyboard events, 8+ form events, 6+ window events.
26	JavaScript Engine & Execution	V8 engine, Call Stack, Memory Heap, Event Loop phases (Call Stack → Web APIs → Callback Queue → Event Loop).
27	Scope and Context	Global, Function, Block scope. Lexical scoping, this binding (implicit, explicit, new, arrow), execution context creation.
28	Memory Management	Garbage Collection, Memory leaks, Stack vs Heap memory, Reference counting, Mark-and-sweep algorithm.
29	Error Handling	try-catch-finally, Error types (SyntaxError, ReferenceError, TypeError), Custom errors, Promise error handling.
30	Prototype and Inheritance	Prototype chain, __proto__, Object.create(), Constructor functions, ES6 classes, super keyword.
31	Array Methods (Advanced)	map, filter, reduce, forEach, find, some, every, flatMap, reduceRight. Method chaining patterns.
32	String Methods (Advanced)	slice, substring, substr, split, replace, match, search, Template literals, Tagged templates.
33	JSON and Serialization	JSON.parse(), JSON.stringify(), Circular reference handling, Custom toJSON methods, Data transformation.
34	Modules and Imports	ES6 modules (import/export), CommonJS (require/module.exports), AMD, UMD, Dynamic imports.
35	Timing Functions	setTimeout, setInterval, clearTimeout, clearInterval, requestAnimationFrame, Debouncing vs Throttling.
36	Data Structures in JS	Map, Set, WeakMap, WeakSet differences, Symbol usage, Iterator protocol, Generator functions.
37	Security in JavaScript	XSS prevention, CSRF, Content Security Policy, Input validation, Secure coding practices.
38	Browser Storage	localStorage vs sessionStorage vs cookies. Storage events, Storage limits, IndexedDB for large data.
39	Network and HTTP	HTTP methods, Status codes, CORS, Request/Response headers, REST API patterns, GraphQL basics.
40	Testing JavaScript	Unit testing (Jest), Integration testing, Mocking, Test-driven development, Code coverage.
41	Closures and Scope Chain	Advanced closure patterns, module pattern, private variables, scope pollution prevention, lexical environment chains.
42	Event Loop Deep Dive	Microtasks vs Macrotasks, Promise queue, setTimeout vs setImmediate, process.nextTick, task prioritization.
43	Proxy and Reflect API	Object interception, meta-programming, property access control, validation, data binding patterns.
44	Symbols and Well-known Symbols	Symbol.iterator, Symbol.asyncIterator, Symbol.toPrimitive, creating private properties, preventing name collisions.
45	WeakMap and WeakSet Use Cases	Memory management, private data storage, DOM node association, preventing memory leaks in large applications.
46	Intersection Observer API	Lazy loading images, infinite scrolling, viewport detection, performance optimization for large lists.
47	Mutation Observer API	DOM change detection, react to dynamic content, monitoring element modifications, debugging DOM changes.
48	Custom Elements (Web Components)	Creating reusable components, Shadow DOM, HTML templates, encapsulation, framework-agnostic components.
49	File API and Blob Handling	File upload, reading files, creating downloads, image processing, drag-and-drop file handling.
50	Canvas and WebGL Basics	2D graphics, image manipulation, data visualization, basic game development, drawing operations.
51	Geolocation and Device APIs	GPS location, device orientation, camera access, microphone, notification permissions.
52	WebSocket and Real-time Communication	Live chat, real-time updates, server-sent events, bidirectional communication, connection management.
53	TypeScript Fundamentals	Type annotations, interfaces, generics, strict mode, migration from JavaScript, better IDE support.
54	Build Tools and Module Bundlers	Webpack configuration, Vite, Rollup, code splitting, tree shaking, hot module replacement.
55	Progressive Web Apps (PWA)	Service workers, manifest files, offline functionality, app-like experience, push notifications.
56	HTTP Caching Strategies	Cache headers, ETags, cache validation, CDN usage, browser caching, performance optimization.
57	Authentication and JWT	Token-based auth, refresh tokens, secure storage, OAuth flows, session management.
58	Form Validation and Accessibility	Custom validation, ARIA attributes, screen reader support, keyboard navigation, semantic HTML.
59	Internationalization (i18n)	Multi-language support, date/number formatting, locale-specific content, RTL languages.
60	Performance Monitoring	Core Web Vitals, FCP, LCP, CLS, FID, performance.mark(), User Timing API, real user monitoring.

JavaScript Summary : :

1. Basics

- JavaScript is a **high-level, interpreted** programming language.
- Runs in the browser and can interact with the DOM.
- Used for client-side and (with Node.js) server-side scripting.

Key Concepts:

- Syntax, Statements, and Comments
- Variables: `var`, `let`, `const`
- Running JS: Browser, Node.js
- Environment Setup: Node.js, npm, VS Code
- Role of JS: Client-side, Server-side, Web Standards

Syntax, Statements, and Comments

Click to expand example

// This is a single-line comment

/*
 This is a
 multi-line comment
*/

console.log("Hello, JavaScript!");

Variables: var, let, const

Click to expand example

var city = "Mumbai"; // function scoped
let name = "Ayush";  // block scoped
const age = 23;      // block scoped and can't be reassigned

Running JS: Browser vs Node.js

Click to expand example

In Browser:

<script>
  alert("Running in the browser!");
</script>

In Node.js:

// Save this in a file named app.js
console.log("Running in Node.js");
// Run: node app.js

Environment Setup: Node.js, npm, VS Code

Click to expand setup

1. Download and install Node.js
2. Use npm to install packages:

   npm install express

3. Use Visual Studio Code as your code editor.

Role of JavaScript

Click to expand explanation

• Client-side: Form validations, UI interactivity, AJAX requests.
• Server-side (Node.js): APIs, backend logic, database interactions.
• Web Standards: JavaScript is a core part of HTML/CSS/JS stack.

2. DataTypes

Primitive Types:

1. String - `"hello"`
2. Number - `42`, `3.14`
3. Boolean - `true` or `false`
4. Undefined - variable declared but not assigned
5. Null - intentionally empty value
6. Symbol (ES6)
7. BigInt - large integers beyond 2^53-1

Non-Primitive Types:

- Objects : `{ key: value }`
- Arrays : `[1, 2, 3]`
- Functions
- JSON
- Maps and Sets

3. Conditional Statements

- `if`, `else if`, `else`
- `switch`
- Logical Operators in Conditions

if (score > 90) {
    console.log("Excellent");
} else {
    console.log("Keep trying");
}

4. Operators

- **Arithmetic**: `+`, `-`, `*`, `/`, `%`
- **Assignment**: `=`, `+=`, `-=`, etc.
- **Comparison**: `==`, `===`, `!=`, `!==`, `>`, `<`
- **Logical**: `&&`, `||`, `!`
- **Bitwise**,
- **Ternary (`? :`)**,
- **typeof**,
- **delete**
- Operator Precedence and Grouping

5. Type Coercion

- Implicit vs Explicit Coercion
- JS automatically converts types when needed.
- `"5" + 2` → `'52'`
- `"5" - 2` → `3`
- Best Practices (`===`, `parseInt()`, `Boolean()`)

6. Objects and Arrays

- Object Literals, Properties, Methods
- Arrays and Array Methods: `map`, `filter`, `reduce`
- Maps and Sets
- JSON as Data Structure

Objects:

let user = {
  name: "Ayush",
  age: 23,
  greet: function() {
    return `Hello, ${this.name}`;
  }
};

Arrays:

let colors = ["red", "blue", "green"];
colors.push("yellow");

7. Loops

- for, while, do...while, for...in, for...of
- Loop Control: `break`, `continue`

for (let i = 0; i < 5; i++) {
    console.log(i);
}

8. Functions and Hoisting

- Function Declaration, Expression, Arrow Functions
- Hoisting: Functions vs Variables
- Scope: Global, Function, Block
- Lexical Scope and Closures
- IIFE (Immediately Invoked Function Expressions)

• Function Declaration

function greet() {
  return "Hello";
}

• Function Expression

const greet = function() { return "Hello"; };

• Arrow Functions (ES6)

const greet = () => "Hello";

• Hoisting: Function declarations are hoisted, expressions are not.

9. Document Object Model (DOM)

- DOM Selectors: `getElementById`, `querySelector`
- DOM Manipulation: `innerText`, `innerHTML`, `classList`, `style`
- Event Listeners: `addEventListener()
- Event Propagation: Bubbling, Capturing, Delegation

document.getElementById("btn").addEventListener("click", () => {
  alert("Clicked!");
});

10. Browser Object Model (BOM)

- `window`, `location`, `navigator`, `screen`, `history`

console.log(window.innerHeight);
console.log(location.href);

11. Regular Expressions

- Patterns: Literals, Ranges, Groups
- Methods: `test()`, `exec()`, `match()`, `replace()`

let pattern = /[A-Z]/g;
let result = "Ayush".match(pattern);  // ['A']

12. Object-Oriented Programming (OOP) in JS

- Object Literals, Constructor Functions
- Prototypes and Prototypal Inheritance
- Classes (ES6)
- Encapsulation, Inheritance, Polymorphism

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi ${this.name}`;
  }
}

13. HTTP Requests

- AJAX using `XMLHttpRequest`
- Fetch API
- Promises and `async/await`
- Error Handling: `try/catch`, `.catch()`, `finally`

AJAX (Asynchronous JavaScript and XML)

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Fetch API (Modern Way)

fetch("data.json")
  .then(res => res.json())
  .then(data => console.log(data));

14. jQuery Basics

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

$(document).ready(function() {
  $("#btn").click(function() {
    $("p").text("Button clicked");
  });
});

- Uses `$()` as a shorthand for document selection
- Event HandlingHandling
- AJAX
- Cross-browser compatibility
- DOM Selection, traversal, manipulation, animations, and AJAX

15. ES6 for ReactJS

- `let`, `const`, Arrow Functions
- Template Literals
- Destructuring
- Spread and Rest Operators
- Modules: `import/export`
- Promises, async/await
- Classes and Inheritance

const user = { name: "Ayush", age: 23 };
const { name, age } = user;

const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

16. Asynchronous JavaScript

- Event Loop
- Callbacks, Promises, async/await
- Error Handling with async code

17. Advanced Function Concepts

- `this` Keyword
- `call`, `apply`, `bind`
- Closures and IIFE
- Higher-Order Functions

18. Design Patterns

- Singleton
- Observer
- Module
- Factory

19. Functional Programming

- Pure Functions
- Immutability
- Higher-Order Functions
- Function Composition

20. Code Quality and Best Practices

- `"use strict"`
- Linting
- Debugging Tools
- Testing with Frameworks

21. Tooling

- npm, Babel, Parcel
- Webpack, Linters, Prettier
- Testing Frameworks (Jest, Mocha)

22. Project Structure and Architecture

- Modular Code Organization
- Dependency Management
- Folder Structure Best Practices

23. Web APIs

- Local Storage & Session Storage
- IndexedDB
- Web Workers & Service Workers

24. Performance Optimization

- Profiling with DevTools
- Reducing DOM Manipulations
- Debouncing and Throttling
- Lazy Loading and Efficient Selectors

Resources (From where I am learning JS most of the time) :

• Namaste JavaScript - YT playlist
• Telusko - YT playlist
• JavaScript - Basics to Advanced step by step [2022] - Udemy Cource
• Sheryians Coding School - YT JavaScript Core

Certificate that I have earned during learning JS :

• From Udemy Cource :
  • JavaScript - Basics to Advanced ES6 step by step [2022] : Issue date - December 2022
    Credential ID - UC-0382127f-523a-4c7f-b966-ba33426153be
    Certificate