WebAssembly vs JavaScript Performance Test: Rust-Based Image Processor

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts

🚀 JavaScript Magic: Why "Undefined" is actually a Feature, not a Bug! I just had a "Wow" moment diving into the JavaScript Execution Context, and it changed how I look at my code. Ever wondered why you can console.log a variable before you even declare it, and JavaScript doesn't lose its mind? 🤯 🧠 The Secret: Two-Phase Execution When your code runs, JavaScript doesn't just start at line 1. It takes two passes: 1.Memory Creation Phase: JS scans your code and allocates space for all variables and functions. 2. Execution Phase: It runs the code line-by-line. ⚡ The var Behavior (Hoisting) If you use var, JavaScript initializes it as undefined during the memory phase. Result: You can log it early. No error, just a quiet undefined. It’s like the variable is there, but its "suit" hasn't arrived yet. 🛑 The let & const Twist (TDZ) Try the same thing with let or const, and the engine throws a ReferenceError. Why? The Temporal Dead Zone (TDZ). While let and const are also "hoisted," they aren't initialized. They stay in a "dead zone" from the start of the block until the moment the code actually hits the declaration. The Lesson: JavaScript isn't just reading your code; it's preparing for it. Understanding the Execution Context makes debugging feel like having X-ray vision. 🦸♂️ Have you ever been bitten by the Temporal Dead Zone, or do you still find yourself reaching for var out of habit? Let’s discuss! 👇 #JavaScript #WebDevelopment #CodingTips #Frontend #Programming101

📌 Understanding Array.from() in JavaScript When working with array-like or iterable objects in JavaScript, we often need a clean way to convert them into real arrays. That’s where Array.from() becomes incredibly useful. 👉 What is Array.from()? 💠 Array.from() creates a new array from: 🔹 Array-like objects (e.g., NodeList, arguments) 🔹 Iterable objects (e.g., strings, Sets, Maps) 👉 In simple terms: It converts “not exactly arrays” into proper arrays. 👉 Why is it Important? 🔹 Converts DOM collections into arrays 🔹 Helps generate dynamic arrays 🔹 Supports transformation while creation 🔹 Cleaner alternative to loops Array.from() is a powerful utility method that simplifies working with iterable and array-like data structures. Mastering it improves code readability and makes your JavaScript more expressive and efficient. #JavaScript #Frontend #WebDevelopment #CodingTips #LearnToCode

JavaScript Internals: What Actually Happens with var vs let? Most explanations stop at: • var is function-scoped • let is block-scoped But internally, the difference is deeper. 🔹 Execution Context Creation Phase When JS runs, it creates an Execution Context with: 1️⃣ Variable Environment 2️⃣ Lexical Environment 🔴 How var Works Internally • Stored inside the Variable Environment • Hoisted and initialized with undefined • In global scope, attached to the global object (window in browser) Example: console.log(a); // undefined var a = 10; During memory phase: var a = undefined; 🟢 How let Works Internally • Stored inside the Lexical Environment • Hoisted but NOT initialized • Placed inside the Temporal Dead Zone (TDZ) • Not attached to the global object Example: console.log(b); // ReferenceError let b = 20; Memory is allocated, but access before initialization throws error. 🔥 Key Engine-Level Difference var → Accessible before assignment (value: undefined) → Attached to global object → No block scope let → Hoisted but inaccessible (TDZ) → Block scoped → Not part of global object Understanding this helps in: • Avoiding accidental globals • Preventing hoisting bugs • Writing predictable async code • Debugging production issues JavaScript behavior is not “magic” — it’s execution context design. #JavaScript #FrontendDevelopment #ReactNative #WebDevelopment #ProgrammingInternals

🚀 Day 75 — Visualizing the JavaScript Call Stack Today I learned how JavaScript actually executes code behind the scenes using something called the Call Stack. Understanding this completely changed how I think about function execution. 🧠 What is the Call Stack? The Call Stack is a mechanism used by JavaScript to keep track of function execution. 👉 JavaScript is single-threaded, meaning it executes one task at a time. So whenever a function runs, it is added to the stack. 🔹 How It Works Think of it like a stack of plates: ✅ New function → placed on top ✅ Function finished → removed from top This follows the rule: LIFO (Last In, First Out) 🔍 Example function third() { console.log("Third function"); } function second() { third(); console.log("Second function"); } function first() { second(); console.log("First function"); } first(); ⚙ Execution Flow (Step by Step) 1️⃣ first() added to Call Stack 2️⃣ second() added 3️⃣ third() added 4️⃣ third() executes → removed 5️⃣ second() executes → removed 6️⃣ first() executes → removed Finally → Stack becomes empty ✅ 📌 Why Call Stack Matters Understanding Call Stack helps explain: ✅ Function execution order ✅ Debugging errors ✅ Stack Overflow errors ✅ Infinite recursion problems ✅ Async behavior understanding ⚠ Example of Stack Overflow function repeat() { repeat(); } repeat(); Since the function never stops, the stack keeps growing until: ❌ Maximum Call Stack Size Exceeded 💡 Key Learning JavaScript doesn’t randomly run code. Every function waits its turn inside the Call Stack, making execution predictable and structured. Understanding this made debugging much easier for me. #Day75 #JavaScript #CallStack #WebDevelopment #LearningInPublic #DeveloperJourney

✨ 𝗗𝗮𝘆 𝟴 𝗼𝗳 𝗠𝘆 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 🚀 Today I explored 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝘁𝗵𝗲𝗶𝗿 𝗠𝗲𝗺𝗼𝗿𝘆 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 𝗶𝗻-𝗱𝗲𝗽𝘁𝗵, and learned how objects are actually structured behind the scenes in memory. I discovered that JavaScript objects are stored in the heap, and the variable holds a reference (pointer) in the stack. But what’s more interesting is that internally, objects have different pointers:   • 𝗠𝗮𝗽 𝗣𝗼𝗶𝗻𝘁𝗲𝗿 → points to the object’s hidden class (structure and layout of properties)   • 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀 𝗣𝗼𝗶𝗻𝘁𝗲𝗿 → points to where named properties are stored   • 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗣𝗼𝗶𝗻𝘁𝗲𝗿 → points to indexed elements (used especially in arrays) This explains how JavaScript engines optimize objects for performance and access speed. Understanding these low-level details helps me see JavaScript beyond syntax — it’s helping me understand how things really work under the hood. Building strong fundamentals step by step. #JavaScript #100DaysOfCode #WebDevelopment #LearningJourney #FrontendDevelopment #ComputerScience

Post Title: Demystifying JavaScript Hoisting & Execution Context 🧠💻 Ever wondered why you can access a variable in JavaScript before you’ve even declared it? Or why let and const sometimes throw a "Temporal Dead Zone" error while var just gives you undefined? I recently broke down these concepts on the whiteboard, and they are the "make or break" fundamentals for every JS developer. Here’s the recap: 1. Hoisting: The "Mental Move" JavaScript moves declarations to the top of their scope during the compilation phase. But not all declarations are treated equally: var: Hoisted and initialized as undefined. let & const: Hoisted but not initialized. They live in the Temporal Dead Zone (TDZ) until the code reaches their declaration. Function Declarations: Fully hoisted! You can call the function even before it's written in the script. Arrow Functions/Expressions: Treated like variables (meaning no hoisting if you use let or const). 2. Behind the Scenes: The Global Execution Context (GEC) The whiteboard illustrates how the JS Engine handles your code in two distinct phases: Memory Creation Phase: The engine scans the code and allocates memory for variables and functions. (e.g., a becomes undefined, c() gets its entire code block). Code Execution Phase: The engine executes the code line-by-line, assigning values (e.g., a = 10) and executing function calls. 3. The Call Stack Every time a function like c() is called, a new Execution Context is pushed onto the Call Stack. Once the function finishes, it’s popped off. Understanding this stack is the key to mastering recursion and debugging "Stack Overflow" errors! 💡 Pro-Tip: Always use let and const to avoid the "undefined" bugs that come with var hoisting. Clean code is predictable code! What’s one JS concept that took you a while to "click"? Let’s discuss in the comments! 👇 #JavaScript #WebDevelopment #ProgrammingTips #CodingLife #SoftwareEngineering #Frontend

Most developers reach for IDs, classes, or extra state before remembering this: JavaScript already gives you a clean way to attach structured metadata directly to DOM elements. If you have ever used data-* attributes in HTML, you can access them in JavaScript through the dataset property. No parsing. No brittle string manipulation. No unnecessary DOM lookups. It is simple, readable, and surprisingly underused. This pattern is especially useful for event delegation, lightweight UI state, dynamic lists, and keeping behaviour close to the element it belongs to. Small details like this make frontend systems cleaner and easier to reason about without introducing extra abstractions. Not everything needs global state. Sometimes the platform already solved the problem. In the example attached, notice how `data-user-id` becomes `dataset.userId`. Hyphenated attributes automatically convert to camelCase. It is a small feature, but small features compound into cleaner, more maintainable frontend code. What is one underrated JavaScript feature you think more developers should use? Github Gist: https://lnkd.in/d6pjMP7J #webdevelopment #javascript #cleancode

Reversing a string in JavaScript can be done in more than one way. I revisited this problem today and tried three approaches, each with a different mindset: // 1. Using built-in methods const reverse1 = (str) => str.split("").reverse().join(""); // 2. Using a loop (more control) function reverse2(str) {  let result = "";  for (let i = str.length - 1; i >= 0; i--) {   result += str[i];  }  return result; } // 3. Using reduce (functional style) const reverse3 = (str) =>  str.split("").reduce((acc, char) => char + acc, ""); console.log(reverse1("hello")); //"olleh" console.log(reverse2("hello")); //"olleh" console.log(reverse3("hello")); //"olleh" Methods I used: • Built-in methods → concise and readable • Loop → full control and clarity • reduce → functional and expressive This reminded me that in real projects, how you think about a problem matters as much as the answer itself. Still learning, still building, still showing up. #JavaScript #FrontendDevelopment #LearningInPublic #JuniorDeveloper

🚀 Understanding the JavaScript Event Loop (Microtasks vs Macrotasks) Consider this code: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); What’s the output? Many expect: Start Timeout Promise End But actual output is: Start End Promise Timeout Why? Because of the Event Loop. JavaScript handles tasks in two major queues: • Microtasks (Promises, queueMicrotask) • Macrotasks (setTimeout, setInterval) Execution order: 1️⃣ Synchronous code runs first 2️⃣ Microtasks run next 3️⃣ Then Macrotasks Even if setTimeout has 0ms delay, it still waits for the macrotask queue. Understanding this explains: • Why some async bugs feel “random” • Why Promises run before setTimeout • Why UI updates sometimes behave unexpectedly JavaScript isn’t single-threaded chaos. It’s single-threaded with a well-defined event model. Understanding the Event Loop changes how you debug async code. What async behavior confused you the most before learning this? #javascript #frontenddeveloper #webdevelopment #eventloop #softwareengineering