Writing null-safe code to set form values

I will ask my question using the following example:

HTML

JS Code

var valArray = [{id: "ABC", value: "INPUT"}, {id: "UNKNOWN", value: ""}, {id: "XYZ", value: "TEXTAREA"}]

function process(arr) {
    for(var i=0; i<arr.length; i++) {
        var elem = document.getElementById(arr[i].id);
        if (elem != null) {
            elem.value = arr[i].value;
        }
    }   
}

process(valArray);

It works fine, but now I want to do it without an explicit if statement.

How about the following code? Is it a proper JavaScript way to handle such situations?

function process(arr) {
    for(var i=0; i<arr.length; i++) {
        (document.getElementById(arr[i].id) || 0).value = arr[i].value;
    }   
}

From Programming JavaScript Applications by Eric Elliott- Chapter 3. Objects:


Even primitive types get the object treatment when you refer to them
with the property access notations. They get automatically wrapped
with an object so that you can call their prototype methods.


Primitive types behave like objects when you use the property access
notations, but you can't assign new properties to them. Primitives get
wrapped with an object temporarily, and then that object is
immediately thrown away. Any attempt to assign values to properties
will seem to succeed, but subsequent attempts to access that new
property will fail.

In general I saw a lot of JavaScript code where || construct was used to protect against null.

So I thought, that the above described behavior would make primitives ideal candidates for "throw-away" objects.

If this is so convoluted, what about using Object:

(document.getElementById(arr[i].id) || Object).value = arr[i].value;

That was my original idea but it seems to pollute the environment.

(document.getElementById(arr[i].id) || 0).value = arr[i].value;

In this code there is a pointless assignment when the element is not found.
In this case, the 0 gets wrapped into a temporary object,
and the assignment will work, but it will be pointless,
it's result will be thrown away.
This assignment is merely a side effect of the shortcut,
it has no purpose of its own.

Every operation in a program should be intentional, purposeful, and this shortcut violates that. As such, I consider this a dirty hack. Don't use it.

When in doubt,
go for the more intuitive and readable solution.
The first example in your post is slightly longer,
but it's simple and clear: there's no question about what will happen.

The second way,
although shorter,
may not be obvious for everyone.

Keep in mind that code is read far more times than it’s written.
It's better to favor a technique that's clear and easy to understand to something "clever" but potentially confusing / obscure.

Additional excellent recommendation by @GameAlchemist, verbatim:


1) for optimisation purposes, the if is faster. and more importantly 2) a piece of code should be as much self-documenting as possible. Even if (element) is better written if (element != null) (which makes obvious the defensive check against getElementById returning null)

StackExchange Code Review Q#64085, answer score: 12