JavaScript forEach() Mistake: Why map() is the Correct Choice

🚨 JavaScript Hoisting – Something Most Developers Still Misunderstand Most developers say: 👉 “JavaScript moves variables to the top of the scope.” But that’s not actually what happens. Let’s test this 👇 console.log(a); var a = 10; Output: undefined Now try this: console.log(b); let b = 20; Output: ReferenceError: Cannot access 'b' before initialization 💡 Why the difference? Both var and let are hoisted. But the real difference is initialization timing. ✔ var is hoisted and initialized with undefined during the creation phase. ✔ let and const are hoisted but stay inside the Temporal Dead Zone (TDZ) until the line where they are declared. That’s why accessing them before declaration throws an error. 👉 So technically: JavaScript doesn’t “move variables to the top”. Instead, the JavaScript engine allocates memory for declarations during the creation phase of the execution context. Small detail. But it explains a lot of confusing bugs. 🔥 Understanding this deeply helps when debugging closures, scope issues, and async code. #javascript #frontend #webdevelopment #reactjs #coding #softwareengineering

⚠️ JavaScript Function Expression — A Common Corner Case That Trips Developers 🔍 The Corner Case: Hoisting Behavior console.log(add(2, 3)); // ❌ TypeError: add is not a function var add = function(a, b) { return a + b; }; 👉 Why does this fail? Because only the variable declaration (var add) is hoisted, not the function itself. So internally, JavaScript sees this as: var add; console.log(add(2, 3)); // ❌ add is undefined add = function(a, b) { return a + b; }; ✅ Now Compare with Function Declaration console.log(add(2, 3)); // ✅ 5 function add(a, b) { return a + b; } 👉 Entire function is hoisted — so it works! 💥 Another Tricky Case (Named Function Expression) const foo = function bar() { console.log(typeof bar); }; foo(); // ✅ function bar(); // ❌ ReferenceError: bar is not defined 👉 bar is only accessible inside the function, not outside! 🎯 Key Takeaways ✔ Function expressions are NOT fully hoisted ✔ Only variable declarations are hoisted (var, let, const behave differently) ✔ Named function expressions have limited scope ✔ Always define function expressions before using them #JavaScript #Frontend #CodingInterview #WebDevelopment #JSConcepts #100DaysOfCode

🚨 JavaScript Gotcha: Objects as Keys?! Take a look at this 👇 const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); // ❓ 👉 What would you expect? 123 or 456? 💡 Actual Output: 456 🤯 Why does this happen? In JavaScript, object keys are always strings or symbols. So when you use an object as a key: a[b] → a["[object Object]"] a[c] → a["[object Object]"] Both b and c are converted into the same string: "[object Object]" ⚠️ That means: a[b] = 123 sets " [object Object] " → 123 a[c] = 456 overwrites it → 456 So finally: console.log(a[b]); // 456 🧠 Key Takeaways ✅ JavaScript implicitly stringifies object keys ✅ Different objects can collide into the same key ❌ Using objects as keys in plain objects is unsafe 🔥 Pro Tip If you want to use objects as keys, use a Map instead: const map = new Map(); map.set(b, 123); map.set(c, 456); console.log(map.get(b)); // 123 ✅ ✔️ Map preserves object identity ✔️ No unexpected overwrites 💬 Final Thought JavaScript often hides complexity behind simplicity. Understanding these small quirks is what separates a developer from an expert. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #Coding #JavaScriptTips #JSConfusingParts #DevelopersLife #CodeNewbie #LearnToCode #SoftwareEngineering #TechTips #CodeQuality #CleanCode #100DaysOfCode #ProgrammingTips #DevCommunity #CodeChallenge #Debugging #JavaScriptDeveloper #MERNStack #FullStackDeveloper #ReactJS #NodeJS #WebDevTips #CodingLife

💻 JavaScript Intermediate – Custom map() Function The map() method is widely used to transform arrays. Here’s how you can implement it manually. 📌 Problem: Apply a function to each element of an array and return a new array. function customMap(arr, callback) { let result = []; for (let i = 0; i < arr.length; i++) { result.push(callback(arr[i])); } return result; } let numbers = [1, 2, 3]; let doubled = customMap(numbers, function(num) { return num * 2; }); console.log(doubled); 📤 Output: [2, 4, 6] 📖 Explanation: • map() creates a new array by applying a function to each element. • Here, we manually implemented the same logic using a loop and callback. 💡 Tip: Understanding this helps you grasp how higher-order functions work in JavaScript. #JavaScript #Coding #WebDevelopment #FrontendDevelopment #LearnToCode #ProgrammingTips

JavaScript objects have a powerful feature called Prototype that enables inheritance. In JavaScript, if an object doesn’t have a specific property or method, the engine automatically looks for it in its prototype. This process continues up the prototype chain until the property is found or the chain ends. Example: function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log("Hello, my name is " + this.name); }; const john = new Person("John"); john.greet(); Even though john doesn’t directly have the greet() method, it can still access it through Person.prototype. This mechanism allows JavaScript objects to share methods and inherit behavior efficiently. Understanding prototypes helps you better understand how inheritance and object behavior work behind the scenes in JavaScript. Follow for more JavaScript concepts explained visually. #javascript #webdevelopment #frontenddeveloper #coding #learninginpublic #100DaysOfCode

💻 JavaScript Practice: Merging Two Arrays Using a While Loop Today I practiced an important JavaScript concept — merging two arrays using a while loop. It’s a great exercise to improve logical thinking and understand how loops and indexes work together. Instead of using built-in methods like concat() or the spread operator, I tried doing it manually with a while loop. This helps in understanding how data moves step by step inside arrays. Key Idea: Start with two arrays. Use a while loop to iterate through them. Push elements into a new array until all elements are merged. Example: let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6];then let result = [1,2,3,4,5,6] Practicing these small problems helps build a stronger foundation in JavaScript logic and problem-solving. 🚀 #JavaScript #DSA #WebDevelopment #CodingPractice #FrontendDevelopment 😊

One of my favorite JavaScript one-liners: .filter(Boolean) Filtering out falsy values from an array meant chaining conditions and hoping I hadn't missed an edge case. When you pass Boolean as a callback to .filter(), JavaScript calls Boolean(item) on every element. Anything falsy - null, undefined, 0, "", false, NaN - gets removed. What you're left with is a clean array of only meaningful values. It's not just about writing less code. It's about communicating intent clearly.  This pattern shines especially in real-world scenarios: cleaning up API responses, processing user input, or combining .map() and .filter() to transform and sanitize data in a single chain. #JavaScript #WebDevelopment #SoftwareEngineering #CleanCode #Frontend #Programming #JS #CodeQuality #TechTips #Developer --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini

If JavaScript is single‑threaded, how does it still handle Promises, API calls, and Timers without blocking the application? The answer lies in the Event Loop. Let’s take a simple example: What would be the output of the below code? console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Some may guess the output to be: Start End Timeout Promise But the actual output is: Start End Promise Timeout So what is happening behind the scenes? 🔵 Synchronous Code Being synchronous, console.log("Start") and console.log("End") run immediately in the Call Stack. 🔵 Promises Resolved promises go to the Microtask Queue which is executed next. 🔵 setTimeout Timer callbacks go to the Macrotask Queue, even if the delay is '0ms', which is executed last. ✅ Simple flow to remember Synchronous Code → Promises (Microtasks) → setTimeout (Macrotasks) So even with 0 delay, Promises will always execute before setTimeout. Understanding this small but important detail will help developers debug async behavior and write more predictable JavaScript applications. #javascript #webdevelopment #eventloop #asyncprogramming

Why JavaScript feels a bit tricky sometimes, The case of "5" - 1 vs. "5" + 1 JavaScript type coercion: console.log("5" - 1); // 4 ✅ Wait... what? console.log("5" + 1); // "51" 🤯 🤔 Why does subtraction work, but addition behaves differently? "-" converts values to numbers → "5" becomes 5 → result is 4 "+" prefers string concatenation → "5" + "1" becomes "51" 🔥 Bonus examples: console.log("5" * 2); // 10 ✅ console.log("5" / 2); // 2.5 ✅ console.log("5" - "2"); // 3 ✅ console.log("5" + "2"); // "52" ❌ 😄 JavaScript sometimes feels like: “Numbers? Strings? Depends on the situation.” these small concepts really show how important fundamentals are. #JavaScript #WebDevelopment #LearningInPublic #Developers #CodingLife #Students

⚠️ The Danger of Splicing Arrays in a Loop "While solving the 'Move Zeroes' challenge today, I encountered a classic JavaScript pitfall: Modifying an array's length while iterating over it. The Mistake: Using .splice() inside a for loop. When you remove an element, the next one shifts left, and your loop index skips it! The Lesson: Always adjust your index or, even better, use the Two-Pointer technique. It's not just safer; it's much more performant for large datasets. Small bugs teach the biggest lessons! 🚀" "Did you know? JavaScript (ES6) allows you to swap array elements in a single line using destructuring : [a, b] = [b, a]. Clean, readable, and efficient!" Feel free to check out my progress and solutions on my LeetCode profile: I've shared my LeetCode profile link in the first comment below! #JavaScript #CodingTips #WebDevelopment #ProblemSolving #LeetCode #AngularDeveloper