DEV Community

17 Pro JavaScript tricks you didn't know

Rahul on November 29, 2020

There are many ways to write code but generally the first way for many people is very long and can take you some time. Here is my latest post that ...

Read full post

Michael Z • Nov 29 '20

// Noobs:

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

// Pro:

let num = 15;
let s = num + ""; // number to string
let n = +s; // string to number

Sorry, but clever != pro. The "Noob" version much better reveals the intent of the code.

Aral Roca • Dec 1 '20

Same for

if(a!=123) // before // NOOBS

if(a^123) // after // PRO

a^123 is not very clean IMO. Maybe a better one will be if(a !== 123)

Aral Roca • Dec 1 '20 • Edited

And it's not correct for decimal numbers.

Boolean(122^123) // true
Boolean(123.1^123) // false -> is not correct, should be true 123.1 !== 123
Boolean(123^123) // false

Much better to use the !== operator.

Miguel Ruiz • Dec 3 '20

Also we should think this is something that someone who comes from another Programming Language won't understand easily, just for saving 1 character

Joan León • Dec 9 '20

IMHO

if(a!=123) // before // NOOBS

if(a!==123) // after // PRO

Luis Vegerano • Dec 3 '20

I would never approve a PR with something like that.

Rahul • Nov 29 '20

I agree. But you know the pro version is better when you know many things about JS and doing big projects. I too had some doubt when writing this.

Mišo • Nov 29 '20

Sorry, but I have to strongly disagree. Please don't make people think it's better to complicate things. The Noob version is actually a Pro especially in big projects. I already wrote it here dev.to/misobelica/comment/15b21

JS is not the best language even without these quirks. We should know them but consider them a very sad code smell and not a Pro version.

Rahul • Nov 29 '20

I'm sorry sir. When i will post again something related to this i will surely keep this in mind. Currently i'm writing through my phone so it will be hard for me to do. I'm sorry once again

Hans Spaans • Nov 29 '20

I wouldn't say better as it reduces the readability and maintainability of the code a lot. Having a language with strict type casting may seem a hassle for some, but it saves you hours of debugging in the long run. It was one of the significant reasons for the development of TypeScript and as a goal for both PHP 7 and Python 4.

Rahul • Nov 29 '20

People write codes with their read comfort ability.

Seanmclem • Nov 30 '20

Pretty much the #1 rule when learning programming is to not only write for yourself but with future coders and teammates in mind.

Zhitomir Oreshenski • Nov 30 '20

It is not readable and maintainable in the long run.

Rahul • Nov 30 '20

Agree.

Madza • Nov 30 '20

was going to say that too 😉

Asaju Enitan • Nov 29 '20

I am not so cool with the "pro" code, def not advisable for team based projects

spO0q • Nov 29 '20

Before anything, thanks for sharing. These are funky tips, and it's always interesting to read posts like yours.

However, I prefer not being "clever", especially in a pro context. I want everybody to understand what I'm doing rather than being regarded as a code ninja. To me, if it's harder to read, it's worse, not better.

Maybe the "pros vs. noobs" presentation is not the best here. Likewise, I can assure you that big projects require clarity. If it's too "clever", it's harder to maintain.

Rahul • Nov 29 '20

I surely agree with this and i will keep this in mind. I'm sorry actually I'm using my phone for blogging. I'm sorry.

spO0q • Nov 29 '20 • Edited

No problem, thanks for sharing :)

bugb • Nov 30 '20 • Edited

Your code is incorrect

let dynamic = "value"; 
let user = {
    id: 1
    [dynamic] = "other value"
};

It should be

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic]: "other value"
};

Rahul • Nov 30 '20

That comma though. I'm sorry

Adam Azad • Dec 3 '20

So is =. It should be a colon :

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic]: "other value"
};

Ivan Pozderac • Nov 29 '20 • Edited

Have you ever worked in a team where you have senior, mid, 2+ juniors and intern?

senior and mid are like fish in the water with 'pro' code while juniors and interns feel like fish on a tree!

Clever code is ok to have on small teams where level of knowledge is similar. Having clever code in a larger teams leads to codebase nightmares.

Code should always be readable and easy to understand for everyone who will work on it. If you have to explain it, then your code is just a bad joke!

Andrej Rypo • Nov 29 '20 • Edited

if(a!=123) // legible to anyone
if(a^123) // wtf

I don't believe this code actually improves anything, like many other snippets presented here. It sacrifices one keyboard hit for legibility.

While I might be dumb for not knowing the trick, the difficulty is to make the code better understandable, not vice versa.

Aral Roca • Dec 1 '20

And doesn't work as expected.... Boolean(123.1^123) // false, but should be true

Brian Hogg • Dec 3 '20

Yeah, the XOR operator isn't doing an equivalence check, at least not in the way the OP is presenting. It's just not a relevant tool to use, I don't think.

Alice Fernandes • Nov 29 '20

let num = 15;
let s = num + ""; // number to string
let n = +s; // string to number

I don't believe that this is pro javascript. This is playing with types of js and praying that it doesn't break in the future. I believe that converting to other types should be explicit so that it becomes readable to other coders

Rahul • Nov 30 '20

Yea agree.

Ivan Pozderac • Nov 30 '20

When I think about it, I have to say that I completely agree with you.

While I'm comfortable to read 'PRO' code, I find myself writing readable code even in personal projects and stuff I'm just trying out that will never be seen by anyone else.

I guess it is a force of habit.

Clever code led us to having 'rockstar ninja developers' - writing 'PRO' code just to look clever and to confuse others to gain leverage and opportunity to explain something that shouldn't need explanation in the fist place.

You are 100% correct on this one!

Rahul • Nov 30 '20

I can see someone understanding me. Sigh of happiness finally

Jakub T. Jankiewicz • Nov 29 '20

Please check your code by running it first:

This is syntax error, because it's not valid JavaScript:

for(let i=0; i < arraySize; i++){
       filledArray[i] {'hello' : 'goodbye'};
}

missing =, another is this, that suppose to be true but the character is not zero is letter o and even lowercase.

console.log(0 == 'o')

Peter Ellis • Dec 2 '20 • Edited

The trouble with some of these is that while they may save a negligible amount of writing time, they certainly do increase reading time. Reason being, nobody reads character by character, it's closer to token by token.

A good example is your Removing duplicates snippet: you're replacing over 20 tokens (some of them loops and ifs, which are even more taxing to parse), with 5 simple ones. Brilliant! Best of all, it doesn't matter how skilled you are, the "pro" option is easier to read for everyone. And this is key.

Because if we look at the convert string/number and back snippet. num.toString() is two simple and verbose tokens in a not-at-all surprising sequence. You don't even have to know that num is a number to understand what's going on. Great! How about "" + num? Well, in terms of tokens it isn't any shorter. However it also includes a non-intuitive use of +. As you're not using the main effect of + (i.e. adding/concatenating) two things but a secondary effect (type coercion).

Same goes for the reverse direction, except there you also add another confounding construct: = +. Which will definitely have most people stop for a moment to re-parse it, because we very rarely put two separate operators after each other.

Some people say "ah, but once you get used to them, it becomes second nature and you can read it as fast as the noob versions". That is true, but note how it isn't actually faster: what you've achieved is that you spent a lot of time learning to read structures "noobs" can't read.

And that's my biggest criticism of lists like these. I don't think it was your intention but the noob/pro distinction creates a gate-keeping effect, where certain coding practices are followed not for any tangible improvement in code quality but to signal belonging to a group, in other words, they're a shibboleth.

Thr0TT1e • Nov 30 '20 • Edited

ERROR - "Object to Array"

// Noobs:

let number = {
    one: 1,
    two: 2,
};
let keys = [];
for (let numbers in number) {
    if (number.hasOwnProperty(numbers)) {
        keys.push(numbers);
    }
}

console.log(keys) // [ 'one', 'two' ]

// Pro:

let number = {
    one: 1,
    two: 2,
};
let key   = Object.keys(number) // [ 'one', 'two' ]
let value = Object.values(number) // [ 1, 2 ]
let entry = Object.entries(number) // [ [ 'one', 1 ], [ 'two', 2 ] ]

Rahul • Nov 30 '20

Everyone has their own perspective sir.

Meg Stepp • Dec 3 '20

No he meant your had typos in your variable names. You declared a "number" variable but referenced "numbers" (with an s) in your code examples. The code literally doesn't run.

Rahul • Dec 3 '20

Agreed.

xx • Nov 30 '20

console.log(0 == 'o'); // true

o -> '0'

alireza tavasoli • Sep 3 '22

My brain exploded when I read it.

Sanjeev Sharma • Nov 30 '20

Well, Make sure you don't apply each one of these. Think before using.

Readability > Pro Hacks

Also, this a != 123 is not noob and this a ^ 123 is not pro. If I see this, I'll refactor it.

Ben Sinclair • Nov 30 '20

If I see this, I'll query it because I'll assume they made a typo.

Sanjeev Sharma • Nov 30 '20

Now that we know it's a pro move. You won't need to. Haha.

GlyphCat • Nov 29 '20

I usually don't point out spelling mistakes but this one is an exception. I believe you meant .map in pro code of the Populating an array section? 😅

Rahul • Nov 29 '20

I'm sorry. I will surely change it. Actually i am blogging using my phone. I'm really very sorry sir.

GlyphCat • Nov 30 '20

No worries, no need to apologize. It's your blog post, just tryna help you out 🍻

Steve Huckle • Dec 3 '20

Some of the points have already been made, but I'd like to add to the growing number who suggest that many of the 'improvements' are unreadable -> unmaintainable.

Many of us write in multiple languages. I prefer to write code in a style that is recognisable by the majority, not the nuanced minority. In other words, I'd use != every time. And toString(), too.

That said, there are one or two nice examples, so thanks for sharing. For example, this one's good, and much more readable: let outputArray = Array.from(new Set(array));

Mathieu Grenier • Dec 1 '20

Curious, anyhow you code noob/pro , performance/optimization will be impacted ?
Personnally i prefer a better readability for the team, but for personnal project im learning toward to code with new learning stuff from pro ;)

Rahul • Dec 1 '20

I agree with you. Readability matters.

Pablo Barría Urenda • Dec 2 '20

This is a bad article that makes me want to unfollow dev.to

Rahul • Dec 3 '20

Sorry sir. If you don't like it's your wish to do whatever you want. Thank You.

Henry Boisdequin • Nov 29 '20

Great tips!

Rahul • Nov 29 '20

Thank You.

qq449245884 • Dec 3 '20

Hello, may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Rahul • Dec 3 '20

I would love it. Thanks. My article requires an edit a bit .... and use this link as source - >

rahulism.co/2020/11/29/_17-pro-jav...

dotorimook • Dec 3 '20 • Edited

Thank you for the nice post.

For Populating array,

const array = [...new Array(arraysize)].map(() => ({'hello' : 'goodbye'}));

would also work. I prefer to use this ☺

Dani Chu • Dec 8 '20

What about this?

const array = Array.from({ length: arraysize }, () => ({ hello: 'goodbye' }))

And if rename arraysize to length then

const array = Array.from({ length }, () => ({ hello: 'goodbye' }))

Christopher Wray • Nov 30 '20

Better like this:

hungry ? “Yes” : “No”

olsard • Nov 30 '20

Awesome! Thanks for sharing.

Andrej Rypo • Nov 29 '20

Exactly 😆

Sevda Anefi • Dec 11 '20

I liked the one with the set. Will be using it from now on.

Brett Cooper • Dec 3 '20

numbers is not defined: Object to Array

slidenerd • Dec 20 '20

the noob version of populating an array is MUCH more efficient than the pro version, run the benchmarks and see for yourself