Is Type Coercion in JavaScript a Good Thing?

Many experienced software developers usually cringe when come around JavaScript (voluntary or not) and it’s native language features as type coercion, concepts of “truthiness” and “falsiness ” etc. And sometimes fairly so. But what if this openness, the freedom of loosely typed language is actually a great tool in your toolbox when it comes to writing clean and elegant solutions?

The panic of not knowing the side effects, the artifacts that language produces as a result not being a strictly typed one is pretty common, especially among the “newbies” of the above concepts. Uncertainty is the worst for developers! But most of the time the uncertainty comes from the lack of particular experience.

Let’s take a look at the example task, traditional approach and the approach with type coercion.

The task.

We need to dynamically alter the width of DOM elements within a container depending on how many elements are present, to make sure that they take full width of the container.

Maximum amount of elements is 3. If we have only 2 elements then each of those need to have 50% width, if we have 3 elements then the width of the each element should be 33%. Of course single element should take full, 100% width.

We know that element is present by the corresponding Boolean flag.

CSS solution would be the most elegant one, right? But for the sake of example, lets pretend CSS is stuck in 1996.

Traditional approach.

It’s about to get ugly!

There you go:

Boolean FIRST_ELEMENT;
Boolean SECOND_ELEMENT;
Boolean THIRD_ELEMENT;

String width;


// If all elements are present
if (FIRST_ELEMENT && SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '33%';
}

// If 2 elements are present
if (FIRST_ELEMENT && SECOND_ELEMENT && !THIRD_ELEMENT) {
    width = '50%';
}

if (FIRST_ELEMENT && !SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '50%';
}

if (!FIRST_ELEMENT && SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '50%';
}

// if only one element is present
if (!FIRST_ELEMENT && !SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '100%';
}

if (FIRST_ELEMENT && !SECOND_ELEMENT && !THIRD_ELEMENT) {
    width = '100%';
}

if (!FIRST_ELEMENT && SECOND_ELEMENT && !THIRD_ELEMENT) {
    width = '100%';
}

This code does the job. But oh boy.. something died inside me when I pasted it in.

Can we do better with the traditional approach? I think so. Lets do small and obvious improvement, default and get rid of the last 3 conditions:

String width = '100%';


// If all elements are present
if (FIRST_ELEMENT && SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '33%';
}

// If 2 elements are present
if (FIRST_ELEMENT && SECOND_ELEMENT && !THIRD_ELEMENT) {
    width = '50%';
}

if (FIRST_ELEMENT && !SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '50%';
}

if (!FIRST_ELEMENT && SECOND_ELEMENT && THIRD_ELEMENT) {
    width = '50%';
}

This code still has a distinctive smell. We can go further with “optimizations”, introduce bitwise XOR, add more logic, reduce the amount of conditions. The question is: Will it be readable? Or will it be one of those things that would require you to leave a comment on for future generations to understand what is actually going on? Still sounds bad.

Now lets take one of the tools in our toolbox and see if it can be useful here: Type Coercion.

Type Coercion.

Type coercion is a feature that allows us to transform a variable of one type into another dynamically under certain conditions.

In this particular case we can leverage JavaScript’s type coercion of Booleans into Integers when performing arithmetic operations.

False transforms into 0;

True transforms into 1;

This is how it can be helpful in this particular example:

String width = '100%';
Int TOTAL_ELEMENTS = FIRST_ELEMENT + SECOND_ELEMENT + THIRD_ELEMENT;

if (TOTAL_ELEMENTS === 2) {
    width = '50%';
}

if (TOTAL_ELEMENTS === 3) {
    width = '33%';
}

Readability has improved significantly!

These days when readability and instant comprehension of the code written by others is one of the most important (if not The most important) ingredients for the team performance, we should utilize every trick we have up our sleeves to comply. Type coercion is clearly one of those.

To the contrary of Betteridge’s law of headlines, this one can’t be answered with the word “no”.