¿Por qué separar y englobar métodos en JavaScript?

Autor: | Última modificación: 1 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Programar es mucho más que escribir líneas de código lógicas o conocer cada uno de los elementos de un lenguaje de programación. Esto lo puede hacer casi todo el mundo. Lo que diferencia a un programador común de un buen programador son las buenas prácticas que realiza a la hora de ordenar su código.

Una de ellas es crear módulos, otra es organizar sus funciones. En este post, te enseñaremos por qué separar y englobar métodos en JavaScript es una buena práctica y cómo llevarla a cabo.

¿Qué es separar y englobar métodos en JavaScript?

Antes de explicarte por qué separar y englobar métodos en JavaScript, te sugerimos echarle un vistazo a nuestro post sobre arrays y programación funcional en JavaScript. Allí te explicamos exactamente qué es un método y por qué es importante para el estilo de programación funcional.

Cuando hablamos de separar y englobar métodos en JavaScript, nos referimos, por un lado, a crear variables que contengan las funciones de nuestros métodos en un módulo específico. Por ejemplo, en nuestro post sobre array.prototype.shuffle en JavaScript hemos insertado una función que afecta el prototipo de nuestro objeto array para crear un método.

Entonces, el primer paso a la hora de separar y englobar métodos en JavaScript es atribuir esta función a una variable en específico. Te recomendamos nombrar a tus variables con nombres fáciles de reconocer y que describan claramente su función. Para el método shuffle, nosotros crearíamos la siguiente variable:

const setupArrayShuffle = ( ) => {

array.prototype.shuffle = function ( ) {

var i = this.lenght, j, temp;

if (i === 0) return this;

while (–i) {

j = Math.floor ( Math.random ( ) * ( i + 1) );

temp = this [i];

this [i] = this [j];

this [j] = temp;

}

return this;

}

Ahora que hemos insertado el método shuffle dentro de la variable setupArrayShuffle, podemos moverla entre proyectos o secciones utilizando la importación y exportación de los módulos de JavaScript. Entonces, bastaría con añadir la palabra clave export antes de la constante para hacer que esta variable esté disponible en otros archivos JavaScript.

Desde KeepCoding, te recomendamos hacer este proceso para cualquier alteración o función que crees en tu proyecto. Con esto, separas las alteraciones en secciones individuales que podrás modificar de una manera más sencilla sin afectar todo el proyecto.

Ahora, si quieres exportar muchos métodos de un lado a otro, podrías crear una sola variable con todos los métodos insertados. Pensemos, por ejemplo, que tenemos otro método dentro de una variable setupSuperMap. Entonces, para englobarla con el otro método haríamos lo siguiente:

export const setupArrays = ( ) => {

setupArrayShuffle ( )

setupArraySuperMap

}

Esta nueva variable, que nosotros hemos llamado setupArrays porque engloba distintos métodos para modificar arrays, puede importarse en cualquier otro módulo para que este tenga acceso a los dos métodos contenidos.

¿Por qué separar y englobar métodos en JavaScript?

Separar y englobar métodos en JavaScript de la manera en la que te hemos enseñado no solamente es una buena práctica en términos de seguridad, pues nos permite afectar solo a algunas partes del código, sino también por portabilidad. Es decir, tener un método en una variable a la que podemos acceder desde cualquiera de nuestros módulos nos da la flexibilidad de decidir si lo queremos o no en un proyecto. Basta con que importemos esta variable para que esté disponible. Sin embargo, como un método afecta directamente al prototipo, puede que no siempre lo queramos.

De manera general, te recomendamos que toda acción que puedas insertar dentro de una función o variable la organices de esta manera. Esta práctica, al igual que separar y englobar métodos en JavaScript, es muy útil a la hora de ordenar código. Por un lado, nos permite reconocer qué está haciendo cada línea de código gracias a su nombre claro y descriptivo (como setupArrayShuffle). Por otro lado, nos permite una práctica llamada reutilizar código.

Reutilizar código se refiere a que, cuando una acción está insertada dentro de un objeto con nombre, podemos llamar a esta acción repetidas veces en nuestro proyecto con su nombre. Esto nos evita repetir las operaciones que generan esta acción, simplificando y clarificando el proyecto para todos los integrantes involucrados.

¿Quieres seguir aprendiendo?

Al leer este post has aprendido por qué separar y englobar métodos en JavaScript y cómo hacerlo. Ahora, te invitamos a seguir aprendiendo con nosotros sobre otras buenas prácticas del desarrollo web en nuestra formación intensiva: el Desarrollo Web Full Stack Bootcamp. Allí, además de continuar aprendiendo a dominar lenguajes de programación como JavaScript, CSS y HTML, aprenderás todo lo necesario para ser un experto en desarrollo web. Y lo mejor, ¡lo harás en tan solo unos meses! ¿A qué esperas para empezar? ¡Inscríbete ahora y triunfa en el sector tecnológico!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!