JavaScript Object Methods: keys, values, entries

🧠 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 🚀

🧠 Day 28 — WeakMap & WeakSet in JavaScript (Simplified) You’ve seen Map & Set — now let’s look at their smarter versions 👀 --- 🔍 What makes them “Weak”? 👉 They hold weak references to objects 👉 If the object is removed, it can be garbage collected automatically --- ⚡ 1. WeakMap 👉 Key-value pairs (like Map) 👉 Keys must be objects only let obj = { name: "John" }; const weakMap = new WeakMap(); weakMap.set(obj, "data"); console.log(weakMap.get(obj)); // data --- ⚠️ Important ❌ Keys must be objects ❌ Not iterable (no loop) ❌ No size property --- ⚡ 2. WeakSet 👉 Collection of unique objects let obj1 = { id: 1 }; const weakSet = new WeakSet(); weakSet.add(obj1); console.log(weakSet.has(obj1)); // true --- 🧠 Why use them? 👉 Helps with memory management 👉 Avoids memory leaks 👉 Used internally in frameworks --- 🚀 Real-world use ✔ Caching objects temporarily ✔ Tracking object references ✔ Managing private data --- 💡 One-line takeaway: 👉 “WeakMap & WeakSet allow objects to be garbage collected automatically.” --- If you want to go deeper into JavaScript internals, this is a great concept. #JavaScript #WeakMap #WeakSet #WebDevelopment #Frontend #100DaysOfCode 🚀

I can't believe we used to write fake `*ngIf` statements just to declare a local variable in HTML. 🤯 For years, if you needed to evaluate something once and use it multiple times in an Angular template, you had to hack the structural directives: 1. Wrap your markup in an `<ng-container>`. 2. Write `*ngIf="myCalculation() as result"`. 3. Watch your UI completely disappear if the calculation returned `0` or `false`. 4. Reluctantly move purely UI-related logic back into the TypeScript file to avoid the bug. It worked, but it was a massive workaround for a missing framework feature. Enter the **`@let` template syntax**. 🎯 We can now define local variables natively right inside our templates, just like writing a `const` in JavaScript. // The Old Way ❌ <ng-container *ngIf="calculateTotal() as total"> <p>Total: {{ total }}</p> <p>Tax: {{ total * 0.2 }}</p> </ng-container> // The New Way ✅ @let total = calculateTotal(); <p>Total: {{ total }}</p> <p>Tax: {{ total * 0.2 }}</p> No more disappearing DOM elements due to falsy values. No more unnecessary structural wrappers. It keeps the component class clean and lets the template handle its own display logic beautifully. Are you using the `@let` syntax to clean up your views yet, or still relying on the old `*ngIf` alias trick? #Angular #FrontendDevelopment #WebArchitecture #CleanCode #SoftwareEngineering

Many developers confuse slice() and splice() in JavaScript. The difference is simple but important. 1️⃣ slice() — Creates a copy slice() returns a portion of an array without changing the original array. Example: const numbers = [10, 20, 30, 40, 50] const result = numbers.slice(1, 4) Result → [20, 30, 40] Original → [10, 20, 30, 40, 50] Use it when you want to extract data safely without modifying the source array. 2️⃣ splice() - Modifies the array splice() changes the original array. It can remove, add, or replace elements. Example 1 - Remove items: const numbers = [10, 20, 30, 40, 50] numbers.splice(2, 2) Result → [10, 20, 50] It removed 30 and 40 from the original array. Example 2 - Add Items : constnumbers= [10, 20, 50]; numbers.splice(2, 0, 30, 40); console.log(numbers); // [10, 20, 30, 40, 50] Explanation: It Start at index 2, Remove 0 items and Insert 30 and 40 Key Difference slice() → non-destructive (does not modify the array) splice() → destructive (modifies the array) Quick rule to remember slice → copy splice → change Understanding this small difference prevents many bugs, especially when working with React state and immutable data patterns. #javascript #webdevelopment #frontend #reactjs #programming

Your function started with three parameters. Now it has seven, half are optional, and one wrong position silently breaks everything. The Builder Pattern offers a cleaner way to construct complex objects in JavaScript—with chained methods, built-in validation, and sensible defaults. Learn when it's the right tool and when simpler alternatives work better.

🧠 Day 22 — JavaScript Array Methods (map, filter, reduce) If you work with arrays, these 3 methods are a must-know 🚀 --- ⚡ 1. map() 👉 Transforms each element 👉 Returns a new array const nums = [1, 2, 3]; const doubled = nums .map(n => n * 2); console.log(doubled); // [2, 4, 6] --- ⚡ 2. filter() 👉 Filters elements based on condition const nums = [1, 2, 3, 4]; const even = nums.filter(n => n % 2 === 0); console.log(even); // [2, 4] --- ⚡ 3. reduce() 👉 Reduces array to a single value const nums = [1, 2, 3]; const sum = nums.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 6 --- 🧠 Quick Difference map → transform filter → select reduce → combine --- 🚀 Why it matters ✔ Cleaner & functional code ✔ Less loops, more readability ✔ Widely used in React & real apps --- 💡 One-line takeaway: 👉 “map transforms, filter selects, reduce combines.” --- Master these, and your JavaScript will feel much more powerful. #JavaScript #ArrayMethods #WebDevelopment #Frontend #100DaysOfCode 🚀

🧠 Day 25 — JavaScript Destructuring (Advanced Use Cases) Destructuring isn’t just syntax sugar — it can make your code cleaner and more powerful 🚀 --- 🔍 What is Destructuring? 👉 Extract values from arrays/objects into variables --- ⚡ 1. Object Destructuring const user = { name: "John", age: 25 }; const { name, age } = user; --- ⚡ 2. Rename Variables const { name: userName } = user; console.log(userName); // John --- ⚡ 3. Default Values const { city = "Delhi" } = user; --- ⚡ 4. Nested Destructuring const user = { profile: { name: "John" } }; const { profile: { name } } = user; --- ⚡ 5. Array Destructuring const arr = [1, 2, 3]; const [a, b] = arr; --- ⚡ 6. Skip Values const [first, , third] = arr; --- 🚀 Why it matters ✔ Cleaner and shorter code ✔ Easier data extraction ✔ Widely used in React (props, hooks) --- 💡 One-line takeaway: 👉 “Destructuring lets you pull out exactly what you need, cleanly.” --- Master this, and your code readability improves instantly. #JavaScript #Destructuring #WebDevelopment #Frontend #100DaysOfCode 🚀

JavaScript prototypes clicked for me the moment I stopped thinking about copying and started thinking about linking. Here's the mental model that made it stick 👇 🔹 The core idea Every object in JavaScript has a hidden link to another object — its prototype. When you access a property, JS doesn't just look at the object itself. It walks the chain: Check the object Not found? Check its prototype Still not found? Check the prototype's prototype Keep going until null That's the prototype chain. Simple as that. 🔹 See it in action jsconst user = { name: "Aman" }; const admin = { isAdmin: true }; admin.__proto__ = user; console.log(admin.name); // "Aman" ✅ admin doesn't have name — but JS finds it one level up. 🔹 Why constructor functions use this jsfunction User(name) { this.name = name; } User.prototype.sayHi = function () { console.log(`Hi, I am ${this.name}`); }; Every User instance shares one sayHi method. Not copied — linked. That's free memory efficiency, built into the language. 🔹 Two things worth keeping straight prototype → a property on constructor functions __proto__ → the actual link on any object The modern, cleaner way to set that link: jsconst obj = Object.create(user); 🔹 Why bother understanding this? Because it shows up everywhere — class syntax, frameworks, unexpected undefined bugs, performance decisions. Prototypes aren't a quirk. They are the inheritance model. One line to remember: JS doesn't copy properties. It searches a chain of linked objects. #JavaScript #Frontend #WebDevelopment #Programming

🧠 𝗗𝗼 𝗬𝗼𝘂 𝗥𝗲𝗮𝗹𝗹𝘆 𝗞𝗻𝗼𝘄 𝗪𝗵𝗮𝘁 `new` 𝗗𝗼𝗲𝘀 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? ⤵️  The new Keyword in JavaScript: What Actually Happens ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/dyAXzDHD 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ What actually happens internally when you use `new`   ⇢ The 4-step process: create → link → run → return   ⇢ Constructor functions & how they really work   ⇢ Prototype linking & why it matters   ⇢ How instances share methods but keep separate data   ⇢ Recreating `new` manually (deep understanding)   ⇢ What goes wrong when you forget `new`   ⇢ Debugging real-world bugs related to constructors   ⇢ new vs ES6 classes — what's really different   ⇢ Key tradeoffs & hidden pitfalls  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #SystemDesign #Frontend #Hashnode

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