Understanding JavaScript Variable Environment and Hoisting

𝗪𝗵𝗮𝘁 𝗜𝘀 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? The Call Stack is where JavaScript runs your code. It follows one simple rule: Last In, First Out. The last function added to the stack runs first. When you call a function: - It gets added to the Call Stack - JavaScript runs it - After it's done, it gets removed JavaScript can only run one thing at a time. It uses the Call Stack to manage everything. You can think of the Call Stack like a stack of books. You add a book to the top of the stack. You remove the top book first. That's how the Call Stack works. Understanding the Call Stack helps you understand: - Event Loop - setTimeout behavior - Stack overflow errors Source: https://lnkd.in/g79Mi9G6

𝗪𝗵𝗮𝘁 𝗜𝘀 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? The Call Stack is where JavaScript runs your code. It follows one simple rule: Last In, First Out. The last function added to the stack runs first. When you call a function: - It gets added to the Call Stack - JavaScript runs it - After it's done, it gets removed JavaScript can only do one thing at a time. It uses the Call Stack to manage everything. You can think of the Call Stack like a stack of books. You add a book to the top of the stack. You remove the top book first. That's how the Call Stack works. Understanding the Call Stack helps you understand: - Event Loop - setTimeout behavior - Stack overflow errors Source: https://lnkd.in/g79Mi9G6

🚀 30 Days of JavaScript – Day 13 Today I built a Tip Calculator with Bill Split Feature. This tool calculates: • Tip amount • Total bill • Amount each person should pay when splitting the bill. 🧠 Concepts Used: user input handling arithmetic calculations variables and type conversion 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #LearningJavaScript #ProblemSolving

💗 Hoisting in JavaScript : In Simple Terms Earlier, I used to wonder: “Where exactly do we use hoisting in real projects?” Later I understood something important - Hoisting is not something we “use.” It’s something that’s already happening. Before running your code, JavaScript scans everything and registers variable and function declarations. Like taking attendance before starting class. That process is called hoisting. Example: console.log(a); //undefined var a = 10; Because internally, JavaScript treats it like: var a; console.log(a); a = 10; Now with let: console.log(b); //This throws an error. let b = 20; Why? Because let and const are hoisted too - but they stay inside something called the "Temporal Dead Zone" until initialization. 💡 Hoisting isn’t a feature we manually use. It’s a mechanism built into JavaScript. Even if we don’t think about it, it’s working behind the scenes every time our code runs. JavaScript isn’t unpredictable. It just follows its own execution rules. #JavaScript #FrontendDevelopment #LearnInPublic #InterviewPrep

✅ JavaScript Challenge – Day 1 Solution Here’s what happens step by step: arr2 points to the same reference as arr1 push() mutates the original array ✔️ Output: [1, 2, 3, 4] 🔑 Key takeaway: Arrays and objects are passed by reference in JS.

Javascript Experts, please explain the LET command. As I understand it, LET defines a variable within a block of code. But, what exactly constitutes a block of code?

JavaScript Concept: What is Tree Shaking? Answer: Tree Shaking removes unused code from your bundle. Example: import { add } from "./utils" If other functions are unused, they won’t be included. Explanation: Bundlers like: • Webpack • Vite • Rollup analyze imports and remove dead code. Benefits: 1. smaller bundle size 2. faster load time 3. better performance Important: Tree shaking works best with ES modules (import/export). Follow-up: Have you checked your bundle size recently? #javascript #WebPerformance #FrontendOptimization

A small but important JavaScript concept I learned. Comparing objects can be tricky: {} === {} // false Even though both objects look identical, the result is false. Why? Because JavaScript compares objects by reference, not by value. Each {} creates a new object in memory, so they are different references. This is important when working with validations and comparisons in backend logic. Understanding these small details helps avoid subtle bugs.

🚀 Day 11/21 – JavaScript DOM Project Built a Simple Expense Tracker using JavaScript DOM manipulation. 🛠 Features implemented: ✅ Add income and expense transactions ✅ Real-time balance calculation ✅ Transaction history list ✅ Delete transactions ✅ Dynamic UI updates 💡 Key Learning: Learned how to manage application state using arrays and update the DOM dynamically when the data changes. #Day11 #JavaScript #DOM #ExpenseTracker #WebDevelopment #LearnInPublic

JavaScript Subtleties So, this code looks like it is trying to convert an object to an array, when in fact it is creating an object whose values are arrays! const events= {}; functionon(event, handler) { if (!events[event]) { events[event] = []; } events[event].push(handler); }