Master JavaScript Array Methods (map, filter, reduce)

Day 16 — Memoization in JavaScript (Boost Performance) Want to make your functions faster without changing logic? 👉 Use Memoization 🚀 --- 🔍 What is Memoization? 👉 Memoization is an optimization technique where we cache results of expensive function calls and reuse them. --- 📌 Without Memoization function slowSquare(n) { console.log("Calculating..."); return n * n; } slowSquare(5); // Calculating... slowSquare(5); // Calculating again ❌ --- ⚡ With Memoization function memoize(fn) { let cache = {}; return function (n) { if (cache[n]) { return cache[n]; } let result = fn(n); cache[n] = result; return result; }; } const fastSquare = memoize((n) => { console.log("Calculating..."); return n * n; }); fastSquare(5); // Calculating... fastSquare(5); // Uses cache ✅ --- 🧠 What’s happening? 👉 First call → calculates result 👉 Next call → returns from cache 👉 No re-computation --- 🚀 Why it matters ✔ Improves performance ✔ Avoids repeated calculations ✔ Useful in heavy computations ✔ Used in React (useMemo) --- 💡 One-line takeaway: 👉 “Don’t recompute — reuse cached results.” --- If your function is slow, memoization can make it fast instantly. #JavaScript #Performance #Memoization #WebDevelopment #Frontend #100DaysOfCode

🧠 Day 27 — Set & Map in JavaScript (Simplified) JavaScript gives you more than just arrays & objects — meet Set and Map 🚀 --- ⚡ 1. Set 👉 A collection of unique values const set = new Set([1, 2, 2, 3]); console.log(set); // {1, 2, 3} --- 🔧 Common Methods set.add(4); set.has(2); // true set.delete(1); 👉 Perfect for removing duplicates --- ⚡ 2. Map 👉 Stores key-value pairs (like objects, but better in some cases) const map = new Map(); map.set("name", "John"); map.set(1, "Number key"); console.log(map.get("name")); // John --- 🧠 Why Map over Object? ✔ Keys can be any type (not just strings) ✔ Maintains insertion order ✔ Better performance in some cases --- 🚀 Why it matters ✔ Cleaner data handling ✔ Useful in real-world apps ✔ Avoid common object limitations --- 💡 One-line takeaway: 👉 “Set handles unique values, Map handles flexible key-value pairs.” --- Once you start using these, your data handling becomes much more powerful. #JavaScript #Set #Map #WebDevelopment #Frontend #100DaysOfCode 🚀

🔍 JavaScript Concept You Might Have Heard (First-Class Functions/Citizens) You write this: function greet() { return "Hello"; } const sayHi = greet; console.log(sayHi()); // ? 👉 Output: Hello Wait… 👉 We assigned a function to a variable? 👉 And it still works? Now look at this 👇 function greet() { return "Hello"; } function execute(fn) { return fn(); } console.log(execute(greet)); // ? 👉 Passing function as argument? 👉 And calling it later? This is why JavaScript functions are called First-Class Functions 📌 What does that mean? 👉 Functions are treated like any other value 📌 What can you do with them? ✔ Assign to variables ✔ Pass as arguments ✔ Return from another function ✔ Store inside objects/arrays Example 👇 function outer() { return function () { return "Inside function"; }; } console.log(outer()()); // ? 👉 Function returning another function 📌 Why do we need this? 👉 This is the foundation of: ✔ Callbacks ✔ Closures ✔ Functional programming ✔ Event handling 💡 Takeaway: ✔ Functions are just values in JavaScript ✔ You can pass them, store them, return them ✔ That’s why they are “first-class citizens” 👉 If you understand this, you understand half of JavaScript 🔁 Save this for later 💬 Comment “function” if this clicked ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Behavior You Might Have Seen (Prototype Chain) You write this: const arr = [1, 2, 3]; console.log(arr.toString()); // ? 👉 Did you define toString on this array? 👉 Did you even define it anywhere? No. Still it works. Now think step by step 👇 When you do: 👉 arr.toString JavaScript checks: Inside arr → ❌ not found Inside Array.prototype → ❌ not found Inside Object.prototype → ✔ found This step-by-step lookup is called the Prototype Chain 📌 What is Prototype Chain? 👉 It’s the process JavaScript uses to find a property by searching up through prototypes. 📌 How it works? Every object is linked to another object (its prototype) So lookup happens like this: 👉 arr → Array.prototype → Object.prototype → null Same with strings 👇 const str = "hello"; console.log(str.hasOwnProperty("length")); // ? 👉 hasOwnProperty is not in string JS finds it here: 👉 str → String.prototype → Object.prototype 📌 Important point: 👉 JavaScript keeps searching until it finds the property or reaches null 💡 Takeaway: ✔ Prototype Chain = lookup mechanism ✔ JS searches step by step ✔ That’s how all built-in methods work 👉 If you understand this, you’ll understand how JavaScript really works 💬 Comment “chain” if this clicked 🔁 Save this for later ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🚀 CSS is getting smarter — almost like JavaScript!Did you know that modern CSS now supports conditional logic (like IF statements)? 🤯While we still don’t have a direct if...else syntax, features like: ✅ @supports → Apply styles if the browser supports a feature ✅ @container → Apply styles if the parent size matches ✅ :has() → Style elements if they contain specific content ✅ @media → Apply styles if screen conditions match…are making CSS more powerful than ever. 💡 Example: Default (acts like ELSE).card { background: white; }Condition (acts like IF)@media (max-width: 600px) { .card { background: black; } }✨ This shift is huge for frontend developers — less dependency on JavaScript for UI logic and more control directly in CSS.The future? Real @when / @else support is already being discussed 👀What do you think — will CSS replace small JS logic in UI soon?#CSS #WebDevelopment #Frontend #JavaScript #Programming #Developer #ReactJS

Sharing properties across objects in JavaScript doesn’t have to be complicated 👀 Imagine you’re working on a large codebase. Multiple modules… similar functions… and suddenly you realize you’re repeating the same logic everywhere. Yeah, goodbye DRY principle 😅 This is where Object.prototype (and prototype chain) becomes really useful. In simple terms, every object in JavaScript can access properties from its prototype. So instead of redefining the same function on every object, you can define it once — and all instances can use it. Think of it like a shared layer that every object can access. That’s why when you inspect an object in the console and see __proto__/[prototypes], those are the shared properties coming from the prototype. Why this matters: - More memory efficient (no duplicate functions per object) - Keeps behavior consistent across instances - Cleaner when multiple objects need the same capability But… there are tradeoffs. If the prototype chain gets too deep, JavaScript has to walk through each level to find a property and that can impact performance. Also, modifying global prototypes can be risky if not handled carefully. Still, when used properly, this pattern is very powerful. I also tried a simple example — implementing my own map function using prototype (super basic, but fun to explore). Do you still use prototypes directly, or mostly rely on classes these days? 👀 #javascript #fundamental #prototype

🧠 Day 23 — JavaScript Object Methods (keys, values, entries) Working with objects? These methods make life much easier 🚀 --- ⚡ 1. Object.keys() 👉 Returns all keys of an object const user = { name: "John", age: 25 }; console.log(Object.keys(user)); // ["name", "age"] --- ⚡ 2. Object.values() 👉 Returns all values console.log(Object.values(user)); // ["John", 25] --- ⚡ 3. Object.entries() 👉 Returns key-value pairs as arrays console.log(Object.entries(user)); // [["name", "John"], ["age", 25]] --- 🧠 Looping Example for (let [key, value] of Object.entries(user)) { console.log(key, value); } --- 🚀 Why it matters ✔ Easy iteration over objects ✔ Cleaner code ✔ Useful in real-world data handling --- 💡 One-line takeaway: 👉 “Use keys, values, entries to work with objects easily.” --- Once you master these, handling objects becomes much smoother. #JavaScript #Objects #WebDevelopment #Frontend #100DaysOfCode 🚀

Day 5: The Shortest JavaScript Program — What happens when you write NOTHING? 📄✨ Today I learned that even if you create a totally empty .js file and run it in a browser, JavaScript is already working hard behind the scenes. 🕵️♂️ The "Shortest Program" If your file has zero lines of code, the JavaScript Engine still does three major things: Creates a Global Execution Context. Creates a window object (in browsers). Creates the this keyword. 🪟 What is window? The window is a massive object created by the JS engine that contains all the built-in methods and properties (like setTimeout, localStorage, or console) provided by the browser environment. 🧭 The this Keyword At the global level, JavaScript sets this to point directly to the window object. 👉 Proof: If you type console.log(this === window) in an empty file, it returns true! 🌐 The Global Space I also explored the Global Space—which is any code you write outside of a function. If you declare var x = 10; in the global space, it automatically gets attached to the window object. You can access it using x, window.x, or this.x. They all point to the same memory location! 💡 Key Takeaway: Anything not inside a function sits in the Global Memory Space. Keeping this space clean is vital for performance and avoiding variable name collisions in large apps! It’s fascinating to see that even before we write our first line of code, JavaScript has already set up the entire "universe" for us to work in. #JavaScript #WebDevelopment #NamasteJavaScript #ExecutionContext #WindowObject #JSFundamentals #CodingJourney #FrontendEngineer

🚀 JavaScript Project 3: Counter System Built a stste-driven counter with increment, decrement and reset actions —but this time, I focused on how engineers think, not just making it work. 🔑 Key ideas: • State is the single source of truth • UI updates are centralized ( updateUI ) • Event delegation for scalable interaction • Data-driven actions using data-* attributes • Clear UI feedback (disabled states, interaction response) 💡Biggest insight: Don't manipulate the UI directly — update state, then let the UI reflect it. 🔗 Live: https://lnkd.in/dTNy6A2M 💻 Code: https://lnkd.in/dp638D6h This is part of my journey building JavaScript systems step-by-step. More coming. #JavaScript #Frontend #WebDevelopment #LearningInPublic

A promise is just an object with two properties. The word "promise" sounds abstract. The actual thing is surprisingly concrete. When fetch() runs, JavaScript immediately returns an object - before any data has come back. That object has two properties: - value (undefined for now) - onFulfillment (an array of functions to run when value arrives) That's it. A placeholder with a slot for data and a list of what to do when it shows up. When the browser finishes the network request, it fills in value and auto-triggers everything in onFulfillment - passing the value as the argument. You get something immediately so your code can keep moving, and you attach behavior to a future value. That's the whole mechanism behind async JavaScript. Next: .then() - what it's actually doing (hint: not what the name implies). #JavaScript #WebDevelopment #SoftwareEngineering #Frontend