How to write cool javascript

calvintam Aug 5, 2020

If you are pushing out tons of JS codes everyday, even a simple change in the way you write a syntax could make a huge difference. And what's more, the end result looks much more readable and clean. Some might even say, it looks cool 😎.

Spread Syntax

One of the things I like about spread syntax is how it encourages you to think about mutability. Why? Mutability is one of the most common ways to screw up and make an app crash in unexpected ways. If you can't be sure that the data stays the way it is when it is being processed asyncronously, then why would you expect your computer to. The first step to making stable apps, is to adopt immutability as much as possible.

[...array, object]

Let's just say, if you are doing Array.push right now, start changing all of it to this. First of all, this gives you a new array, you are not mutating your existing array anymore, so there's that. But think about all the major benefits you are getting out of this.

What if you wanted to add a new object before everything else in the array? Just shift your spread operator to the back

[object, ...array]

no need to think about indexes. What about merging two arrays? Easy,

[...array1, ...array2]

You know what, let's just forget about how arrays used to work before this.

Object Literals

{ object }

As always with ES6, it requires some adapting and change of mindset, but once you get into the habit of doing it, it becomes a natural thing to do.

JSON has been a major contributor to the overall programmer's happiness index for these** golden years of programming**, and perhaps for years to come. So why stop here, there's potential.

If you are writing everything into your object constructor, maybe you should reconsider the approach, just to give an example :

 let object = { 
    created_time: dayjs(thisDate).format('hh:mmA'), ‌‌
    user_id: user.id.toString(),‌‌ 
    user_name : user.name.toUpperCase() 
 }

We are not doing so great here, it's hard to read, and modifying this object might be a hassle. Instead, let's try to do this :

 let created_time = dayjs(thisDate).format('hh:mmA')‌‌
 let user_id = user.id.toString()
 ‌‌let user_name = user.name.toUpperCase()‌‌
 let object = { created_time, user_id, user_name }

Amazing right! It's instantly more readable, concise, and easy to modify. This also makes you think about the names you are giving your variables, as they will affect how your json turns out, your variable names are now the object key!

Spread syntax also works for objects, so this is great if we want to make our objects immutable. Instead of doing object.key = item, maybe consider doing

let newObject = {...object, item}.

Merging objects are even easier, just do

{...object1, ...object2}.

Of course, if object2 has the same key as object1, it will replace the object for that key in object1, as the order is left to right.

Summary

It's a lot to absorb, so I shall stop here for today on ES2016. But I am liking ES6 a lot, it promotes good programming practices, and cleaner codes, which improves code readability and maintenability.

If you are doing Array.push right now, change it to spread operators.

If you are stuffing too much code into your object constructor, move them out into separate variables, and name those variables like how you want them to be represented in your object.

If you are mutating your objects, consider declaring the object as a new one each time it's values are being changed with spread operator.