Ahamed Snippets

🚀🚀🚀 Tips- #24


Make cartesian products of two or more arrays recursively.

🔰 A cartesian product of two arrays is a permutation of all possible arrays of two elements whose first element belongs to the first array and the second element belongs to the second array.

🔰 For two arrays it's easy to generate the cartesian products but for more than two arrays it's a little complex.
The concept is easy. First, make the cartesian products of the first two arrays, keep the product in a new array and then repeat the process for the next arrays with the product array.


🔰 From this snippet you can learn:
⭕ How to combine two or more arrays to generate cartesian products.



💬 So, what do you think? Can you implement this using a recursive function? If you then don't forget to share a snippet.


🔰 Playground - https://lnkd.in/gkuYvxrY
🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🚀🚀🚀 Tips- #23


🔰 A clean and modern approach for finding out the intersecting items from two arrays using Set.

The idea is simple: Create two Sets by using the two arrays and then iterate over any of them. If an element of the iterating Set exists on the other Set then this element intersects, otherwise it's not.


🔰 From this snippet you can learn:
⭕ How to find the common items of two arrays.
⭕ How to iterate over a Set
⭕ How to check if an element exists in a set or not using the Set.has() method.


💬 So, what do you think? Can you implement this using a recursive function? If you then don't forget to share a snippet.


🔰 Playground - https://lnkd.in/gZZ7wvX9
🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🚀🚀🚀 Tips- #22


🔰 Attach a new Component to another Component using JSX dot notation. By using this you can attach a component to another component and you don't need to do any explicit export/import for using the attached component.


❓Did you see this pattern before? Of course, you did. Just remember the you've used in your application.


🔰 From this snippet you can learn:
⭕ How to attach a new component to another component using JSX dot notation.
⭕ How to use composite components in react.


💬 So, what do you think? Can you implement this using a recursive function? If you then don't forget to share a snippet.


🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🚀🚀🚀 Tips- #21


🔰 Get all the descendents of an item from an array of id-parentId relationships. We are using stack (LIFO) data structure for traversing and gathering the descendents IDs.


🔰 From this snippet you can learn:
⭕ How to use Stack data structure using an array.
⭕ How to get all the descendents from a specific node.


💬 So, what do you think? Can you implement this using a recursive function? If you then don't forget to share a snippet.


🔰 Playground - https://lnkd.in/e9cnBuZf
🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🚀🚀🚀 Tips- #20


🔰 Passing some extra data to the event handler function using curring. We often need to pass some extra data to event handler functions, and for doing that we pass this as a param along with the event object. Instead of doing this, we can use the curring technique for passing required extra data to the event handler function.


🔰 From this snippet you can learn:
⭕ How to use curried functions
⭕ How to pass required extra data along with the event object.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🚀🚀🚀 Tips- #19


🔰 Convert a linear data structure with a multi-way tree structure. Suppose you have an array of objects with "id", and "parent_id" values, you want to convert the structure such that all the children of a parent are situated inside a children's array of the parent item.


🔰 From this snippet you can learn:
⭕ How to use recursion with typescript.
⭕ How to convert a linear data structure to a multi-way tree structure.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🔰 Playground - https://lnkd.in/gjk7Bx7Y
🔰 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

I've just reached 100 followers! Thank you for continuing support. I could never have made it without each and every one of you. 🙏🤗🎉

🎊 Tips- #18

🧠 Check if an array of objects has any duplicate entries for a specific property. In the function, there is a callback function as a second parameter by which the user can tell the function by which property you have to check the duplicate entries.


❓ From this snippet you can learn how to find if there are any duplicate entries conditionally from an array of objects according to a property.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🕹Playground - https://lnkd.in/gHcFS35N

🤝 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🎊 Tips- #17

🧠 Find the edge value (max or min) conditionally from an array of objects. The second parameter of the function is a callback function that gives the previous edge value and the current array item as parameters and the user can define the condition by which the edge value will be determined.


❓ From this snippet you can learn how to find the min or max object conditionally from an array of objects according to a property.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🕹Playground - https://lnkd.in/eViwfiTs

🤝 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🎊 Tips- #16

🧠 useDebounce hook for implementing debounce in react.
The idea is simple, keep an internal state and update the state after a specific delay time. If the given value is changed before the delay time passed, then cancel the timeout and wait for the delay time once again. And finally, return the debounced state value once the delay is passed.


❓ From this snippet you can learn how to create a custom hook to manage debounce in react JS.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🕹Gist - https://gist.github.com/ahamed/75b36b7f55b1b688d4cda8cbb4eecfe2

🤝 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🎊 Tips- #15

🧠 JavaScript introduces a new array method name `group`, but this is only added to the firefox nightly build. Here we can create a similar implementation of the `Array.prototype.group` method.
The `Array.prototype.group` method basically accepts a callback function as a parameter and groups the array elements according to the callback function's return key and returns an object. From the callback function, you have to return a string or a number.


❓ From this snippet you can learn how to handle your own callback function and use them accordingly.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🕹Gist - https://gist.github.com/ahamed/db0a1e2ec5d903f921274ce84489186e

🤝 Follow me on Twitter - https://twitter.com/ahamed_sajeeb

🎊 Tips- #14

🧠 Create an array from an array-like object. An array-like object is an object, which has a length property and indexed elements. Indexed elements mean the properties of the object are like the index of an array starting from 0.


❓ From this snippet you can learn how to use `Array.from()` method using the `length` property.


💬 So, what do you think? If you have any other good solutions then feel free to share your thoughts.


🕹Gist - https://gist.github.com/ahamed/313a0f7cf527ffbbb8b015094ee780fc

🤝 Follow me on Twitter - https://twitter.com/ahamed_sajeeb