Learning JavaScript Objects: Dot vs Bracket Notation

What is an Object? In JavaScript, an object is a data type that stores key-value pairs. Objects are used to store related information together. Why Use Objects? Organize Data: Store multiple pieces of information together. Dynamic Access: Access values using their keys. Complex Data Structures: Can store arrays, other objects, etc. Reusable Code: Easy to use in multiple functions or processes. #javascript #react #webdesign #webDeveloping

𝐄𝐯𝐞𝐫 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 𝐰𝐡𝐞𝐫𝐞 𝐲𝐨𝐮𝐫 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐥𝐢𝐯𝐞? Let’s make it super simple. Imagine your brain has two spaces — a tiny desk for quick tasks and a big cupboard for storing bulky stuff. That’s exactly how JavaScript manages memory 👇 🧠 𝕊𝕥𝕒𝕔𝕜 𝕄𝕖𝕞𝕠𝕣𝕪 = The Desk This is where small, quick items go — numbers, strings, booleans. It’s fast, neat, and clears up right after you’re done. 𝚕𝚎𝚝 𝚗𝚊𝚖𝚎 = "𝙰𝚗𝚊𝚜"; 𝚕𝚎𝚝 𝚊𝚐𝚎 = 𝟸𝟼; Both variables fit nicely on the stack. 📦 ℍ𝕖𝕒𝕡 𝕄𝕖𝕞𝕠𝕣𝕪 = The Cupboard This is for bigger and more complex things — objects, arrays, functions. It takes more space and time to access. 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛 = { 𝚗𝚊𝚖𝚎: "𝙰𝚗𝚊𝚜", 𝚊𝚐𝚎: 𝟸𝟼 }; The object is stored in the heap, but a reference to it sits in the stack. ⚖️ In short: Stack → fast, organized, for simple data Heap → flexible, powerful, for dynamic data Understanding this helps you write cleaner code, avoid memory leaks, and truly know what happens “under the hood.” #JavaScript #CodingTips #WebDevelopment #LearnInPublic #Frontend #AnasKhan

𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗦𝗲𝗺𝗶𝗰𝗼𝗹𝗼𝗻 𝗜𝗻𝘀𝗲𝗿𝘁𝗶𝗼𝗻 (𝗔𝗦𝗜) 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 --> 𝘁𝗵𝗲 “𝗵𝗲𝗹𝗽𝗳𝘂𝗹” 𝗳𝗲𝗮𝘁𝘂𝗿𝗲 𝘁𝗵𝗮𝘁 𝘀𝗼𝗺𝗲𝘁𝗶𝗺𝗲𝘀 𝗵𝗲𝗹𝗽𝘀 𝗮 𝗹𝗶𝘁𝘁𝗹𝗲 𝘁𝗼𝗼 𝗺𝘂𝗰𝗵. JavaScript automatically inserts semicolons (;) when it thinks you forgot them. Sounds convenient. Well... sometimes it can change your code’s meaning entirely! 𝗛𝗲𝗿𝗲’𝘀 𝗮 𝗰𝗹𝗮𝘀𝘀𝗶𝗰 𝗲𝘅𝗮𝗺𝗽𝗹𝗲 👇 function getData() {  return  {   message: "Hello World"  } } console.log(getData()); You’d expect it to log { message: "Hello World" } 𝗕𝘂𝘁 𝘀𝘂𝗿𝗽𝗿𝗶𝘀𝗲 --> It logs undefined 𝗪𝗵𝘆? Because ASI inserts a semicolon right after return return; // inserted automatically {  message: "Hello World" } So the function actually returns nothing. 𝗧𝗼 𝗳𝗶𝘅 𝗶𝘁: function getData() { return { message: "Hello World" } } 𝗧𝗶𝗽: Always keep the return and the value on the same line. ASI is like that friend who “fixes” your code but never tells you what they changed. Always use semicolons intentionally, not accidentally. #JavaScript #WebDevelopment #Frontend #CleanCode #DevCommunity

🎯 JavaScript Mini Project — Exploring Arrays & Objects In this practice project, I explored core JavaScript concepts including 1D Arrays, 2D Arrays, Keyed Arrays, Objects, and the use of the new keyword for creating arrays and objects. 💡 The project demonstrates how data can be structured, stored, and accessed in different ways — from simple array lists to complex objects with properties. I also created practical examples using the new Array() and new Object() constructors, as well as custom object creation through functions. ⚙️ Key Concepts Covered: 1D & 2D Arrays for structured data representation Keyed Arrays for named data access Object creation and property handling new keyword usage for Arrays and Objects Function-based object creation for better reusability ✨ This exercise helped strengthen my understanding of JavaScript data handling and improved how I visualize real-world data structures in code. #JavaScript #LearningByCoding #Arrays #Objects #WebDevelopment #CodingPractice #JSBasics

Understanding Type Conversion in JavaScript" After learning about Data Types, today I explored Type Conversion — the process of changing one data type to another in JavaScript. It helps when we need to handle user inputs, calculations, or string operations properly. 💡 There are two types 👇 1️⃣ Implicit Conversion (Type Coercion) – JavaScript automatically converts the type console.log('5' + 2); // "52" (number converted to string) console.log('5' - 2); // 3 (string converted to number) 2️⃣ Explicit Conversion (Manual Conversion) – done by the developer let str = "100"; let num = Number(str); console.log(num); // 100 (converted to number) let value = 50; let text = String(value); console.log(text); // "50" (converted to string) Type conversion helps make code more reliable and avoids unexpected results. 🚀 #JavaScript #WebDevelopment #TypeConversion #LearnToCode #FrontendDevelopment #CodingJourney #ProgrammingBasics #100DaysOfCode #TechLearning #DeveloperCommunity

🚀 Day 11 of Deep Dive into JavaScript — Data Hiding & Encapsulation with Closures 🔒 function Counter() {  var count = 0; // private  this.increment = function () {   count++;   console.log(count);  };  this.decrement = function () {   count--;   console.log(count);  }; } const myCounter = new Counter(); myCounter.increment(); // 1 myCounter.increment(); // 2 console.log(myCounter.count); // undefined Explanation new Counter() creates a new object and sets this to that object. count is private — only accessible inside the increment/decrement functions. Each new Counter() call creates an independent counter with its own private count. myCounter.count is undefined because count is not attached to this — it’s only accessible via the closure. ✅ Key takeaway: You can combine closures with constructor functions to create private state while exposing public methods through this. Let's Discuss More about this code in Comment Section ?

Partition Array by Predicate (Fast & Simple) Need to split data into two buckets—approved vs rejected, in-stock vs out-of-stock, active vs inactive? Use a tiny partition helper to divide an array into [pass, fail] in one sweep. It’s fast, readable, and perfect for real-world lists and filters. Why it’s production-ready Single pass over data (O(n)) Preserves original order in both buckets Works with primitives or objects (any predicate) Drop it into your toolkit and keep your array logic clean. ⚡ #JavaScript #VanillaJS #Arrays #CleanCode #WebDev

We’ve all been there debugging a perfectly fine API response... only to realize your data is failing validation because of a few invisible spaces. These trailing spaces can silently break string comparisons, UI bindings, and even backend validations. So, I wrote a simple recursive utility in JavaScript to clean them deeply. 🧹 𝗪𝗼𝗿𝗸𝘀 𝗳𝗼𝗿: Nested objects Arrays Deeply nested strings 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝗲𝗿𝘀 𝗹𝗼𝘃𝗲 𝗮𝘀𝗸𝗶𝗻𝗴 𝗮𝗯𝗼𝘂𝘁: Recursion Object traversal Data normalization or deep cloning This question can easily appear as: “Write a function to remove spaces from all string values in a nested object.” #JavaScript #WebDevelopment #CodingTips #Frontend

🤯 Why does my component re-render even though props look the same?? I hit this issue while optimizing a data table. The child component kept re-rendering on every state change, even when the data looked identical. Here’s a simplified version: function Parent() { const [count, setCount] = useState(0); const filters = { status: "active" }; return ( <> <button onClick={() => setCount(c => c + 1)}>{count}</button> <Table filters={filters} /> </> ); } filters looks the same every render, right? But React thinks it’s new every time - because a new object is created on each render. 🧠The Root Cause React uses shallow comparison for props. Even if two objects have identical content, their references are different - and that’s enough to trigger a re-render. ✅The Fix Stabilize your props using useMemo or useCallback: const filters = useMemo(() => ({ status: "active" }), []); Now filters keeps the same reference between renders 💡 Takeaway > React re-renders not because of what’s inside your props, but because of what they point to. Stability in references = stability in performance. 🗣️ Your Turn Have you ever chased a “mystery re-render” before? What tools do you use to debug them - React DevTools, why-did-you-render, or console logs? #ReactJS #WebDevelopment #FrontendDevelopment #PerformanceOptimization #CleanCode #JavaScript #ReactHooks #DevCommunity #LearnInPublic

JavaScript for 15 Days – Day 3: Data Types Every value in JavaScript has a data type, it tells the program what kind of data we’re working with. Today, you'll explore the difference between primitive and non-primitive data types, and how JavaScript uses them to store and process information. Primitive types: String, Number, Boolean, Null, Undefined, Symbol, BigInt Non-primitive types: Object, Array, Function Example 👇 let name = "Moussa"; // String let age = 27; // Number let skills = ["JS", "HTML", "CSS"]; // Array 💡 Lesson learned: Understanding data types makes debugging easier and helps you write cleaner, more reliable code. #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearnToCode #15DaysJS #DevPerDay