JavaScript Fundamentals: Arrays and Objects

🔑 JavaScript Set Methods – Quick Guide 1. Creation const letters = new Set(["a","b","c"]); // from array const letters = new Set(); // empty letters.add("a"); // add values 2. Core Methods MethodPurposeExampleReturns add(value)Add unique valueletters.add("d")Updated Set delete(value)Remove valueletters.delete("a")Boolean clear()Remove all valuesletters.clear()Empty Set has(value)Check existenceletters.has("b")true/false sizeCount elementsletters.sizeNumber 3. Iteration Methods MethodPurposeExample forEach(callback)Run function for each valueletters.forEach(v => console.log(v)) values()Iterator of valuesfor (const v of letters.values()) {} keys()Same as values() (compatibility with Maps)letters.keys() entries()Iterator of [value, value] pairsletters.entries() 4. Key Notes Unique values only → duplicates ignored. Insertion order preserved. typeof set → "object". set instanceof Set → true. 📝 Exercise Answer Which method checks if a Set contains a specified value? 👉 Correct answer: has() 🎯 Memory Hooks Set = Unique Collection Think: “No duplicates, only distinct members.” add to insert, has to check, delete to remove, clear to reset.

🧠 JavaScript Array Methods — Complete Cheat Sheet While working with JavaScript daily, I realized one thing… 👉 Strong fundamentals = Faster development + Better code So I created a quick breakdown of the most useful array methods 👇 🔹 Creation Create arrays from different sources → Array.from(), Array.of(), Array.isArray() 🔹 Add / Remove Modify array elements → push(), pop(), shift(), unshift() 🔹 Modify Control structure of arrays → splice() (mutates) → slice() (non-mutating) 🔹 Searching Find values quickly → indexOf(), includes() 🔹 Find ( Important) → find(), findIndex() → findLast(), findLastIndex() 🔹 Transform / Loop → map() → transform data → filter() → select data → reduce() → build single result 🔹 Conditions → some() → at least one true → every() → all true 🔹 Sorting → sort() (mutates) → toSorted() (immutable) 🔹 Flatten / Combine → concat(), flat(), flatMap() 🔹 Modern ( Must Know) → toSpliced(), toReversed(), with() 👉 Immutable operations = cleaner code 🔹 Access → at() (supports negative index 👀) 💡 Key Learning: JavaScript arrays are not just lists — they are powerful tools to write clean, efficient, and scalable code. Understanding when to use: → map vs forEach → filter vs find → mutable vs immutable methods …can completely change your coding style 🚀 📌 Tip: Start using more immutable methods — they help avoid bugs in large applications. Which array method do you use the most? 🤔 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareDevelopment

🧠 𝗗𝗼 𝗬𝗼𝘂 𝗥𝗲𝗮𝗹𝗹𝘆 𝗞𝗻𝗼𝘄 𝗪𝗵𝗮𝘁 `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 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 🚀

🚀 ECMAScript 2025 — Not just another update. Some features actually change how we write JavaScript. Instead of listing everything, here are the ones that actually matter with real examples 👇 --- 👉 1. Iterator Helpers (Better Performance) Before (creates multiple arrays): const result = [1,2,3,4] .filter(x => x > 2) .map(x => x * 2); Now (lazy execution, no extra arrays): const result = [1,2,3,4] .values() .filter(x => x > 2) .map(x => x * 2) .toArray(); ✔ Cleaner ✔ Faster for large datasets --- 👉 2. New Set Methods (Finally useful Sets) const a = new Set([1,2,3]); const b = new Set([2,3,4]); console.log(a.union(b)); // {1,2,3,4} console.log(a.intersection(b)); // {2,3} console.log(a.difference(b)); // {1} console.log(a.symmetricDifference(b));// {1,4} ✔ No more manual loops ✔ Much cleaner logic --- 👉 3. JSON Modules (Direct Import) import config from './config.json' with { type: 'json' }; console.log(config.apiUrl); ✔ No extra parsing ✔ Cleaner configs --- 👉 4. Promise.try() (Cleaner Error Handling) Promise.try(() => riskyFunction()) .then(res => console.log(res)) .catch(err => console.error(err)); --- 💡 My Take: Most JS updates are incremental. But features like Iterator Helpers & Set methods actually improve how we think about data handling. If you're ignoring these, you're just writing older JS in a newer environment. --- #JavaScript #WebDevelopment #Frontend #NodeJS #Programming #ECMAScript

🚀 Mastering JavaScript Data Types: The Essentials! 🚀 If you are diving into the world of web development, understanding how JavaScript handles data is your first step to success. In JavaScript, data types are broadly divided into two main categories: Primitive and Non-Primitive. Here is a simple breakdown to help you remember them: 🔹 Primitive Types (The Basic Building Blocks) 🔹 These are simple, single values: 🧵 String: Used for text (e.g., 'Hello'). 🔢 Number: Used for numeric values (e.g., 123). ✅ Boolean: Represents a logical entity—either true or false. ❓ Undefined: Indicates a variable that has been declared but not yet assigned a value. 🕳️ Null: Represents the intentional absence of any object value. 🆔 Symbol: Used to create unique identifiers. 🐘 BigInt: Used for integers that are too large to be represented by the standard Number type. 🔸 Non-Primitive Types (The Complex Structures) 🔸 These can store collections of data or more complex entities: 📦 Object: A collection of properties (written as { }). 📜 Array: A list-like object used to store multiple values in a single variable (written as [ ]). ⚙️ Function: A block of code designed to perform a particular task (written as ( )) . Understanding these is key to writing cleaner and more efficient code! 💻✨ Which data type do you find yourself using the most in your projects? Let’s chat in the comments! 👇 #JavaScript #CodingTips #WebDevelopment #Programming #SoftwareEngineering #Frontend #TechLearning #JavaScriptDataTypes

𝗜 𝘀𝘁𝗮𝗿𝘁𝗲𝗱 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗮𝗿𝗿𝗮𝘆 𝗺𝗲𝘁𝗵𝗼𝗱𝘀… 𝗮𝗻𝗱 𝗴𝗼𝘁 𝗰𝗼𝗻𝗳𝘂𝘀𝗲𝗱 𝗳𝗮𝘀𝘁. Sometimes my data changed unexpectedly, sometimes it didn’t. The reason? I didn’t understand shallow copy vs deep copy. 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁, 𝗼𝗯𝗷𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝗮𝗿𝗿𝗮𝘆𝘀 𝗮𝗿𝗲 𝘀𝘁𝗼𝗿𝗲𝗱 𝗯𝘆 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲. 𝗦𝗼 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 “𝗰𝗼𝗽𝘆” 𝘁𝗵𝗲𝗺, 𝘆𝗼𝘂 𝗺𝗶𝗴𝗵𝘁 𝘀𝘁𝗶𝗹𝗹 𝗯𝗲 𝗽𝗼𝗶𝗻𝘁𝗶𝗻𝗴 𝘁𝗼 𝘁𝗵𝗲 𝘀𝗮𝗺𝗲 𝗱𝗮𝘁𝗮. That’s why methods like slice() and concat() can be tricky—they create shallow copies, not deep ones. If you're learning JS, don’t skip this concept. It makes everything much clearer. I wrote a short blog explaining this with examples—would love your feedback. 𝗟𝗶𝗻𝗸: https://lnkd.in/djWsqePD Senthil Kumar Thangavel DHILEEPAN DHANAPAL MentorBridge #javascript #shallowcopy #deepcopy #arraymethods #es6 #frontend #react #blogging #mentorbridge

JavaScript Proxy — A Hidden Superpower You Should Know Most of us create objects like this: const frameworkName = { name: "Next JS" }; But what if you could intercept and control every operation on this object? That’s exactly what JavaScript Proxy does. Think of it like a gatekeeper sitting in front of your object — it can monitor, modify, or block any interaction. const frameworkName = { name: "Angular" }; const proxyFramework = new Proxy(frameworkName, { get(target, prop) { console.log(`Reading ${prop}`); return target[prop]; }, set(target, prop, value) { console.log(`Updating ${prop} to ${value}`); if (value === "React") { console.log("React is not allowed!"); throw new Error("React is not allowed!"); // Throw an error to prevent the update return false; // Prevent the update } target[prop] = value; return true; } }); proxyFramework.name; // 👉 Reading name proxyFramework.name = "Next"; Why should you care? ✔ Track changes (great for debugging) ✔ Add validation before updating values ✔ Build reactive behavior (like frameworks do) ✔ Control or restrict access to data Real-world use cases: • Form validation without extra libraries • Logging state changes for debugging • Building custom state management • Data sanitization before saving Pro Tip: Frameworks like Vue use Proxy internally to make data reactive. Understanding this can level up your frontend skills. Have you used Proxy in your projects, or are you still sticking with plain objects? #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #Coding #Programming #LearnToCode

Day 8/100 of JavaScript 🚀 Today’s Topic: Objects and their manipulation Objects in JavaScript store data in key-value pairs Example: const user = { name: "Apsar", age: 24 }; 🔹Accessing values user.name user["age"] 🔹Adding / updating user.city = "Chennai"; user.age = 25; 🔹Deleting delete user.city; 🔹Iteration for (let key in user) { console.log(key, user[key]); } 🔹Useful methods Object.keys(user); Object.values(user); Object.entries(user); 🔹Copy (shallow) const newUser = { ...user }; 🔹Object.freeze() Object.freeze(user); user.age = 30; // ❌ no change Prevents adding, deleting, or updating properties 🔹Object.seal() Object.seal(user); user.age = 30; // ✅ allowed user.city = "Chennai"; // ❌ not allowed Allows update, but prevents add/delete 🔹Object.assign() const obj = Object.assign({}, user); Used to copy or merge objects Objects are reference types. Methods like "freeze" and "seal" help control how data can be modified #Day8 #JavaScript #100DaysOfCode

Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery. ────────────────────────────── Unlocking the Power of Map and Set Data Structures in JavaScript Ever wondered how to manage collections of data more effectively? Let's dive into Maps and Sets! #javascript #datastructures #map #set ────────────────────────────── Core Concept Have you ever found yourself needing a way to store unique values or key-value pairs? Maps and Sets might just be the perfect solution for you! They offer powerful features that can simplify your data management. Key Rules • A Map stores key-value pairs where keys can be of any type. • A Set stores unique values, ensuring no duplicates. • Both structures maintain the insertion order, which can be very handy! 💡 Try This const myMap = new Map(); myMap.set('name', 'Alice'); myMap.set('age', 30); const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); // won't be added again ❓ Quick Quiz Q: What will happen if you try to add a duplicate value to a Set? A: It will be ignored, as Sets only store unique values. 🔑 Key Takeaway Leverage Maps for key-value storage and Sets for unique collections to streamline your JavaScript code!