Rully Saputra’s Post

🔑 JavaScript Sets – Quick Revision Guide 1. What is a Set? A collection of unique values (no duplicates). Values can be any type: primitives or objects. 2. Creating Sets // From array const letters = new Set(["a", "b", "c"]); // Empty + add values const letters = new Set(); letters.add("a"); letters.add("b"); // Add variables const a = "a"; letters.add(a); 3. Adding Values Use .add(value) Duplicate values are ignored: letters.add("c"); letters.add("c"); // ignored 4. Iterating Sets for (const x of letters) { console.log(x); } 5. Type & Identity typeof letters; // "object" letters instanceof Set; // true 6. Browser Support Introduced in ES6 (2015). Supported in all modern browsers since 2017. 📝 Exercise Answer True or False: Each value can only occur once in a Set. 👉 Correct answer: True 🎯 Memory Hooks Set = Unique Collection Think of it as a mathematical set: no duplicates, only distinct members. ⚡ Quick Comparison: Set vs Array FeatureArraySet DuplicatesAllowed❌ Not allowed OrderIndexedInsertion order AccessBy indexBy value MethodsRich (map, filter, reduce)Focused (add, delete, has) This format makes it easy to scan, recall, and apply.

Have you ever needed to convert a JavaScript object to a string or vice versa? Understanding how JSON.parse and JSON.stringify work can make your data handling much smoother! ────────────────────────────── Mastering JSON.parse and JSON.stringify Unlock the full potential of JSON in your JavaScript projects with these key insights! #javascript #json #webdevelopment #codingtips ────────────────────────────── Key Rules • Use JSON.stringify to convert objects into a JSON string for storage or transmission. • Use JSON.parse to convert JSON strings back into JavaScript objects. • Be cautious of circular references; JSON.stringify will throw an error if you try to stringify an object with loops. 💡 Try This const obj = { name: 'Alice', age: 25 }; const jsonString = JSON.stringify(obj); const parsedObj = JSON.parse(jsonString); ❓ Quick Quiz Q: What will happen if you try to stringify an object with circular references? A: It will throw a TypeError. 🔑 Key Takeaway Mastering JSON.parse and JSON.stringify is essential for effective data management in JavaScript! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

Have you ever found yourself struggling with data formats in JavaScript? JSON.parse and JSON.stringify are your best friends when it comes to converting data to and from JSON format. ────────────────────────────── Mastering JSON.parse and JSON.stringify Unlock the full potential of JSON in your JavaScript projects. #javascript #json #webdevelopment ────────────────────────────── Key Rules • Use JSON.stringify to convert JavaScript objects into JSON strings. • Use JSON.parse to turn JSON strings back into JavaScript objects. • Be mindful of data types; functions and undefined values cannot be stringified. 💡 Try This const obj = { name: 'Alice', age: 25 }; const jsonString = JSON.stringify(obj); const parsedObj = JSON.parse(jsonString); console.log(parsedObj); ❓ Quick Quiz Q: What does JSON.stringify do? A: It converts a JavaScript object into a JSON string. 🔑 Key Takeaway Mastering JSON methods can simplify data handling in your applications! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

🚀 JavaScript Simplified Series — Day 33 You wrote a function… It finished execution… But somehow 😳 👉 It still remembers old variables? How is that possible? 🤯 --- ## 🔥 This is called → Closures --- ## 🔹 What is a Closure? A **closure** is when a function 👉 Remembers variables from its outer scope 👉 Even after the outer function has finished --- ## 🔹 Example ```javascript id="cl1" function outer() { let count = 0 return function inner() { count++ console.log(count) } } let counter = outer() counter() counter() counter() ``` 👉 Output: 1 2 3 --- ## 🔍 What’s happening? 👉 `outer()` executed once 👉 `inner()` still remembers `count` 👉 Value persists 😎 --- ## 🔥 Why is this powerful? Because function can **remember state** --- ## 🔹 Real Life Example Think of a **bank account 🏦** ```javascript id="cl2" function bankAccount() { let balance = 1000 return function deposit(amount) { balance += amount console.log(balance) } } let account = bankAccount() account(500) account(200) ``` 👉 Output: 1500 1700 👉 Balance remembered between calls --- ## 🔥 Where are closures used? 👉 Data privacy 👉 Counters 👉 Event handlers 👉 React hooks --- ## 🔥 Simple Summary Closure → function + memory Remembers outer variables Keeps state alive --- ### 💡 Programming Rule **Closures give functions memory. Use them to control data smartly.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototype (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

JS Object vs. Map: Why simple {} might be slow In JavaScript, we often default to using simple objects {} as dictionaries. Most of the time, it works just fine. But there’s a tipping point where choice of data structure directly impacts both performance and code maintainability. I recently refactored a module in one of Node.js services and here is why we should choose Map for heavy-duty tasks: Non-String Keys: In an Object, keys are limited to Strings or Symbols. In a Map, a key can be anything - an object, an array, or even a function. This is a game-changer for metadata caching. Performance: Map is specifically optimized for frequent additions and removals. If your service handles high-frequency data updates, the performance gap becomes noticeable. Predictable Iteration: Unlike Objects, Map always preserves the insertion order of elements. Built-in Size: No more Object.keys(obj).length. You get the size instantly with .size. The bottleneck: We needed to maintain an in-memory cache for user sessions where the key was a complex device configuration object. Initially, we used JSON.stringify(config) to create string keys. The result was massive CPU overhead on serialization and slower lookups as the cache grew. The solution: By switching to a Map, we used the configuration object itself as the key. No serialization, O(1) lookup time, and much cleaner code. #javascript #nodejs #backend #performance #cleancode #Map #datastructures

Three dots that changed JavaScript: ... The spread operator in action: Arrays: // Copy const copy = [...original] // Merge const all = [...arr1, ...arr2] // Add items const updated = [...items, newItem] Objects: // Copy const clone = { ...user } // Merge const combined = { ...defaults, ...config } // Update const modified = { ...user, age: 30 } Function calls: Math.max(...numbers) fetch(url, { ...defaultOptions, ...customOptions }) Before spread operator: const copy = original.slice() const merged = Object.assign({}, obj1, obj2) fn.apply(null, args) After spread operator: const copy = [...original] const merged = { ...obj1, ...obj2 } fn(...args) The magic: → No mutation (safer code) → Cleaner syntax → Works with any iterable → Essential for React state → Makes immutability easy Three dots. Infinite possibilities.

Have you ever found yourself needing to store unique values or key-value pairs efficiently? Map and Set are two powerful data structures in JavaScript that can help with that! ────────────────────────────── Exploring Map and Set Data Structures in JavaScript Let's dive into the powerful Map and Set data structures in JavaScript and see how they can enhance our coding skills. #javascript #datastructures #programming #webdevelopment ────────────────────────────── Key Rules • Map allows you to store key-value pairs where keys can be of any type. • Set stores unique values, meaning no duplicates are allowed. • Both Map and Set maintain the order of insertion, which can be super 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 add duplicate ❓ Quick Quiz Q: What type of data can a Map's keys be? A: Any type of data, including objects! 🔑 Key Takeaway Utilizing Map and Set can significantly improve the efficiency and clarity of your JavaScript code! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

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!

mathjs, Improperly Controlled Modification of Dynamically-Determined Object Attributes, GHSA-jvff-x2qm-6286 (High) The vulnerability resides in the expression parser of the mathjs library, specifically in how it handles dynamically‑determined object attributes. When a user‑supplied expression is evaluated, the parser fails to properly sanitize or restrict the modification of these dynamic attributes. An attacker can craft an expression that manipulates object properties in a way that escapes the intended sandbox. By leveraging JavaScript’s prototype chain or by overwriting internal methods, the malicious expression can break out of the parser’s context and execute arbitrary JavaScript code....

mathjs, Improperly Controlled Modification of Dynamically-Determined Object Attributes, GHSA-jvff-x2qm-6286 (High) The vulnerability resides in the expression parser of the mathjs library, specifically in how it handles dynamically‑determined object attributes. When a user‑supplied expression is evaluated, the parser fails to properly sanitize or restrict the modification of these dynamic attributes. An attacker can craft an expression that manipulates object properties in a way that escapes the intended sandbox. By leveraging JavaScript’s prototype chain or by overwriting internal methods, the malicious expression can break out of the parser’s context and execute arbitrary JavaScript code....