Cómo crear tu propia función $ en JavaScript y simplificar tu código

En JavaScript, la función $ es ampliamente usada en bibliotecas como jQuery, por ello vamos a crear nuestra propia versión de esta función para simplificar tareas como seleccionar elementos del DOM o realizar operaciones comunes.

Función $

La función dólar se usa como selector de elementos del DOM, esto se logra usando los métodos de JavaScript: document.querySelector y document.querySelectorAll. Con ello podemos usar los siguientes selectores:

#selector: Busca el elemento por el atributo id.
.selector: Busca el elemento que contenga la clase selector.
tagname: Busca el elemento por el nombre de la etiqueta.
parent tagname: Busca el elemento por el nombre de etiqueta dentro de otra etiqueta.
tag[attribute=value]: Busca el elemento por la etiqueta con determinado atributo.

Selector básico

Creamos una función básica usando document.querySelector, el cual permite usar los selectores deseados:


const $ = (selector) => {
    document.querySelector(selector);
}

Con esta versión, podemos seleccionar elementos de esta manera:


let name = $('#name');                      // Buscar por ID del elemento
let button = $('.btsubmit');                // Buscar por class del elemento
let label = $('form label[for=name]');      // Buscar por árbol del DOM

Selector Mejorado

Podemos hacer que el selector pueda seleccionar sub-elementos de un determinado elemento, para ello modificamos la función $:


const $ = (selector, parent = undefined) => {
    parent = (parent === undefined) ? document : parent;
    return parent.querySelector(selector);
}

Luego podemos usarlo de la siguiente forma:


let form = $('#formRegister');              // Seleccionar elemento
let mail = $('input[name=email]', form);    // Seleccionar sub-elemento

Selector Multiple

Ahora hagamos que esta función devuelva un array con los elementos que coincidan con la búsqueda deseada, si encuentra un sólo valor devolveremos el primer elemento.


const $ = (selector, parent = undefined) => {
    parent = (parent === undefined) ? document : parent;
    let elements = Array.from(parent.querySelectorAll(selector));

    return (elements.length === 1) ? elements[0] : elements;
}

Luego podemos buscar todos los inputs de un formulario:


let form = $('#formRegister');              // Seleccionar formulario
let inputs = $('input', form);              // Seleccionar todos los inputs
inputs.forEach(input => {
    console.log(input);
});

Modificar elementos

Podemos crear una función que permita modificar las propiedades de los elementos seleccionados, para ello crearemos la función $$ que tenga los siguientes métodos:

css: Para agregar estilos al elemento seleccionado.
text: Para modificar el texto del elemento seleccionado.
html: Para modificar el contenido HTML del elemento seleccionado.
on: Para agregar eventos (click, change, etc) al elemento seleccionado.

Entonces la nueva función quedaría de la siguiente manera:


const $$ = (selector, parent = undefined) => {
    parent = (parent === undefined) ? document : parent;
    let elements = Array.from(parent.querySelectorAll(selector));

    return {
        elements,
        css: function (styles) {
            elements.forEach(el => {
                Object.assign(el.style, styles);
            });
            return this;
        },
        text: function (content) {
            elements.forEach(el => {
                el.textContent = content;
            });
            return this;
        },
        html: function (content) {
            elements.forEach(el => {
                el.innerHTML = content;
            });
            return this;
        },
        on: function (event, handler) {
            elements.forEach(el => {
                el.addEventListener(event, handler);
            });
            return this;
        }
    };
};

Podemos usar esta nueva función para modificar las propiedades del elemento seleccionado de la siguiente manera:


$$('.box').css({ backgroundColor: 'blue', color: 'white' });    // Agregar estilos
$$('.box').text('Hola, mundo');                                 // Modificar texto
$$('.box').html('Hola, <strong>mundo</strong>');                // Modificar HTML
$$('.box').on('click', () => alert('¡Elemento clickeado!'));    // Agregar evento

Consideraciones

Crear tu propia función dólar $ permite simplificar código reutilizando métodos y mejora la legibilidad de tu código fuente. Pero debes tener en cuenta que implementar $ puede entrar en conflicto con otras bibliotecas que usan el mismo símbolo, por lo que se recomienda usarlo siempre y cuando lo uses librerías externas.

Conclusión

Crear una función $ personalizada en JavaScript permite abstraer operaciones repetitivas del DOM y mejorar la productividad. Puedes empezar con algo básico, como seleccionar elementos, y extender la funcionalidad según lo necesites.