DEV Community

Cover image for 🤓 The Top 10 JavaScript Tricks for Cleaner Code

🤓 The Top 10 JavaScript Tricks for Cleaner Code

TAQUI ⭐ on October 23, 2023

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 ...
Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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 for loop 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.

Collapse
 
artydev profile image
artydev • Edited

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

Collapse
 
taqui_786 profile image
TAQUI ⭐

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! 😊

Thread Thread
 
artydev profile image
artydev

Thank you very for encouraging words :-)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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.

Thread Thread
 
artydev profile image
artydev • Edited

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

Collapse
 
lopis profile image
João L.

One tip that i sometimes see regarding default parameters: the default parameter is there for when an argument is not provided, or undefined to the function. If the function received another argument such as null, the default parameter naturally won't be used.

Collapse
 
taqui_786 profile image
TAQUI ⭐

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. 👍

Collapse
 
ant_f_dev profile image
Anthony Fung

Great list!

A bonus of using Object.keys(user); is that you'll only get the properties of user and not its prototype, meaning hasOwnProperty is also no longer necessary.

Collapse
 
taqui_786 profile image
TAQUI ⭐

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 for hasOwnProperty.

Thanks for highlighting this additional benefit! 😊

Collapse
 
budyk profile image
Budy

Great article!!. I think no 8 needs more explanation, like how the function sum is called with the parameter

Collapse
 
taqui_786 profile image
TAQUI ⭐

Thanks for your Kind words, I will write a Separate Blog on each Tricks 😊

Collapse
 
cezarytomczyk profile image
Cezary Tomczyk

Optional chaining (?.) is also nice.

Collapse
 
bias profile image
Tobias Nickel

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.

Collapse
 
taqui_786 profile image
TAQUI ⭐

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! 😊👍

Collapse
 
efpage profile image
Eckehard

I suppose, it is not that simple...

Collapse
 
iamwillpursell profile image
Will Pursell

Definitely about to go back through my code to make sure I implemented these. Super useful list.

Collapse
 
taqui_786 profile image
TAQUI ⭐

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! 😊🚀

Collapse
 
pxlmastrxd profile image
Caleb (pxlmastr)

Great post! I will definitely use these tips soon!

Collapse
 
taqui_786 profile image
TAQUI ⭐

Glad to hear that you find this post helpful.😊

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

nice article.

Collapse
 
taqui_786 profile image
TAQUI ⭐

Glad to hear that you liked it😊

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

nice article