Hello Guys, My name is Md Taqui Imam i am a Full Stack developer
And in Today post i will tell you about "The Top 10 JavaScript Tricks for Cleaner ...
For further actions, you may consider blocking this person and/or reporting abuse
A word of warning: Array methods and probably the spread operators do produce clean code. However, you might be paying the price in performance. Why? Because most array methods are JS sugar for loops. If you, say, filter an array and then map it, you'll be running more iterations than if you ran the filterning and mapping at the same time in a
forloop of your own.The other warning would be order of calls. The order matters. If you need to filter and map, try to always filter first, so the
map()call iterates over the filtered collection. If done backwards, you'll have wasted cycles.Hello,
If performance is a concern look at transducers.
The idea is to apply multiple transformations on an array while iterating it only once.
I am trying to understand them :-)
Here is my very simple implementation
Demo
Absolutely, exploring transducers can optimize array transformations. They apply multiple changes to an array while iterating through it only once, improving performance when efficiency matters.
Your willingness to understand and implement them is commendable. Learning by doing can be a great way to grasp such concepts. Your simple implementation is a valuable start. Keep experimenting and learning. If you have questions or need clarification, don't hesitate to ask. Happy coding! 😊
Thank you very for encouraging words :-)
OMG do people need a cool word for everything? Just do a loop, and inside said loop, do everything. Don't rely on loop-powered helpers like map(), filter(), reduce(), etc. Do we really need to name this???? What has gone wrong with simplicity? I'll never know.
The for loop is not composable, so it is not applicable for this case
Betwise, transducer is just transformation reducer contraction.
The term reducer is very explicit, it really reduce a collection to a single value.
Naming things is very hard, but it is a nécessity, I am still struggling at it.
Regards
The two hardest things in programming: naming things, cache invalidation and off by one errors.
Hello Mike,
Thanks again for you great library js-coroutines
Oh man, I had totally forgotten about those. I've come across a compose once or twice before. Thanks for reminding me!
Hey there,
I appreciate the reminder! Sometimes, we come across techniques and terms, and they slip our minds. Composing functions and using those array methods can indeed clean up the code and make it more readable. It's a good practice to have these tools in our developer toolbox. Thanks for sharing your thoughts! 😊
Also using an "immutable" style adopted from functional programming leads to the creation of lots of objects and array, and this will cause garbage collection to have to work overtime. This can create some nasty performance issues.
You've raised an important point regarding performance when using an "immutable" style in JavaScript. While these functional programming techniques offer cleaner code, they can have memory and garbage collection implications. Balancing code readability and performance is key, sometimes requiring traditional loops or more efficient methods.
Thanks for highlighting this! 😊
That is why composition functions are mainly used in functional FP
Hey there,
You bring up a valid point about the performance implications of using array methods and spread operators in JavaScript. It's true that these methods can produce cleaner and more expressive code, but they might not always be the most performant option.
As you mentioned, many array methods are essentially syntactic sugar
for loops, and using them in sequence like filtering and then mapping can lead to multiple iterations over the same array. In such cases, using a for loop can be more efficient.Additionally, the order of method calls is crucial. Filtering before mapping is indeed a good practice because it reduces the dataset that the
mapfunction needs to iterate over.Performance considerations are essential, and it's great that you pointed out these aspects. It's a trade-off between code readability and performance, and developers should be aware of it when making choices.
Thanks for sharing this insight, and it's an essential aspect to keep in mind when writing JavaScript code!
Cheers!😊
So I guess everyone is replying comments with ChatGPT.
Isn't it all here? :(
While technically correct, this is still bad advice. For beginners and professionala alike, performance should never be a primary concern. The first concern is flexibility, and high-level methods are more flexible than a for loop, especially index based for loops. Being flexible is important for correctness and maintainability, which is both fundamental to achieve before you should begin optimization. What's better: To compute an answer in 5ms, or to be off by one and crash the app in 2ms?
I fully disagree. For starters, I never implied that this is the primary concern.
Second, beginners and seasoned professionals alike need to know about performance, and while you should not optimize most of the code from the start, it is such a simple rule to have in mind: "If I need to chain two of these, better do a loop".
This is what happens, in practice:
Junior Dev:
Then the project grows more complex and then next junior dev will do, what? Just make the delegates inside
filter()andmap()more complex. Then the thing grows and grows and nobody is paying attention.Then new screens come up, and the next junio dev will do, what? You guessed it. It will copy and paste the code of the existing component to create the new one. And now this is spreading in the entire application like wildfire.
Bottomline: It is good advice. Know your language and you'll have an easier time maintaining your application.
Very much agree on the order of calls, although multiple calls can often be simplified into a single
arr.reduce().In terms of array methods vs.
forloops, you'll often have substantially better performance usingmap/filter/reducecompared to aforloop. This post does a pretty good comparison of the various approaches.In the end, I don't think it's too big of a concern unless there's noticeable performance issues happening or there's very large arrays being frequently iterated through.
One tip that i sometimes see regarding default parameters: the default parameter is there for when an argument is not provided, or
undefinedto the function. If the function received another argument such asnull, the default parameter naturally won't be used.Thanks for sharing this insight! 🙌 You're absolutely right about default parameters in JavaScript. Your explanation clears up any potential confusion. It's all about handling the absence of an argument, not just any falsy value. 👍
Great article!!. I think no 8 needs more explanation, like how the function sum is called with the parameter
Thanks for your Kind words, I will write a Separate Blog on each Tricks 😊
Optional chaining (?.) is also nice.
Nummer sich IS awefull. Over time there are new requirements, and if statements are mich easier to extend. You can put the if statement into a new function if you don't like it in place.
I totally get what you mean! Sometimes, using if statements can make code more flexible and easier to adapt to new requirements over time. And if you ever find them getting too complex, you can always encapsulate them in a separate function for better organization. Keep coding your way! 😊👍
Great list!
A bonus of using
Object.keys(user);is that you'll only get the properties ofuserand not its prototype, meaninghasOwnPropertyis also no longer necessary.You bring up a great point about the advantages of using
Object.keys(user);. It's not only about code cleanliness but also about avoiding unnecessary properties from the prototype. This indeed makes things much more straightforward and eliminates the need forhasOwnProperty.Thanks for highlighting this additional benefit! 😊
Definitely about to go back through my code to make sure I implemented these. Super useful list.
Hey there! It's fantastic that you're planning to go through your code and implement these JavaScript tricks. They are indeed super useful and can make a big difference in writing clean and elegant code. Keep up the great work, and don't hesitate to reach out if you need any help or have questions along the way.
Happy coding! 😊🚀
Great post! I will definitely use these tips soon!
Glad to hear that you find this post helpful.😊
nice article.
Glad to hear that you liked it😊
nice article
I suppose, it is not that simple...