Aliasing repeated function calls

Question

I'm working on a JavaScript user script to assist my team in making assembling support tickets on a web interface more efficient. In doing so, I'm finding myself making a lot of calls to DOM API to gather data, e.g., with event listeners and user-triggered calls.

In an attempt to make my script more concise, I have made a few "alias" functions, such as below.

I am wondering if doing something like this would make the code more difficult to maintain, in the case of some other person (or myself in 6 months) having to add to or change the code later on, or if it would be beneficial, in cutting out unneeded repetition of code like document.getElementById("foo").addEventListener("change", doBar).

---

Question

While this may be somewhat opinion-based, I want to inquire: Is aliasing [well-known, standard] repetitive function calls likely to be an obstacle to keeping the code clear and relatively easy to maintain?

---

For a bit more background, this will eventually be a template helper to automate repetitive tasks in the browser and assist someone who is assembling an IT ticket over the phone or email.

/* 
Alias function to shorten `document.getElementById` calls 
*/
const getElemById = function(elemId) {
    return document.getElementById(elemId);
};

/* 
Alias function to shorten `addEventListener("change", refreshCallerValues)` calls 
*/
const addRefreshListener = function(elemId) {
    getElemById(elemId).addEventListener("change", refreshCallerValues);
};

Answer 1

Abstractions don't just have a value – simpler code –, but also a cost: more levels of abstraction make it more difficult to figure out what is going on. So there needs a balance between the value and the cost of an abstraction.

Abstractions tend to be more valuable when they aren't just an alias for some other operations (that's a terribly leaky abstraction), but when they have some independent meaning in your problem domain.

Aliasing a well-known, standard function generally won't provide much meaning of its own. If it doesn't make the code significantly easier, it's not worth it. Just saving you from a document. before the getElementByID() isn't really very much. So it may be unwise to obscure this from a casual reader who isn't familiar with your getElemByID() shortcut (aka. you in a few months).

Your other example addRefreshListener() is better because we abstract over multiple arguments. But much more importantly this function has an independent meaning in your problem domain (DOM manipulation). It satisfies some goal, without the caller having to know how it is satisfied. I would therefore strike this implementation detail from your docs.