🏆 JavaScript Mastery: Level Up Your Skills 🚀

📅 Day 01

🌱 "Success doesn’t come from what you do occasionally, it comes from what you do consistently."

1. JavaScript Basics

   • Purpose, How It Works, and Use in Web Development
   • Showing Output with console.log() and console.table()
     
     

2. Variables & Data Types

   • Declaring Variables (var, let, const)
   • Primitive vs Reference Types
   • Checking Types with typeof
     
     

3. Type Conversion

   • Converting Between String, Number, and Boolean
   • Implicit vs Explicit Conversion

---

📅 Day 02

🧠 "Code is like humor. When you have to explain it, it’s bad."

1. Operations in JavaScript

   • Arithmetic Operations
   • String Operations
   • Operator Precedence
   • Prefix and Postfix Increments
   • Tricky Conversions and Type Coercion
   • Tricky Assignments
     

2. Comparisons in JavaScript

   • Basic Comparisons
   • Tricky Comparisons (null, undefined)
   • Strict Equality vs Loose Equality (=== vs ==)
   • Not Equal Operators (!= vs !==)
     

3. Datatypes in JavaScript

   • Primitive Datatypes
   • Reference (Non-Primitive) Datatypes
   • Tricky Datatype Checks (typeof null)

---

📅 Day 03

🧠 "Understanding memory and strings is key to mastering JavaScript."

1. Memory Management

   • Stack vs Heap
   • Primitive vs Reference Types
   • const Binding vs Value Mutability
     

2. Strings Fundamentals

   • String Creation & Access
   • String Immutability
   • String Prototype
     

3. String Methods & Utilities

   • Common String Methods (charAt, slice, replace, etc.)
   • String Comparison (localeCompare)
   • Legacy HTML String Methods (deprecated)

---

📅 Day 04

🌱 "Every expert was once a beginner. Keep coding, keep growing."

1. Numbers & Formatting

   • Defining numbers (primitive vs object)
   • Methods: toFixed() – fixed decimal places toString() – convert to string toPrecision() – set total digits toLocaleString() – readable format
     

2. Math Operations

   • Constants: Math.PI, Math.E
   • Methods: abs(), sqrt() round(), ceil(), floor() min(), max()
   • Random no. generation: Math.random() – value between 0 and 1 Custom range logic (e.g., 1–10, min–max)
     

3. Dates & Time

   • Create dates (current and specific)
   • Format methods: toString(), toDateString(), toISOString(), toLocaleString()
   • Timestamps: Date.now(), convert to seconds
   • Extract parts: getMonth(), getDate()

---

📅 Day 05

🌟 "Learning to write programs stretches your mind, and helps you think better."

1. Arrays

   • What is an Array?
   • Array Indexing Basics
   • Creating arrays: Literal Syntax [] Constructor Syntax new Array()
     

2. Working with Arrays

   • Add/Remove: push(), pop(), unshift(), shift()
   • Search: includes(), indexOf()
   • Transform: slice(), splice(), join(), flat()
     

3. Combining & Converting

   • Merge: concat(), spread ...
   • Convert: Array.from(), Array.of()
   • Type Check: Array.isArray()

---

📅 Day 06

🤖 "Programming is 10% writing code and 90% figuring out why it doesn’t work — welcome to the club!"

1. Understanding Objects

   • What is an Object?
   • Accessing Values (Dot & Bracket Notation)
   • Symbol Keys
     

2. Creating & Structuring Objects

   • Object Literals vs Constructor Syntax
   • Nested Objects
   • Array of Objects
     

3. Working with Objects

   • Methods & this Keyword
   • Freezing Objects
   • Merging Objects (Object.assign(), Spread Operator)
   • Utility Methods: keys(), values(), entries(), hasOwnProperty()

---

📅 Day 07

🌟 "Data isn't just stored — it's structured, shared, and made functional."

1. Object Destructuring

   • Extracting properties from objects
   • Renaming variables during destructuring
   • Practical use with user data or API responses
     
     

2. Intro to JSON

   • Understanding JSON structure
   • Differences between JSON and JavaScript objects
   • Common usage in APIs and data exchange
     
     

3. Functions in JavaScript

   • Normal Function
   • Function with Return
   • Function with If Condition
   • Function with Default Values

---

📅 Day 08

✨ "Functions make code reusable. Scope makes code manageable."

1. Functions and Scope

   • Functions with Spread as Parameter
   • Functions with Fixed and Spread Parameters
   • Functions with Object as Parameter
   • Functions with Array as Parameter
     
     

2. Understanding Scope in JavaScript

   • What is Scope?
   • Using var
   • Using let
   • Using const

---

📅 Day 09

🧠 "Understanding scope and context unlocks powerful control over your code."

1. Scope in JavaScript

   • Block Scope (let, const, var)
   • Lexical Scope and Closures
     

2. Function Behavior

   • Function Declarations vs Expressions
   • Arrow Functions and this Binding
     

3. The this Keyword

   • In Object Methods, Global Context, and Different Function Types
     

4. Essentials Recap

   • Scope Safety, Closure Use, Hoisting Rules, and Context Awareness

---

📅 Day 10

🌀 "JavaScript doesn’t sleep — it stacks dreams in a call stack and wakes them with a function."

1. IIFE (Immediately Invoked Function Expression)

   • What is IIFE?
   • Why use IIFE?
   • Important Rules
     
     

2. JavaScript Execution Contexts & Lifecycle

   • How JavaScript Runs Code
   • Types of Execution Contexts
     • Global Execution Context
     • Functional Execution Context
   • Execution Context Lifecycle (Step-by-Step)
     • Memory Creation Phase
     • Execution Phase
       
       

3. Call Stack in JavaScript

   • What is Call Stack?
   • How Call Stack Works with examples

---

📅 Day 11

🌱 "It’s not that I’m so smart, it’s just that I stay with problems longer."

1. Control Flow Basics

   • Overview of Execution Order
   • Conditional and Looping Statements
     
     

2. Conditional Statements

   • if, else if, else
   • Logical Operators (&&, ||, !)
   • Double NOT (!!) and Boolean Conversion
   • switch Statement
   • Ternary Operator (? :)
   • Nullish Coalescing Operator (??)
     
     

3. Truthy & Falsy Values

   • Falsy Value List
   • Tricky Truthy Values
     

4. Loops in JavaScript

   • for Loop Syntax and Usage
   • Nested Loops
   • Looping through Arrays
   • break and continue in Loops

---

📅 Day 12

🔄 "Control the flow, shape the data — great code begins with great loops."

1. JavaSript Loops

   • While & Do-While Loops
   • forEach Method for Arrays
     

2. Iterating with For Loops

   • For...of Loop (Values in Arrays, Strings, Maps)
   • For...in Loop (Keys/Indexes in Objects & Arrays)
     

3. Map Data Structure

   • Key-Value Pairs with Order
   • Differences from Objects
   • Iteration with for...of

---

📅 Day 13

🛠️ "Fix the cause, not the symptom."

1. Array Methods

   • filter() – Selecting values based on conditions
   • map() – Transforming each value in an array
   • reduce() – Combining all values into one result
   • Method Chaining – Using multiple array methods together
     
     

2. DOM Basics and Tree

   • What is DOM? – Understanding the document tree structure
   • window and document Objects – Connecting JavaScript to the browser and webpage

---

📅 Day 14

🌱 "DOM connects HTML and JavaScript, letting us manipulate web pages dynamically."

1. DOM Selection & Collections

   • Selectors: getElementById, getElementsByClassName, querySelector, etc.
   • HTMLCollection vs NodeList
   • Converting to Arrays for Iteration
     

2. DOM Properties & Methods

   • Accessing/Changing Text and HTML (innerText, innerHTML)
   • Managing Attributes (getAttribute, setAttribute)
   • Inline Styling (style property)
   • Navigating Between Elements: parent, children, siblings
     

3. DOM Manipulation

   • Creating & Appending Elements
   • Setting Attributes and Text
   • Looping for Multiple Elements

---

📅 Day 15

✨ "Web interactivity grows when you can change or remove elements dynamically."

1. DOM Manipulation: Edit & Delete Elements

   • Enhancing interactivity and user experience on real websites
   • Replace content dynamically using replaceWith()
   • Remove elements with remove() method
     

2. Mini JavaScript Projects (DOM Practice)

   • Project 1: Background Color Changer
   • Project 2: BMI Calculator
   • Project 3: Digital Clock
   • Project 4: Guess the Number Game

---

📅 Day 16

🎯 "Events are the heartbeat of interactive web pages — learn to listen well."

1. JavaScript Event Listeners

   • Definition and Purpose of Event Listeners
   • Common Examples of Events (click, keypress, mouseover)
     
     

2. Different Ways to Add Event Listeners

   • Inline Event Listeners (Old Method)
   • Using Element Properties (onclick)
   • Using addEventListener() (Modern Best Practice)
     
     

3. Event Object in Event Listeners

   • Event Object
   • Event Object Methods
   • Event Object Properties
     

4. Event Propagation

   • Event Bubbling
   • Event Capturing

---

📅 Day 17

⚡ "Understanding JavaScript’s flow is the first step to mastering async magic."

1. JavaScript Execution & Flow

   • Default Behaviour (Synchronous & Single-thread)
   • Execution Context (Memory Heap & Call Stack)
   • Blocking vs Non-blocking Code
     

2. Asynchronous JavaScript

   • How Async Works Internally
     • JS Engine & Web API Environment
     • Task Queue vs Microtask Queue (High Priority Queue)
     • Event Loop Flow & Example
       

3. Timers in JavaScript

   • setTimeout() & clearTimeout()
   • setInterval() & clearInterval()
   • Project: Continuous Background Color Changer
     

4. Keyboard Events

   • Keyboard Event Types
   • Event Object Properties
   • Project: Keyboard Keys Detector Table
     

5. AJAX Fundamentals

   • AJAX Basics & Use Cases
   • XMLHttpRequest (XHR) Overview
     • Ready State Values
     • Common Methods (open, send etc.)
     • Handling Responses

---

📅 Day 18

⚡ "Mastering asynchronous code unlocks the real power of JavaScript."

1. JavaScript Promises

   • Defining Promises: Purpose, States, and Usage
   • Creating Promises with resolve & reject
   • Handling Results: then(), catch(), and finally()
   • Chaining with Thenables (then() chaining)
     

2. Working with fetch()

   • Overview of fetch() and Its Purpose
   • Using fetch() with then() and catch()
   • Using fetch() with async/await
   • How fetch() Works Internally
   • Why fetch() Replaced XMLHttpRequest (XHR)
   • Advantages of fetch() over XHR

---

📅 Day 19

💡 "Objects are the heart of JavaScript — understand them, and the language opens up."

1. Object-Oriented Programming (OOP) in JS

   • What is OOP & Why Use It
   • Four Pillars: Abstraction, Encapsulation, Inheritance, Polymorphism
     

2. Creating & Managing Objects

   • Object Literals
   • Constructor Functions
   • new and this Keywords
   • Importance of new
     

3. Prototype System

   • What is Prototype & Prototype Chain
   • Everything is an Object (Hierarchy)
   • this in Prototype Methods
   • Prototype for All Objects vs Specific Types
     

4. Inheritance in JavaScript

   • Prototype-Based Inheritance
   • Old Style: __proto__ Linking
   • Modern Style: Object.setPrototypeOf()

---

📅 Day 20

🛠 "Understanding this, object creation, and class mechanics is key to writing clean, powerful JavaScript."

1. Working with this and Function Calls

   • Behavior of this in different contexts
   • Using call() to manually set this
     

2. Object Creation Approaches

   • Pre-ES6: Constructor Functions & Prototypes
   • ES6 Classes: Syntax and Behind-the-Scenes Prototype Inheritance
     

3. Class Features

   • Constructors, Properties, and Shared Methods
   • Static Methods for Class-Level Utilities
     

4. Inheritance in JavaScript

   • extends for Class Inheritance
   • super() for Parent Constructor Calls
   • Prototype Chaining Mechanism

---

📅 Day 21

💡 "Mastering the little-known parts of JavaScript is what turns good code into great code."

1. Understanding bind()

   • Controlling this inside functions
   • Callback context issues without bind()
   • Using bind() in early React class components
     
     

2. Hidden Properties in Objects

   • Built-in constants like Math.PI
   • Property descriptors (writable, enumerable, configurable)
   • Checking descriptors with Object.getOwnPropertyDescriptor()
     
     

3. Setting Hidden Properties for Custom Objects

   • Using Object.defineProperty()
   • Making properties read-only, hidden in loops, or locked
   • Practical steps to configure property settings