Dudas sobre la lógica de JS (ejercicios inside)

kRain- #1 May '22

Buenas tardes a todos!! primero que nada, he visto que existe un tema: https://www.mediavida.com/foro/dev/plataforma-desarrolladoresprogramadores-junior-686242 pero no he visto que se puedan formular preguntas tan específicas así que abro nuevo tema.

Quiero meterle caña al tema del desarrollo web y actualmente estoy haciendo el curso de The Odin Project, el cual creo que es bastante completo para entender lo básico. Voy por la parte en la que tocamos JS y la verdad es que estoy bastante atascado en cómo funciona y cómo aplicar la lógica en determinados ejercicios. Ya he dado las cosillas básicas y he hecho pequeñas virgerías (El juego de piedra, papel o tijera, FizzBuzz y en breves tocará hacer una calculadora), así que ciertos conceptos creo que los tengo bien afianzados.

El tema es el siguiente, tengo que hacer varios ejercicios (se supone que tengo que poner en práctica el Test Driven Development) y hay uno o dos que pese a que los he logrado terminar (tras googlear mucho y ver algún video en YT), todavía no he terminado de entenderlos.

Uno de ellos consiste en crear una función que pille un array y uno o varios argumentos más y que elimine los otros argumentos del array. Os dejo el ejercicio:

Implement a function that takes an array and some other arguments then removes the other arguments from that array:

removeFromArray([1, 2, 3, 4], 3); // should remove 3 and return [1,2,4]
Hints
The first test on this one is fairly easy, but there are a few things to think about(or google) here for the later tests:

how to remove a single element from an array
how to deal with multiple optional arguments in a javascript function
Check this link. Scroll down to the bit about Array.from or the spread operator. - Or this link.

Hasta ahí bien, el primer test lo pasa fácil, luego vienen los demás:

const removeFromArray = require('./removeFromArray')

describe('removeFromArray', () => {
test('removes a single value', () => {
expect(removeFromArray([1, 2, 3, 4], 3)).toEqual([1, 2, 4]);
});
test.skip('removes multiple values', () => {
expect(removeFromArray([1, 2, 3, 4], 3, 2)).toEqual([1, 4]);
});
test.skip('ignores non present values', () => {
expect(removeFromArray([1, 2, 3, 4], 7, "tacos")).toEqual([1, 2, 3, 4]);
});
test.skip('ignores non present values, but still works', () => {
expect(removeFromArray([1, 2, 3, 4], 7, 2)).toEqual([1, 3, 4]);
});
test.skip('can remove all values', () => {
expect(removeFromArray([1, 2, 3, 4], 1, 2, 3, 4)).toEqual([]);
});
test.skip('works with strings', () => {
expect(removeFromArray(["hey", 2, 3, "ho"], "hey", 3)).toEqual([2, "ho"]);
});
test.skip('only removes same type', () => {
expect(removeFromArray([1, 2, 3], "1", 3)).toEqual([1, 2]);
});
});

Lo que he logrado hacer yo tras googlear, meterme en Stackoverflow y mirar vídeos en YT a punta pala:

const removeFromArray = function(...args) {
const array = args[0];
const nuevoArray = [];
array.forEach((item) => {
if (!args.includes(item)) {
nuevoArray.push(item);
}
})
return nuevoArray;
}

Esto ahora mismo lo podría escribir con los ojos cerrados ya que he estado una semana con estos ejercicios y cada día que pasaba lo borraba y lo empezaba de 0 con la esperanza de mejorar un poco mi lógica, y entiendo el código en buena medida, pero hay cosas que se me escapan.
Aún no he dado las arrow functions pero bueno, me he buscado la vida y al final es lo mismo que una function así que nada, pero conceptos como el if (!args.includes(item)) se me escapan, sé lo que hace el método includes() y también sé lo que hace el !NOT pero en ese contexto no sé bien qué es lo que está pasando.

Ok, forEach funciona como una especie de loop que itera por cada elemento, entonces el !args.includes(item) significa que si el ITEM no está añade el item al final del array? Es bastante lioso y quizás para la mayoría os sea simple pero pffff, es que no lo entiendo.

Me gustaría saber si conocéis de algún sitio web (el inglés no se me da mal pero tampoco soy un hacha lo que significa que me dejo cosas en el camino) o canal de YT que explique bien las cosas.

De momento tiro de javascript.info, documentación de MDN y algunos canales de YT como el de Jon Mircha, Web Dev Simplified o Codificandolo.

Muchas gracias y espero haberme expresado bien xD, que soy un poco imbécil.

MTX_Anubis #2 Jun '22 :psyduck:

tu problema es que no entiendes esa función?

1) const removeFromArray = function(...args) {
2)   const array = args[0];
3)   const nuevoArray = [];
4)   array.forEach((item) => {
5)     if (!args.includes(item)) {
6)       nuevoArray.push(item);
7)     }
8)   })
9)   return nuevoArray;
}

1) Declaración de la función: args Son los parámetros de entrada de la función, hay varias formas de declarar la signatura, una es con esos ... para indicar que vas a recibir varios parámetros (busca varargs si quieres) pero no sabes cuantos. Haciendo ...args lo que haces es "convertirlo" a un array. En este caso hay una forma mejor de declararlo que es:

const removeFromArray = function (array, ...itemsToRemove) ....

Ya que array debería de ser obligatorio siempre

2) args es un array así que sacas el primer parámetro de entrada de la función que es otro array ([1,2,3, etc]).

Si lo haces como te he puesto antes esta linea te la evitas.

3) Se crea un array para el resultado

4) como has dicho forEarch es una función que tienen los arrays que reciben como parámetro otra función y por cada elemento del array se va a llamar a esa función. Así que sí, se itera sobre el array y por cada elemento va a ejecutar la función que le pases.

5) Tu confusión, lo has dicho bien. Por explicar un poco

si llamas a la función removeFromArray([1,2,3,4,5], "hola", 2, 15, 25)

args: [[1,2,3,4,5], "hola", 2, 15, 25]

array será [1,2,3,4,5]

y ahí lo que estás haciendo es por cada elemento de array, si no está en args lo metemos en nuevoArray. Aquí lo malo es que estás comprobando sobre el primer argumento (el array sobre el que quieres eliminar los elementos) que da igual porque creo que no hay posibilidad de que sea lo mismo.

La forma natural de leerlo es: Añade a nuevoArray los elementos de array que no estén en los argumentos de la función.

9) Devuelve nuevoArray

Si quieres un oneliner y lo piensas un poco:

const removeFromArray = (array, ...others) => array.filter(item => !others.includes(item))

Dudas sobre la lógica de JS (ejercicios inside)

Usuarios habituales

Tags