I was doing code review for a coworker yesterday, and it soon became obvious that he used a linter and that the linter gave him a bright idea: use strict comparisons.
Using strict comparisons is a great rule to follow. ===
instead of ==
, !==
instead of !=
. Your life will be better.
You're ensuring not only that your values are equal or unequal, you ensure their types match as well. Because JavaScript has funny types, strict comparison lets you avoid painful pain.
Things like this:
> "0" == 0true
And like this:
> true == 1true> false == 0true
Even things as silly as this:
> new Array() == 0true> [] == 0true
Run a linter on those examples, and it will sagely say "Dude, use strict comparison. ALWAYS use strict comparison.โ
And your linter would be right. ===
fixes all of those examples.
> "0" === 0false> true === 1false> false === 0false> new Array() === 0false> [] === 0false
๐ Problem solved. ๐
But here's one situation where it gets tricky. Checking undefinedness:
> null == undefinedtrue> null === undefinedfalse
Under loose comparison, null
and undefined
are equal. Under strict, they're not.
This can cause all sorts of issues.
Here are some examples I found in my coworker's PR. ๐
const url = $(elem).data('url')if (url !== null) {// ...}
But if your elem
doesn't have a data-url="..."
attribute, jQuery returns undefined
, not null
. Strict comparison fails.
A better approach is to use if (url)
because undefined
is falsey and so is an empty string. That makes your code robust against data-url=""
:)
function scroll({ elem, offset, duration }) {duration = duration !== null ? duration : 2000;}
But if you call scroll()
without duration, it's undefined
, and your code breaks. No default duration for you. A better approach is to use destructuring defaults, like this: function scroll({ elem, offset, duration = 2000 })
.
function get_id(widget) {let id = widget.id;if (id !== null) {// ...}}
But reading an inexistent object property returns undefined
, not null
, and this code breaks. Once more, you're better of relying on inherent falsiness ๐ if (id)
.
function createWidget(defaultText, onClick, markBusy) {new Widget({text: defaultText,onClick: onClick,markBusy: markBusy !== null && markBusy})}
This one is tricky. It's trying to pass markBusy
into the Widget
constructor, but only if it's defined. You can't use default param values because there's no destructuring so hmmโฆ ๐ค
Then again, the whole exercise is futile. You can achieve the same effect if you rely on inherent falseyness: markBusy: !!markBusy
.
I guess my point is that you have to be careful. Don't blindly trust your linter when it says change this code
to that code
.
Happy hacking ๐ค
Learned something new?
Want to become a high value JavaScript expert?
Here's how it works ๐
Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet ๐right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.
Start with an interactive cheatsheet ๐
Then get thoughtful letters ๐ on mindsets, tactics, and technical skills for your career.
"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐"
Have a burning question that you think I can answer?ย I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.
Ready to Stop copy pasting D3 examples and create data visualizations of your own? ย Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization
Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.
Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first ๐ฐ on the side with ServerlessReact.Dev
Want to brush up on your modern JavaScript syntax?ย Check out my interactive cheatsheet: es6cheatsheet.com
By the way, just in case no one has told you it yet today: I love and appreciate you for who you areย โค๏ธ