JavaScript Hacks: Arrays and Objects Compared by Reference

Hello everyone, I’d like to explain two JavaScript concepts—currying and closures—using the dynamic onChange handler in the code snippet below. Here’s a breakdown of how and why it works: 💡 The Concept: Instead of a standard function, we create a function that returns another function. 🧠 What is happening under the hood? 1. Currying (The Setup): We don't pass all arguments (field and e) at once. First, we call handleInputChange('email'). Result: This returns a new function that is sitting there, waiting specifically for the event e. 2. Closure (The Memory): Even after that first function finishes running, the returned function "remembers" the field variable ('email') because of closure. The Payoff: When React finally triggers the onChange event, our inner function executes with access to both the specific field name (saved from the closure) and the event (provided by React). One handler. Infinite inputs. Cleaner code. 🚀 Check out the implementation below. Have you used this pattern in your projects, or do you prefer a different approach? #JavaScript #ReactJS #WebDevelopment #CodingTips #CleanCode

So you're trying to find the symmetric difference between two arrays in JavaScript - it's a game-changer. Simple concept, really: you compare two arrays and return a new array with values that exist in one array but not in both. It's like finding the odd one out. You remove values that appear in both arrays, and what's left is the symmetric difference. Now, let's get into it - you work with two arrays, and you use Array.prototype.filter() to create a new array with elements that pass a condition. You compare arrayOne with arrayTwo using includes(), and then you compare arrayTwo with arrayOne using includes() again. It's like a little dance, back and forth. You merge results using Array.prototype.concat(), and that's where the magic happens. Take arrayOne, for instance - you use filter(), and you check if each item is not included in arrayTwo. It's a simple check, but it's crucial. You return values that do not exist in arrayTwo, and that's your first half. Then, you take arrayTwo and use filter() again - you return values that are not included in arrayOne. It's the same idea, just flipped. Now, you merge results into a single array using concat() - and that's your symmetric difference. These are values that appear in only one array, and it's a beautiful thing. This approach is simple, easy to understand, and it gets the job done. But, hey, there are many ways to solve this problem - so, what's your approach? Share your own solution in the comments, and let's get a conversation going. Check out this article for more info: https://lnkd.in/gh27yCCY #JavaScript #SymmetricDifference #ArrayManipulation

I built this small project to experiment with the View Transitions API and query parameters. The goal was to create a smooth transition between a card list and a detail view using HTML, CSS, and JavaScript. During testing, I noticed that Chrome doesn’t render the transitions as smoothly yet, while Edge provides a noticeably smoother experience, making it a better option to preview this demo. Live demo: https://lnkd.in/e8jRGwGm #Frontend #JavaScript #CSS

JavaScript: Window vs. Document Explained! 🤯 Ever wonder about the difference between window and document in JavaScript? 🤔 This quick short breaks down these fundamental browser objects. Get ready to understand the browser's global object vs. the HTML content! #JavaScript #WebDevelopment #Frontend #CodingTips #WindowVsDocument

JavaScript: Window vs. Document Explained! 🤯 Ever wonder about the difference between window and document in JavaScript? 🤔 This quick short breaks down these fundamental browser objects. Get ready to understand the browser's global object vs. the HTML content! #JavaScript #WebDevelopment #Frontend #CodingTips #WindowVsDocument

React Optimization: useMemo() hook.. Why first code in the image fails: In JavaScript, objects are compared by reference, not value. Even though { color: 'red' } looks the same as the previous render, React sees a new memory address. 👉 Result: The useEffect thinks options has changed and fires on every single render. You just created an infinite loop or an API spammer. Why the code below works: useMemo tells React: "Keep this object at the same memory address unless dependencies change." 👉 Result: The useEffect sees the exact same reference and skips the re-run. 💡 The Lesson: Don't just ask "Is this function heavy?" Also ask: "Am I passing this object/array into a dependency array?" If the answer is yes, you need useMemo to stabilize it. #ReactJS #WebDevelopment #JavaScript #CodingTips #FrontendEngineering

One of the most common bugs in JavaScript and React comes from copying objects the wrong way 😅 Shallow Copy vs Deep Copy In JavaScript, when you copy an object using the spread operator (...), you are only creating a shallow copy. Example: ``` const user = { name: “Ali”, skills: [“JS”, “React”] }; const copy = { …user }; copy.skills.push(“Node”); console.log(user.skills); // [“JS”, “React”, “React”, “Node”] ``` Why did the original object change? Because: • name was copied • but skills is still pointing to the same array in memory Both user.skills and copy.skills reference the same place. To create a real independent copy, use: const deepCopy = structuredClone(user); Now changing deepCopy will not affect user. 📌 In React, this mistake can cause: • state bugs • missing re-renders • very confusing UI issues Understanding how memory and references work is a game changer. #JavaScript #React #Frontend #WebDevelopment #Programming

Displaying timestamps such as “2 hours ago,” “just now,” or “1 year ago” is a common requirement. While many developers use third-party packages for this purpose, JavaScript provides built-in functionality. The `RelativeTimeFormat` API from the `Intl` interface lets you format time differences in a clean and relative way. No dependency needed. Grab the code snippet: 🔗 https://lnkd.in/daKuzU3w #js #javascript #tips

I thought I understood this JavaScript concept… until I really did 👇 📌 Parameter Scope in JavaScript Function parameters are not special variables they are simply local variables scoped to the function. function greet(userName) {  console.log(userName);  } console.log(userName); // ❌ ReferenceError: userName is not defined Key Takeaway: userName exists only inside the function's execution context. But here’s the interesting part 👀 Parameters also follow lexical scope, which means inner functions can access them via closures: function outer(x) {  function inner() {   console.log(x); // ✅ Accesses 'x' from the outer scope  }  inner(); } And a subtle gotcha most beginners miss ⤵️ Default parameters are evaluated in their own scope at the moment the function is called, strictly before the function body begins to run. Understanding scope like this changed how I read and debug JavaScript code. Small concepts. Big clarity. 🚀 #JavaScript #WebDevelopment #LearningInPublic #Frontend #CodingTips #Scope

JavaScript Tip of the Day 🚀 map() and forEach() may look similar, but they serve different purposes. ✔ map() creates and returns a new array.   ✔ forEach() is used to perform actions return nothing.  Understanding small differences like these helps write cleaner and more predictable code. Which one do you use more in your projects? #JavaScript #WebDevelopment #FrontendDeveloper #FullStackDeveloper #LearningInPublic #DailyCoding