Los métodos en JavaScript son funciones que pertenecen a un objeto y nos permiten modificar o manipular sus elementos. En este lenguaje de programación existen muchos métodos: desde para arrays hasta para promesas. Ya que cada método cumple una función diferente y única, normalmente utilizamos más de un solo método para controlar los elementos de un objeto. Por ello, en este post, te enseñaremos cómo anidar métodos en JavaScript, una práctica muy común que nos permite ahorrar líneas de código.
¿Qué es anidar métodos en JavaScript?
Anidar métodos en JavaScript es una técnica utilizada para ahorrar líneas de código a la hora de manipular elementos de un objeto. Normalmente, cuando queremos manipular elementos debemos crear una línea de código para cada método que utilizaremos. Entonces, el programa leerá primero un método y luego el otro en líneas separadas.
Al animar métodos en JavaScript, ahorramos líneas de código porque unimos el resultado de un método con la base del otro método. Ten presente que esto funciona solo cuando el primer método nos devuelve un resultado. En este orden de ideas, un método como el método forEach para manipular arrays, que no nos devuelve un nuevo elemento, no funciona. Cuando anidamos métodos usando uno que no nos devuelve algo, obtendremos undefined.
Anidar métodos en JavaScript es una práctica tan común que la vemos en la sintaxis definida para contextos más generales. Un lugar en el que te encontrarás esta técnica es en los métodos then y catch, que nos permiten manipular las promesas y normalmente se escriben de manera anidada.
¿Cómo anidar métodos en JavaScript?
Para anidar métodos en JavaScript, basta con escribir la función que nos permite ejecutar el primer método y, acto seguido, escribir el comando del segundo método. Para ejemplificar esto, te proponemos un ejemplo. Supongamos que tenemos la siguiente constante que contiene el array ‘arr’.
const arr = [10, 82, 31, 5, 42, 126]
Ahora, supongamos que queremos aplicar el método sort a este array para ordenarlo de manera ascendente. Además, queremos filtrar el array para obtener un listado de elementos que contenga solo valores menores a 50. Para ello, debemos aplicar el método filter.
Si quieres conocer más sobre los métodos disponibles para manipular un array, te invitamos a leer nuestro post sobre los arrays y la programación funcional en JavaScript. Para entender el ejemplo de este post en específico, puedes dirigirte a nuestros posts sobre el método sort y el método filter en JavaScript.
Entonces, una manera de llegar al resultado que estamos buscando sería crear una línea de código individual para cada método. Además, como queremos guardar el resultado de cada método en una variable, deberemos crear una nueva para cada uno. Por tanto, podríamos escribir el método sort de la siguiente manera:
const sortedArr1 = arr.sort ((a,b) => b.modules.lenght – a.modules.length)
Luego, podemos usar la variable sortedArr1 para llamar al resultado de este método en el método filter. Con ello, lograremos tener ambos efectos, sea cual sea el orden de los métodos en nuestro código:
const arrFiltered = sortedArr1.filter (item => item < 50)
Si quisiéramos crear un código más eficiente, podríamos anidar métodos en JavaScript con el simple uso de paréntesis. Esto hará que podamos guardar el resultado de los dos métodos en una sola variable final, ahorrándonos un paso en el código. A continuación, te mostramos cómo se escribirían los dos métodos anteriores en una sola variable:
// metodos y funciones javascript
const sortAndFiltered = arr.sort ((a,b) => b.modules.lengtt – a.modules.length).filter (item => item < 50)
console.log (sortAndFiltered)
Anidar métodos en JavaScript es posible porque el primer método, en este caso sort, nos devuelve un nuevo elemento, que para sort es un array. Es este nuevo array el que utiliza como base el método filter para llevar a cabo su proceso. Por esto, no podemos anidar métodos pertenecientes a dos objetos diferentes, pues el resultado del primer método no es un objeto manipulable por el segundo.
¿Cuál es el siguiente paso?
Después de leer este post, no solo has aprendido exactamente cómo anidar métodos en JavaScript, sino que también has dado un paso en tu camino para llegar a ser un experto del desarrollo web. Ahora, el siguiente paso es seguir aprendiendo y practicando. Puedes, por ejemplo, aprender a introducir un objeto dentro de objeto javascript , o aprender sobre métodos javascript.
Para conseguir una formación de calidad, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás, entre muchas otras cosas, a dominar lenguajes de programación como JavaScript, CSS y HTML. ¿A qué esperas para dar avanzar hasta alcanzar tus sueños? ¡Matricúlate ahora!
