Bring types to your JS codebase

JavaScript is known for it’s flexiblity which is a double-edged sword. Many, many WTF JS articles was written about it and many articles lists a ton of new features that each ECMAScript release provides to developers.
Do you think that you use all of them? Can they help you be more productive or are those just bells and whistles?

I would like to show you more in-depth use-case of defaults in JS that with some help from VS Code will enable you bring types to your JS app without new toolset like TypeScript or Flow requires.

Guess a type by the default value

Consider this function definition:

function summary (elements, reportMode) {...}

That can you say about the arguments that are passed in?

• elements is probably an array of some values,
• reportMode is (probably?) a boolean.

There are some context pieces to gather from function and argument names but e.g. is reportMode required for the summary to work? Or does elements should be array or maybe a Set?

Those questions can be answered by the code, and I don’t mean that you have to analyze function body to do so. Just add some default values.

Consider this redefinition:

function summary (elements = [0], reportMode = false) {...}

Now you know for sure that reportMode should be a boolean and that it is optional since if you will not provide any value as the second argument it’ll be fine since it will fill itself with a false and not undefined (which is still falsy in checks but e.g. can make logging obscure). Also, elements should be an array of numbers. Maybe it’ll work with other iterable structures but you know for sure that original author prepared function body with a assumption that an array will be passed there.

It’s all great, but it gets even better if you see how VS Code is able to pick up this information and show you some related docs and generate autocomplete:

Code with IntelliSense enumerating avaliable function on Array type with drop-in docs

As a bonus, VS Code’s IntelliSense predicted that I would use reportMode in if statement thanks to it’s knowledge, that reportMode is a boolean! No more lurking the web docs to check if filter on array throws out elements that match or keeps them in the result.

Including an element in array feeded the IDE with even more data that can benefit the programmer, look:

Code with IntelliSense enumerating avaliable functions on array elements

Working on elements does come with it’s own types IntelliSense. Did you know that .toFixed() has an upper limit for fraction digits?
“Yeah, probably it does” I hear you say, but now we know the the limit is 20! Inclusive! No need to remember it and lower risk about forgetting it.

Just to make the point clearer, here’s how much more of a Notepad the VS Code was before the defaults applied:

Code with IntelliSense that knows only function and argument names

VS Code without defaults is like, “Uhm, I don’t know, maybe you want to write stuff you already did, again?” and with defaults can predict what you will write next!

The most important thing is that you can start using defaults (given your target system supports ES6 which is 5 years old, so I really hope it does) today without any additional tooling and every user of your code will benefit.