Written by Joab Chua

1. Console.log

• Add colour to your console log

Stop doing just this! ❌

Try this instead. ✅

But if you have an array of objects, try this would be even better ?

If you want to measure how fast certain operations run in your code, try this.

Do console.time and console.timeEnd to measure the time taken in the browser console.
Lastly, if you want to trace your code and its execution sequence, try this.

You will be able to see tonnes of info that you need to debug your application.

2. Object de-structuring

Did it happened to you before that you only need a few variables in the object but you are being passed the full object and using it in this conventional way?

Repeatedly using the human object declaration in your function? Don’t do this. Use ES6 object de-structuring instead. ✅

De-structure the variables that you need to use in the function arguments. Alternatively, you can de-structure inside the function itself.

3. Template Literal

❌ Don’t do this when you are trying to piece your variables with string.

Do this instead. ✅

4. Spread operator

Let’s say you have 2 object and you want to combined them or assign some of the properties of 1 object to another. Traditionally, we will do this.

There is technically nothing wrong with that, except that you are actually mutating your object. Try this instead. ✅

Best thing of spread operator is that it works for array as well. ?
Instead of this.

Do this instead.

5. loops

Are you guilty of doing for loop this way to calculate the total amount of the cost in an array? Stop doing this. ❌

Start to change your style to this instead.

Clean and lean. Job done! ✅

Summary

Hope that these few tips will guide you along to write better, cleaner and leaner code.

Sponsored by MarsCode
Welcome to join our Discord to discuss your ideas with us.

MarsCode Follow

MarsCode provides an AI-powered IDE and an AI extension to assist your programming tasks.