Summary

This article presents eight JavaScript coding tips and tricks to optimize code and make it more readable and extensible.

Abstract

The article provides eight JavaScript coding tips for developers, focusing on code optimization and readability. The first tip is reducing if-else noodle code by using a Map to store food and their corresponding prices. The second tip involves using the filter and map functions instead of for loops for easier code writing and better semantics. The third tip shows how to use destructuring assignments to swap two values easily. The fourth tip introduces Object.entries for smarter object property iteration. The fifth tip presents an easy way to flatten arrays using the [].flat method. The sixth tip discusses a rounding trick using the ~~ operator. The seventh tip provides a more efficient way to calculate sums using reduce. Finally, the eighth tip recommends using console.table instead of console.log for clearer data visualization.

Bullet points

Tip 1: Reduce if-else noodle code by using a Map to store food and their corresponding prices.
Tip 2: Use the filter and map functions instead of for loops for easier code writing and better semantics.
Tip 3: Swap two values easily using destructuring assignments.
Tip 4: Use Object.entries for smarter object property iteration.
Tip 5: Flatten arrays easily using the [].flat method.
Tip 6: Use the ~~ operator for a rounding trick.
Tip 7: Calculate sums more efficiently using the reduce method.
Tip 8: Use console.table instead of console.log for clearer data visualization.

8 JavaScript Tricks to Make You a Better Programmer

Make your JavaScript more readable and extensible with these code tips.

preface

There are many ways to optimize our JavaScript code, this article summarizes 8 JavaScript Tricks I often use in my work, I hope it can help you too.

1. Reduce if…else noodle code

We should think about whether there is a better way to optimize when writing more than two if ... else. For example, we need to calculate the price of a hamburger according to its name. You might do this.

Writing like this will have a lot of conditional judgment statements, and when we want to add new food, we need to add a if...else statement in the function. Oh, that’s too painful.

A better way

This is a very classic optimization, we can use a Map to save all the food.

2. Use “filter" and "map” instead of “for” loops

Now, if you were asked to find the food that belongs to group 1, how would you find it?

Here’s the data

The above method is often used. Obviously, replacing filter and map can not only simplify the code but also make the semantics clearer.

3. Swap two values using destructuring

Now I have burgers and you have chocolate. We are good friends and want to exchange food. How do we usually do it?

A better way

We can use array destructuring assignments to make food swapping easier.

4. Smarter Object.entries

If you want to know the name and price of the food in the warehouse, what should you do?

General way

Use for in to iterate over foodMap, but '🌭' is also printed, which we don't want to see.

A better way

Use Object.entries has at least two benefits:

Only properties on the object are printed, properties on the prototype are ignored.
Get the value of the object directly instead of using obj[key] to read it.

5. Easy way to flatten an array

There’s some mess of food, how can we put them in a basket? If [] is a basket.

The first way

The second way

Do you have a shorter way to achieve this? Yes, we can use [].flat, a simpler and smarter way.

Using Infinity means we don't care how many levels the food is nested.

6. Rounding Trick

Wow, it’s Halloween, and to celebrate the holiday, all food is discounted and the decimals are all erased.

We can use Math.floor, but is there an easier way? How about the ~~ operator?

7. Use reduce to calculate the sum

Now a customer has bought a lot of things. I need to know how much he should pay.

Maybe you’ll do it like this:

A better way

Writing like the above can achieve the purpose, but the amount of code is still too much, we have an easier way.

8. Use console.table instead of console.log

We often use console.log to print some information, but sometimes it's not so intuitive.

Let's try console.table

👏🏻 It looks like a table, simple and clear.

Finally

We look forward to your additional JavaScript code tips, Thank you for reading.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.