1

Conozco el comportamiento (casi todo) de las keyword async / await; Y justo ayer estaba jugando con unas funciones para ver cómo se comportaba y me topé con algo que me dejó un poco confundido.

¿Por qué funciona de esta manera el poner "await" a la function find?

Aquí les dejo el código de prueba y los logs para que se entienda lo que digo.

!async function() {
  let arrayNumbers = [1, 2, 3, 4, 5];
  let numbersToFind = [7, 4, 5];
  let result =  arrayNumbers.filter(async e => {
    console.log('inside filter')
    let found = await numbersToFind.find( a => {
      return a === e; 
    });
    console.log('down found');
    if(found) {
      console.log(found);
      console.log('dentro de encontrado')
      return e;
    }
  });
  console.log('outside functions');
  console.log(result);
}();

those are the logs

3
  • 2
    Hey, you are at Stack Overflow en español. Please translate your question to spanish, otherwise it will be closed. Bienvenido a Stack Overflow en español. Por favor traduce tu pregunta al castellano o terminará cerrada. Aprovecho de invitarte a leer Cómo preguntar y realizar el recorrido de bienvenida. Saludos Commented el 20 ago. 2020 a las 8:45
  • Hola debes mejorar tu pregunta: la verdad veo que la funcion se ejecuta puedes indicar que es lo que esperas como resultado ???
    – user46896
    Commented el 20 ago. 2020 a las 17:23
  • Una disculpa por que no la deje muy clara, mi duda es por el comportamiento que tiene la funcion al agregar el "await" a una function como el find(), veo que ejecuta todas las iteraciones del metodo, pero luego continua el flujo y comienzan a aparecer los logs fuera de las funciones, como si se comportara de forma asyncronica.
    – Sebastian
    Commented el 20 ago. 2020 a las 17:29

1 respuesta 1

4

No tengo muy claro qué es lo que te extraña del comportamiento, así que vamos a analizarlo paso a paso:

1 !async function() {

Declaras una función anónima que devolverá una promesa

2     let arrayNumbers = [1, 2, 3, 4, 5];
3     let numbersToFind = [7, 4, 5];

Vale, tenemos dos arrays normales con números...

4     let result =  arrayNumbers.filter(async e => {

Uh-oh, primera cosa rara: el método filter permite filtrar los elementos de un array. Para hacerlo usa la función que le pasas como parámetro y la llama para cada elemento del array. Si la función devuelve verdadero, se queda con el elemento y si no lo descarta. ¿Por qué he puesto verdadero en cursiva? Bueno, porque para Javascript cualquier valor que no sea null, undefined, false, 0 o una cadena vacía ('') se puede interpretar como verdadero:

console.log("un objeto es verdadero?", !!{});

Al declararse la función que filtra como asíncrona, está devolviendo un objeto de la clase Promise, por lo tanto siempre será procesado como verdadero... es decir, que no estamos filtrando nada, como veremos más adelante.

5         console.log('inside filter')

En cada iteración del filtro, escribimos un texto, nada especial aquí... pero es bueno resaltar que claramente se ve que las promesas se intentan cumplir inmediatamente y en este caso se consigue porque no hay que esperar nada.

6         let found = await numbersToFind.find( a => {
7             return a === e; 
8         });

Aquí usar await no aporta nada, es una función no asíncrona, pero provoca que la resolución se quede "en espera", provocando que se muestren otros logs antes.

let asyncFn = async () => {
  let array= [1,2,3,4];
  let found = await array.find(e=> e===3);
  console.log('1',found);
};

let asyncFn2 = async () => {
  let array= [1,2,3,4];
  let found = array.find(e=> e===3);
  console.log('2',found);
};

asyncFn()
asyncFn2()

9         console.log('down found');
10        if(found) {
11            console.log(found);
12            console.log('dentro de encontrado')
13            return e;
14        }
15    });
16    console.log('outside functions');
17    console.log(result);
18}();

El resto de código no tiene nada de especial, muestra los datos que se esperaban.

Ahora imaginemos que tenemos que filtrar valores de un array y el resultado depende de una llamada AJAX, por ejemplo. ¿Cómo podríamos hacerlo? Pues en dos pasos:

async function esPar(n) {
  return n%2 ===0;
}
//Simplemente probamos que funciona
esPar(3).then(resultado => {
  console.log('El número 3 es par?', resultado);
});

let array = [1,2,3,4];

//guardamos el resultado de aplicar la función esPar a cada elemento
let resultadosP = array.map(esPar);
console.log('Promesas!', resultadosP.toString());

Promise.all(resultadosP).then(resultados => {
//Nos quedamos con los elementos donde esPar devolvió "true"
  let filtrados = array.filter((elem,indice) => {
     return resultados[indice];
  });
  
  console.log(filtrados);
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.