JS Mini functions

Question

Is it worth using mini functions in JavaScript? Example:

function setDisplay(id, status) {
    document.getElementById(id).style.display = status;
}

And after that, each time you want to manipulate the display attribute of any given object, you could just call this function:

setDisplay("object1", "block");
setDisplay("object2", "none");

Would there be any benefit of coding this way?

It would reduce file size and consequently page load time if that particular attribute is changed multiple times. Or would calling that function each time put extra load on processing, which would make page loading even slower?

Answer 1

Is it worth using mini functions in JavaScript?

Yes. If done well, it will improve on:

• Separation of concern. For instance, a set of such functions can create an abstraction layer for what concerns presentation (display). Code that has just a huge series of instructions combining detailed DOM manipulation with business logic is not best practice.

• Coding it only once. Once you have a case where you can call such a function more than once, you have already gained. Code maintenance becomes easier when you don't have (a lot of) code repetition.

• Readability. By giving such functions well chosen names, you make code more self-explaining.

Concerning your example:

function setDisplay(id, status) {
    document.getElementById(id).style.display = status;
}

[...]

setDisplay("object1", "block");
setDisplay("object2", "none");

This example could be improved. It is a pity that the second argument is closely tied to implementation aspects. When it comes to "separation of concern" it would be better to replace that argument with a boolean, as essentially you are only interested in an on/off functionality. Secondly, the function should probably be fault-tolerant. So you could do:

function setDisplay(id, visible) {
    let elem = document.getElementById(id);
    if (elem) elem.style.display = visible ? "block" : "none";
}

setDisplay("object1", true);
setDisplay("object2", false);

Would there be any benefit of coding this way?

Absolutely.

would [it] reduce file size...

If you have multiple calls of the same function: yes. But this is not a metric that you should be much concerned with. If we specifically speak of "one-liner" functions, then the size gain will hardly ever be noticeable on modern day infrastructures.

...and consequently page load time

It will have no noticeable effect on page load time.

would calling that function each time put extra load on processing, which would make page loading even slower?

No, it wouldn't. The overhead of function calling is very small. Even if you have hundreds of such functions, you'll not see any downgraded performance.

Other considerations

When you define such functions, it is worth to put extra effort in making those functions robust, so they can deal gracefully with unusual arguments, and you can rely on them without ever having to come back to them.

Group them into modules, where each module deals with one layer of your application: presentation, control, business logic, persistence, ...