Mastering JavaScript Objects & Memory Concepts

🚀 Day 10 of My JavaScript Journey ✨Today I explored how JavaScript actually works behind the scenes — and honestly, it changed the way I look at code completely 🤯 Here’s what I learned 👇 🧠 How JavaScript Code RunsJavaScript doesn’t just execute line by line — it first creates an Execution Context which manages everything. ⚙️ Execution Context Phases1️⃣ Memory Allocation Phase Variables get stored with undefined Functions are stored completely 2️⃣ Execution Phase Code runs line by line Values get assigned and functions execute 📦 Call Stack & Execution Flow JavaScript uses a Call Stack to manage function calls Each function creates its own execution context Stack follows LIFO (Last In, First Out) 💾 Stack vs Heap Memory Stack → Stores primitive values (fast ⚡) Heap → Stores objects (reference-based 🧩) 🤖 Interpreter BehaviorJavaScript reads and executes code step by step using an interpreter — not compiled like some other languages. ❓ Why undefined Appears?Because during memory phase, variables are declared but not initialized yet. ⬆️ Hoisting Explained var is hoisted with undefined Functions are fully hoisted let & const are hoisted but stay in Temporal Dead Zone (TDZ) ❌ 🚫 Temporal Dead Zone (TDZ)You can’t access let & const variables before initialization — it throws an error. ⚠️ Function Expressions vs Hoisting Function declarations → hoisted ✅ Function expressions → behave like variables ❌ 💡 Key TakeawayUnderstanding execution context, memory, and hoisting makes debugging WAY easier and helps write cleaner code 🔥 📌 Slowly moving from writing code → to understanding how it actually works inside #JavaScript #WebDevelopment #MERNStack #CodingJourney #LearnToCode #FrontendDevelopment #DeveloperLife

🚀 Day 7 — Understanding JavaScript Objects & Prototypes Continuing my journey of strengthening core JavaScript fundamentals, today I explored one of the most important building blocks — Objects & Prototypes 👇 At first, objects feel simple… but when you dive into prototypes, you truly understand how JavaScript works behind the scenes. 🔹 Covered topics: - What are JavaScript Objects? - Key-Value Pairs & Properties - Dot vs Bracket Notation - Add / Modify / Delete Properties - Object Methods - "this" inside objects (quick revision 🔁) - Constructor Functions - What happens when we use "new" - Why Prototype is needed (memory optimization 🔥) - Prototype & Shared Methods - Prototype Chain (🔥 very important) - Getter & Setter 💡 Key Learning: JavaScript is not class-based — it’s prototype-based. Objects can share properties and methods using prototypes, which makes code more efficient and scalable. 👉 Always remember: - JS first looks inside the object - If not found → it checks the prototype (This is called the Prototype Chain) Understanding this concept is a game changer for interviews and helps in writing better, optimized code. 📌 Day 7 of consistent preparation — going deeper into JavaScript fundamentals 🔥 #JavaScript #WebDevelopment #FullStackDeveloper #CodingJourney #MERNStack #InterviewPreparation #Frontend #Backend #LearnInPublic #Developers #Consistency #100DaysOfCode #LinkedIn #Connections

🚀 Day 15 of My JavaScript Learning Journey Today I explored one of the most important concepts in JavaScript — how it actually works behind the scenes! 🤯 Here’s what I learned 👇 🧠 JavaScript Engine & Single Thread Concept JavaScript runs on a single thread — meaning it executes one task at a time. But still, it feels fast… how? 👀 ⚙️ What Makes JS Synchronous By default, JavaScript executes code line by line (synchronously). But real-world apps need more power! 🌐 Understanding Web APIs Browsers provide Web APIs (like setTimeout, DOM events) that handle async tasks outside JS engine 💡 📥 Callback Queue & Task Queue Async tasks go into queues and wait for their turn to be executed. 🔁 Event Loop Explained The Event Loop checks if the call stack is empty and then pushes tasks from the queue — this is how async magic happens! ✨ 📌 Summary & Key Takeaways: ✔ JS is single-threaded but handles async operations smartly ✔ Event Loop is the heart of async behavior ✔ Web APIs make non-blocking execution possible 📚 Prerequisites I Used: • Basic HTML & CSS • VS Code • Browser 🎯 Skills I'm Building: 💻 Interactive web apps 🧩 Strong JavaScript fundamentals 🎨 Clean & maintainable code #Day15 #JavaScript #LearnJavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #Programming #Beginners #JavaScriptBasics #EventLoop #AsyncJavaScript

🚀 Day 8 — Mastering JavaScript Arrays & Higher Order Functions Continuing my journey of strengthening core JavaScript fundamentals, today I focused on one of the most practical and frequently used concepts — Arrays & Higher Order Functions 👇 Arrays may look simple at first, but when combined with higher order functions like "map", "filter", and "reduce", they become extremely powerful for solving real-world problems. 🔹 Covered topics: - What are Arrays & why we use them - Indexing & accessing elements - Adding & removing elements ("push", "unshift", "splice") - Difference between "slice" & "splice" - Common methods ("indexOf", "includes", "sort") - Higher Order Functions (🔥 important) - "forEach()" vs "map()" - "filter()" for conditional data - "reduce()" for complex logic (🔥 most important) - "find()" & "findIndex()" - Method chaining (real-world usage 💡) 💡 Key Learning: Higher Order Functions make code clean, readable, and scalable. Instead of writing long loops, we can write powerful one-line logic. 👉 Always remember: - "map()" → transforms data - "filter()" → selects data - "reduce()" → converts data into a single value Understanding these concepts is crucial for React, real-world projects, and technical interviews. 📌 Day 8 of consistent preparation — getting stronger with JavaScript fundamentals 🔥 #JavaScript #WebDevelopment #FullStackDeveloper #CodingJourney #MERNStack #InterviewPreparation #Frontend #Backend #LearnInPublic #Developers #Consistency #100DaysOfCode #LinkedIn #Connections

🚀 From Tricky to Clear — My JavaScript Practice Journey🚀 💡Today I worked on a couple of problems that initially felt tricky, but after breaking them down step by step, I was able to solve them completely. 💡 🔹 Problem 1: String to Object Conversion I learned how to transform a string into meaningful key-value pairs by grouping characters and mapping them into an object. 👉 This improved my understanding of: • String manipulation • Index-based iteration • How data can be structured dynamically 🔹 Problem 2: Rearranging Array (Positive & Negative) This problem was more challenging. I worked on separating positive and negative numbers and then merging them in a specific pattern. 👉 Key takeaways: • Logical thinking and pattern recognition • Handling multiple arrays efficiently • Using loops to control data flow step by step ✨ What I realized: At first, these problems looked confusing, but once I broke them into smaller parts, they became much easier to solve. Consistent practice is really helping me improve my problem-solving skills. #JavaScript #ProblemSolving #CodingJourney #FrontendDevelopment #LearningInPublic

🚀 Day 5 — Understanding JavaScript Hoisting & Execution Context Missed sharing yesterday’s update, so posting it today 👇 Continuing my journey of strengthening core JavaScript fundamentals, I explored one of the most important (and commonly asked) concepts in interviews — how JavaScript actually runs behind the scenes. 🔹 Covered topics: - JavaScript Hoisting: • Variables and functions can be used before declaration • Only declarations are hoisted, not initializations • Difference in behavior: var vs let vs const - Temporal Dead Zone (TDZ): • Why let & const throw errors before initialization • Understanding “Cannot access before initialization” - Execution Context (🔥 very important): • How JavaScript executes code internally • Two phases: - Memory Creation Phase - Execution Phase - Memory Creation Phase: • Variables stored as undefined • Functions stored completely - Execution Phase: • Code runs line by line • Values get assigned and functions executed - Function Hoisting: • Function declarations are fully hoisted • Function expressions behave differently - Call Stack: • How JavaScript manages function execution (LIFO) 💡 Key Learning: JavaScript is not executing code line-by-line directly — it first scans and prepares memory, then executes. 👉 Concepts like: - Why var gives undefined but let/const throw error - How execution context is created - How functions are stored and executed - What happens internally before a single line runs These are core interview concepts that define how deeply you understand JavaScript. This phase is helping me move from just writing code → to understanding how JavaScript engine actually works internally ⚡ 📌 Day 5 of consistent preparation — building strong fundamentals step by step 🔥 #JavaScript #WebDevelopment #FullStackDeveloper #CodingJourney #MERNStack #InterviewPreparation #Frontend #Backend #LearnInPublic #Developers #LinkedIn #Consistency #Connections

Day 4/100 of JavaScript 🚀 Today’s focus: Functions in JavaScript Functions are reusable blocks of code used to perform specific tasks Some important types with example code: 1. Parameterized function → takes input function greet(name) { return "Hello " + name; } greet("Apsar"); 2. Pure function → same input always gives same output, no side effects function add(a, b) { return a + b; } add(2, 3); 3. Callback function → function passed into another function function processUser(name, callback) { callback(name); } processUser("Apsar", function(name) { console.log("User:", name); }); 4.Function expression → function stored in a variable const multiply = function(a, b) { return a * b; }; 5.Arrow function → shorter syntax const square = (n) => n * n; Key understanding: Functions are first-class citizens in JavaScript — they can be passed, returned, and stored like values #Day4 #JavaScript #100DaysOfCode

Day 1: Under the Hood of JavaScript — The Execution Context 🚀 I’ve officially kicked off my deep dive into how JavaScript works behind the scenes! If you want to master JS, you have to understand the Execution Context. Think of the Execution Context as a "big box" where all the JavaScript code is executed. It has two main components (as shown in my notes! 📸): 1️⃣ Memory Component (Variable Environment) This is where variables and functions are stored as key-value pairs. Before any code runs, JS scans the code and allocates memory for variables (initially undefined) and functions (the whole code block). 2️⃣ Code Component (Thread of Execution) This is the place where code is executed one line at a time. 🧠 Critical JS Facts I Learned Today: Is JS Single-threaded or Multi-threaded? JavaScript is a Single-threaded language. It can only execute one command at a time in a specific order. Is JS Synchronous or Asynchronous? JavaScript is a Synchronous language. However, it’s specifically "Synchronous Single-threaded," meaning it moves to the next line only after the current one is finished. (We'll get to how it handles async tasks later with the Event Loop!). 🔄 Summary of the Process: Phase 1 (Creation): JS creates the Global Execution Context and allocates memory for variables and functions. Phase 2 (Execution): JS runs through the code line by line, assigning values to variables and executing function calls. Understanding this "behind the scenes" logic is making me a much more confident developer. Everything from Hoisting to Closures starts right here in this box! Have you ever felt like JavaScript acts "weird"? It's usually because of how the Execution Context works! Let's discuss below. 👇 #JavaScript #WebDevelopment #CodingJourney #ExecutionContext #FrontendEngineering #TechLearning #SoftwareDevelopment #JSInternals

🚀 How JavaScript Works Behind the Scenes We use JavaScript every day… But have you ever thought about what actually happens when your code runs? 🤔 Let’s understand it in a simple way 👇 --- 💡 Step 1: JavaScript needs an Engine JavaScript doesn’t run on its own. It runs inside a JavaScript engine like V8 (Chrome / Node.js). 👉 Engine reads → understands → executes your code --- 💡 Step 2: Two Important Things When your code runs, JavaScript uses: 👉 Memory Heap → stores variables & functions 👉 Call Stack → executes code line by line --- 💡 Step 3: What happens internally? let name = "Aman"; function greet() { console.log("Hello " + name); } greet(); Behind the scenes: - "name" stored in Memory Heap - "greet()" stored in Memory Heap - function call goes to Call Stack - executes → removed from stack --- 💡 Step 4: Single Threaded Meaning JavaScript can do only one task at a time 👉 One Call Stack 👉 One execution at a time --- ❓ But then… how does async work? (setTimeout, API calls, promises?) 👉 That’s handled by the runtime (browser / Node.js) More on this in next post 👀 --- 💡 Why this matters? Because this is the base of: - Call Stack - Execution Context - Closures - Async JS --- 👨💻 Starting a series to revisit JavaScript from basics → advanced with focus on real understanding Follow along if you want to master JS 🚀 #JavaScript #JavaScriptFoundation #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech

🚀 Mastering JavaScript Array Methods – My Practice Journey 💻✨ ✨Today, I focused on strengthening my understanding of JavaScript Array Methods by solving real-world problems. These built-in methods make code cleaner, faster, and more efficient.✨ Here’s what I explored 👇 🔹 map() – Used to transform data (e.g., adding GST to product prices) 🔹 filter() – Extracted specific data (e.g., getting only active users) 🔹 reduce() – Calculated a single value from an array (e.g., total cart value) 🔹 find() – Found the first matching element (e.g., first expensive product) 🔹 findIndex() – Retrieved index of a specific element 🔹 some() – Checked if any condition is true (e.g., out-of-stock products) 🔹 every() – Verified if all elements satisfy a condition 🔹 includes() – Checked if a value exists in an array 🔹 indexOf() & lastIndexOf() – Used for duplicate handling and comparisons 🔹 sort() – Arranged data (e.g., sorting products by price) 🔹 splice() – Added/removed elements at a specific position 🔹 slice() – Extracted a portion of an array without modifying original 🔹 concat() – Merged arrays 🔹 flat() – Flattened nested arrays into a single array 🔹 fill() – Replaced all elements with a static value 🔹 split() & join() – Converted between strings and arrays 🔹 reverse() – Reversed array elements (used for reversing words) 🔹 Loops & Objects – Used for counting occurrences and handling unique values 💡 Key Takeaways: ✔️ Learned when to use each method ✔️ Improved problem-solving approach ✔️ Understood real-world applications of arrays #JavaScript #WebDevelopment #FrontendDevelopment #CodingPractice #LearningJourney