Menu iconMenu

In this article we’ll be look at some fundamental Javascript “idioms”.

What is an Idiom?

An idiom is a pattern, often repeated and well understood by a community of programmers. By using idioms we can communicate our intent clearly, avoid pitfalls, and gain a better understanding of the big ideas behind a language. In this article we focus code patterns.

We’ll avoid formatting, naming, and other items you can find in a style guide.

Below there are a number of code examples using ES2016 syntax. The values of variables are shown in comments that look like this:

// -> true

Comparison

Use ===  or !== .

==  can be confusing, use ===  to avoid headaches.

If you want to look at the bullet you’re dodging, see here.

Gotcha
JS compares objects and arrays by reference, not by their values
This results in some surprising behaviour:

There is one case where  ==  and  !=  are used. Instead of writing:

We can write:

This will check for both null, and undefined.

When writing your own code that might not return an object, prefer returning undefined over null.

Convert a number, string, object reference to a boolean

Because of implicit type conversions in JS we can negate (!) a value to convert to a boolean, then negate that again to see if the original value coerces to true or false.

Implicit checking

Javascript programs often take advantage of implicit type conversions to shorten tests, eg:

This can sometimes cause issues, eg:

  • If 0 is a valid number of attendees
  • If you’re checking for an empty array or object, !![]  and !!{}  both return true

To check if an array is empty, check people.length .

To check if an object is empty, check Object.keys({}).length .

In your own code you can use explicit checks (eg: a.length >= 0 ). Either way, it’s still useful to be clear on what a value may return when coerced.

Summary: false , Empty String ( ""),    , null , undefined , and NaN  all are all false in if statements, everything else, eg: -1 , "0" , "false" , [] , {}  are interpreted as true.

Check if an object reference is defined

Setting a default when we are unsure

When we are unsure if a variable storing an object is defined, we use the or operator ( || ) to specify a default, this works because !!undefined === false.

This checks the value of firstPartyGuest , if there isn’t one, then I am the lucky winner!

Further reading and next steps

While many style guides contain some idioms (eg: https://github.com/rwaldron/idiomatic.js/ and https://google.github.io/styleguide/javascriptguide.xml), I recommend using a linter plug-in / auto-formatter in your favourite editor for style issues instead and focus on the code itself (eg: https://github.com/feross/standard)

Douglas Crockford covers a similar issue, that is how we can write reliable, predictable Javascript, in his talk here:

To cement these concepts in your mind I recommend https://www.codewars.com/. It gives you small exercises and then a ranked list of other user’s answers.

Happy coding!

That time we went to nz.js(con);

Code surfer and bearded wonder Ersin, on Media Suite's trip to nz.js(con) in Wellington.
Ersin Posted by Ersin on 13 April, 2017

A Day in the Life of an Ember Concurrency Task…

Media Suite's itinerant American developer explores one of the nuances of ember-concurrency.
Patrick Posted by Patrick on 19 October, 2016

The Simulation Game

What happens when a father of three somehow ends up with a little too much spare time? A simulated WW2 Enigma machine, of course. Cambridge-based developer Ewen on cracking the code.
Ewen Posted by Ewen on 5 May, 2017
Comments Comments
Add comment

Leave a Reply

Your email address will not be published.