WebAssembly vs JavaScript: Rust Image Processor Benchmark

🚀 Day 26/30 – Flatten a Multi-Dimensional Array (Depth Controlled) 🧠 📌 Problem Given: A multi-dimensional array arr An integer depth n Return a flattened version of arr. Rules: The array may contain integers or nested arrays Only flatten elements if current depth < n Depth of first-level elements = 0 Do NOT use Array.flat() 🧠 Example 1 arr = [1, [2, [3, 4]], 5] n = 1 Output: [1, 2, [3, 4], 5] 🧠 Example 2 arr = [1, [2, [3, 4]], 5] n = 2 Output: [1, 2, 3, 4, 5] 💡 JavaScript Solution (Recursive Approach) var flat = function(arr, n) { const result = []; function flatten(current, depth) { for (let item of current) { if (Array.isArray(item) && depth < n) { flatten(item, depth + 1); } else { result.push(item); } } } flatten(arr, 0); return result; }; 🔎 Why This Works We track depth Only flatten when depth < n Recursion handles unlimited nesting Preserves element order Time Complexity: O(total elements) Space Complexity: O(total elements + recursion stack) 🧠 What This Teaches ✅ Recursion fundamentals ✅ Depth tracking ✅ Tree-like traversal ✅ Controlling execution scope ✅ How Array.flat() actually works internally ⚡ Real-World Use Cases Normalizing API responses Parsing nested JSON Flattening comment threads Handling deeply nested UI state Transforming hierarchical data #JavaScript #30DaysOfJavaScript #CodingChallenge #Recursion #DataStructures #Algorithms #FrontendDevelopment #WebDevelopment #LearnToCode #SoftwareEngineering #ProblemSolving #TechCommunity #InterviewPrep #100DaysOfCode #JSDeveloper JavaScript flatten array without flat Recursive array flattening JS Flatten array with depth JavaScript Implement Array.flat manually JavaScript recursion interview question Multi-dimensional array flatten JS Depth controlled flattening JavaScript Advanced JavaScript problem solving

Objects in JavaScript are like containers that store related data together. Think of them as a digital filing cabinet where everything about one thing lives in one place. 🎯 What is an Object? An object is a collection of key-value pairs. Instead of having 10 separate variables, you group them logically. Without objects: let userName = "Sarah" let userAge = 28 let userCity = "NYC" With objects: let user = { name: "Sarah", age: 28, city: "NYC" } See how much cleaner that is? 💡 Why Use Objects? → Organization: Keep related data together → Scalability: Easy to add new properties → Readability: Code makes more sense → Reusability: Pass one object instead of multiple variables 🔧 Essential Object Methods You Need to Know: Object.keys() - Get all property names let user = {name: "John", age: 30} Object.keys(user) // ["name", "age"] Object.values() - Get all values Object.values(user) // ["John", 30] Object.entries() - Get key-value pairs Object.entries(user) // [["name", "John"], ["age", 30]] Object.assign() - Copy or merge objects let newUser = Object.assign({}, user, {city: "LA"}) Object.freeze() - Make object immutable Object.freeze(user) // Can't modify anymore Object.seal() - Allow edits but no new properties Object.seal(user) // Can change values, can't add new keys hasOwnProperty() - Check if property exists user.hasOwnProperty("name") // true 🎁 Pro Tip: Use objects whenever you have data that belongs together. If you're passing more than 2-3 parameters to a function, consider using an object instead. Objects are the foundation of JavaScript. Master them and everything else becomes easier. What's your favorite object method? Drop it in the comments! #JavaScript #WebDevelopment #Coding #Programming #WebDev #LearnToCode #SoftwareDevelopment #CodeNewbie #100DaysOfCode

#Map vs #Filter vs #Find Map, filter, and find are key JavaScript array methods for processing data without mutating the original array. #Map Transforms every element in an array and returns a new array of the same length. Use it when you need to modify each item, like doubling numbers or formatting strings. #Example:** `[1, 2, 3].map(x => x * 2)` returns `[2, 4, 6]`. #Filter Creates a new array with only elements that pass a test condition, so the result is shorter or equal in length. Ideal for selecting subsets, such as even numbers or active users. #Example:** `[1, 2, 3, 4].filter(x => x % 2 === 0)` returns `[2, 4]`. #Find Returns the first element that matches a condition, or `undefined` if none found—not an array. Best for single-item lookups, like finding a user by ID. #Example:** `[1, 2, 3, 4].find(x => x > 2)` returns `3`. #Chain them for efficiency:`array.filter(...).map(...)` processes filtered data first. #Code - import { signal, computed } from '@angular/core'; const items = signal([1, 2, 3, 4]); const doubled = computed(() => items().map(x => x * 2)); // [2,4,6,8] const evens = computed(() => items().filter(x => x % 2 === 0)); // [2,4] const firstEven = computed(() => items().find(x => x % 2 === 0)); // 2 #Angular #JavaScript Developer #Coder #fullstack

Day 87 of me reading random and basic but important dev topicsss....... Today I read about the Blobs in JavaScript As a developer, we deal with file uploads or downloads in the browser. But what happens under the hood and how JS handles binary data? While ArrayBuffer is part of the core ECMA standard, the browser’s File API gives us a higher-level abstraction: The Blob (Binary Large Object). What exactly is a Blob? Unlike a raw ArrayBuffer, a Blob represents binary data with type. It consists of an optional string type (usually a MIME-type) and blobParts (a sequence of strings, BufferSources, or even other Blobs). Construction We construct them by passing an array of parts and an options object: let blob = new Blob( [new Uint8Array([72, 101, 108, 108, 111]), ' ', 'world'], { type: 'text/plain', endings: 'native' } ); Immutability Just like JavaScript strings, Blobs are entirely immutable. We cannot directly edit the data inside a Blob. However, we can create new Blobs from existing ones using the .slice() method: blob.slice([byteStart], [byteEnd], [contentType]); This allows us to chop up files for chunked uploads or assemble new files in memory without altering the original binary data. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #SoftwareEngineering #WebAPIs

The hidden cost of the Spread Operator in JS 💡 We often reach for the spread operator [...] because it’s elegant, declarative, and keeps our data immutable. It’s a staple of modern JavaScript for a reason. However, there’s a specific pattern where this "clean" syntax can unintentionally impact performance: using spread inside a loop. What’s happening under the hood? 🔍 When we write a loop like this: for (let item of data) { result = [...result, item]; } It looks like a simple addition. But computationally, we are: 1. Allocating a brand-new array in memory. 2. Copying every existing element from the old array into the new one. 3. Repeating this for every single iteration. If you have a dataset of 10,000 items, you aren't just performing 10,000 additions. You’re triggering millions of internal copy operations (O(n^2) time complexity). This is often why a UI might feel "heavy" or "janky" as the garbage collector tries to keep up with all those discarded arrays. The "Photocopier" Perspective 📑 Think of it like copying a 100-page book. Using spread in a loop is like: 🔸Copying page 1. 🔸Then copying pages 1 and 2 together. 🔸Then copying pages 1, 2, and 3 together... By the time you reach page 100, you've done a mountain of unnecessary work! A Snappier Approach 🛠️ If you’re working with large datasets, consider these alternatives to keep your app responsive: 🔹Standard .push(): A simple, O(n) operation that modifies the array in place. 🔹.reduce() with a mutable accumulator: Functional style without the memory tax. 🔹Array.from() or .map(): Usually the most idiomatic way to transform data. I’m curious—how do you balance "clean" code vs. raw performance? Do you stick to strict immutability for the sake of readability, or do you opt for manual optimizations when the data starts to scale? Let’s talk in the comments! 👇 #JavaScript #WebDev #CodingTips #SoftwareEngineering #Performance #WebPerformance #Frontend #Programming #CleanCode #SoftwareDevelopment #WebDesign

𝐒𝐭𝐫𝐮𝐜𝐭𝐬 𝐢𝐧 𝐂# Coming from JavaScript, I used to scroll past the word "struct" in C# docs and YouTube videos, convinced it was one of those "senior developer topics" that I wouldn’t be able to understand. They often pop up in the .NET team's YouTube demos. Turns out structs are similar to classes in a lot of ways and aren't hard at all to understand. 𝗦𝗼, 𝘄𝗵𝗮𝘁 𝗶𝘀 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁?  • It is a custom 𝘃𝗮𝗹𝘂𝗲 𝘁𝘆𝗽𝗲. By 'value type' we mean a variable of type struct will store the actual value or piece of information in memory  • 'Struct' is short for 'structure' or 'data structure' 𝗛𝗼𝘄 𝗱𝗼 𝘆𝗼𝘂 𝗰𝗿𝗲𝗮𝘁𝗲 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁? You create a struct the same way as a class except that you use the 𝘀𝘁𝗿𝘂𝗰𝘁 keyword instead of the 𝗰𝗹𝗮𝘀𝘀 keyword. Example: 𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘶𝘤𝘵 𝘜𝘴𝘦𝘳 {   𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘪𝘯𝘨 𝘕𝘢𝘮𝘦 { 𝘨𝘦𝘵; 𝘪𝘯𝘪𝘵; }   𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘪𝘯𝘨 𝘌𝘮𝘢𝘪𝘭 { 𝘨𝘦𝘵; 𝘪𝘯𝘪𝘵; } } What's even more interesting is that, like a class, a struct can have:  • Fields  • Properties  • Methods  • Constructors You also instantiate a struct the same way as a class: 𝘜𝘴𝘦𝘳 𝘶𝘴𝘦𝘳 = 𝘯𝘦𝘸() {𝘕𝘢𝘮𝘦="𝘗𝘦𝘵𝘦𝘳", 𝘌𝘮𝘢𝘪𝘭="𝘦𝘮𝘢𝘪𝘭@𝘦𝘹𝘢𝘮𝘱𝘭𝘦.𝘤𝘰𝘮"}; 𝗦𝗼 𝘄𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗮 𝗰𝗹𝗮𝘀𝘀 𝗮𝗻𝗱 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁 𝘁𝗵𝗲𝗻? The main difference is that a struct is a value type, while a class is a reference type. Another difference is that structs can’t inherit from other structs or classes. They also can’t be the base of a struct or class. However, they can implement interfaces. 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗼 𝗺𝗮𝗸𝗲 𝗮 𝗰𝗹𝗮𝘀𝘀 𝗼𝗿 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁 When is it best to use a struct instead of a class? I would say choose a struct when you want to create a 𝘀𝗺𝗮𝗹𝗹 𝗲𝗻𝘁𝗶𝘁𝘆 that is mainly focused on representing data and not behaviour. If the 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝘂𝗿 𝗼𝗳 𝘁𝗵𝗲 𝗲𝗻𝘁𝗶𝘁𝘆 𝗶𝘀 𝗮𝗹𝘀𝗼 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁, then it's better to choose a class. Note that a struct can have methods, but its methods are usually focused on answering questions about the data. Also, since structs are 𝘃𝗮𝗹𝘂𝗲 𝘁𝘆𝗽𝗲𝘀 and classes are 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝘁𝘆𝗽𝗲𝘀, you can choose a struct if working with a value type has some advantage over a reference type.

When datasets hit a million rows, performance gaps get real. Jessica Wachtel explores how WebAssembly pulls ahead of JavaScript in heavy browser-based processing.

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘆𝗺𝗯𝗼𝗹𝘀: 𝗧𝗵𝗲 "𝗦𝗲𝗰𝗿𝗲𝘁 𝗛𝗼𝗼𝗸𝘀" 𝗼𝗳 𝘁𝗵𝗲 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 💎 Most developers know that object keys are strings. But did you know there is a second, "unique" way to label your data? 𝗪𝗵𝘆 𝗦𝘆𝗺𝗯𝗼𝗹𝘀 𝗮𝗿𝗲 𝗮 𝗴𝗮𝗺𝗲-𝗰𝗵𝗮𝗻𝗴𝗲𝗿 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲𝗯𝗮𝘀𝗲: 1️⃣ 𝗚𝘂𝗮𝗿𝗮𝗻𝘁𝗲𝗲𝗱 𝗨𝗻𝗶𝗾𝘂𝗲𝗻𝗲𝘀𝘀: Every Symbol() you create is one-of-a-kind. No more accidental property overrides or name collisions in large applications.  2️⃣ 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗯𝘆 𝗢𝗯𝘀𝗰𝘂𝗿𝗶𝘁𝘆: While not truly "private," Symbols don't show up in for...in loops or Object.keys(). They are perfect for hiding internal metadata.  3️⃣ 𝗘𝗻𝗴𝗶𝗻𝗲 𝗛𝗼𝗼𝗸𝘀: Using "Well-Known Symbols," you can actually change how your objects behave. You can tell the JS engine exactly how to convert your object to a number (Symbol.toPrimitive) or what its custom name should be in logs (Symbol.toStringTag). Understanding Symbols is like getting the keys to the engine room. It’s how the pros write code that is backwards-compatible and plays nicely with the built-in language features. Check out the full breakdown here: https://lnkd.in/epSBNb6s 🔗 𝗡𝗲𝘅𝘁 𝗨𝗽: The most requested topic in JS, 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁. ⏳⚙️ #𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 #𝗪𝗲𝗯𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 #𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴 #𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴 #𝗖𝗼𝗱𝗶𝗻𝗴𝗧𝗶𝗽𝘀 #𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁𝗦𝘆𝗺𝗯𝗼𝗹𝘀 #𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 #𝗧𝗲𝗰𝗵𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆

🚀 𝗡𝗲𝘄 𝗣𝗥 𝗠𝗲𝗿𝗴𝗲𝗱 Just tackled a fun logical challenge: finding the intersection of two arrays. The goal was to identify elements present in both input arrays. I approached this using JavaScript. My strategy involved iterating through the first array and checking for the existence of each element in the second array. To optimize this lookup, I leveraged a Set data structure, which provides average O(1) time complexity for checking membership. During the 🐞 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗣𝗿𝗼𝗰𝗲𝘀𝘀, I found dry runs and visualizing the data flow particularly helpful. Stepping through the code with a debugger allowed me to pinpoint exactly where my logic was diverging from the expected output. A 📚 𝗞𝗲𝘆 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 for me was the significant performance improvement gained by using a Set for lookups compared to nested loops or Array.prototype.includes within a loop. Check out the implementation and contribute to the discussion here: https://lnkd.in/dvQbUFGK How do you typically ⚙️ 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵 array intersection problems? 📦 Repo: https://lnkd.in/dvQbUFGK #Algorithm #JavaScript #ProblemSolving #DataStructures #Set #CodingChallenge #Developer #Tech #InterviewQuestion #LogicalThinking

📣 𝗡𝗲𝘅𝘁 𝗕𝗹𝗼𝗴 𝗶𝘀 𝗛𝗲𝗿𝗲! ⤵️ Understanding Objects in JavaScript — Finally Making Data Feel Organized 🧠📦 Storing values in separate variables works… until your program starts growing. This blog explains JavaScript objects in a simple, practical way — so beginners can understand how real applications manage structured data. 🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/gt_9TVF4 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻: ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺ ⇢ Why objects are needed in real programs ⇢ Key-value pair mental model ⇢ Creating objects (literal vs constructor way) ⇢ Dot notation vs bracket notation ⇢ Updating, adding, and deleting properties ⇢ Looping through objects using for...in ⇢ Object vs array — beginner confusion cleared ⇢ Array of objects (real-world data pattern) ⇢ Common mistakes beginners make 💬 If JavaScript data still feels scattered across variables, this article helps you understand how objects bring structure, clarity, and scalability to your code. #ChaiAurCode #JavaScript #Objects #ProgrammingBasics #WebDevelopment #Beginners #LearningInPublic #100DaysOfCoding