array.length es cero, pero la matriz tiene elementos en ella

Actualmente estoy en el proceso practicando el uso de electrones, pero soy bastante nuevo con javascript y me he topado con un problema que me tiene completamente desconcertado. Tengo el siguiente código:

function getPaths() { var dirPath = document.getElementById("mdir").innerHTML; var filePaths = []; fs.readdir(dirPath, function(err, dir) { for(var i = 0, l = dir.length; i < l; i++) { var filePath = dir[i]; filePaths.push(dirPath + "/" + filePath); } }); console.log(filePaths); console.log(filePaths.length); } 

Que se supone que debe buscar en un directorio definido por dirPath , luego recorre y obtiene la ruta completa de todos los archivos en ese directorio. Los agrega a una matriz y luego, en la parte inferior, registra la matriz en la consola, seguida por la longitud de la matriz. Lo que me desconcierta es que, dado ese código, la matriz se registra en la consola como se esperaba, pero luego la consola registra cero como la longitud. Mi opinión actual es que tiene algo que ver con el scope, pero eso no tiene sentido porque estoy declarando la matriz, filePaths en la función que está por encima de la que se está ejecutando. A menos que me haya perdido algo. ¿Alguien podría señalar lo que estoy haciendo mal?

readdir es asincrónico. No obtendrá el resultado de inmediato. Debe registrar los filePaths dentro de la callback. La única razón por la que la consola muestra el valor es porque la consola evalúa la matriz cuando la despliega.

Cuando presione la pequeña flecha a la izquierda, coloque el mouse en la casilla i de la derecha. Lo que ocurre es que la consola guarda una referencia a la matriz, de modo que cuando el usuario despliega la matriz, muestra cuál es su valor actual. Pero cuando registras filePaths.length la matriz está vacía porque readdir no terminó de leer, pero es por eso que obtienes 0. Pero cuando abras la consola y presionas esa flecha, readdir ya habrá terminado de leer y la consola imprimirá el valor actual de la matriz (después de que se haya completado).

enter image description here

Ejemplo para demostrar el problema: (no es una solución, es solo para entender lo que realmente está sucediendo)

Pruebe y ejecute este código y vea lo que sucede:

 var arr = []; setTimeout(function() { arr.push(1, 2, 3); }, 5000); console.log(arr.length); console.log(arr); 

Aquí la matriz y su longitud se registran antes de que se llene la matriz. La matriz se llenará después de 5 segundos. Entonces la salida será 0 y una array[] cadenas array[] . Ahora, debido a que las matrices pueden tener toneladas de datos, la consola no mostrará esos datos hasta que el usuario despliegue la matriz. Entonces, lo que hace la consola es mantener una referencia a la matriz hasta que el usuario presione desplegar la flecha. Si despliega la matriz antes de 5 segundos, verá que la matriz está vacía (aún no está llena). Si esperas hasta que pasen los 5 segundos, despliégalo, entonces verás que está lleno.

Nota: Además, la línea que se registra en la consola (algo así como > Array(0) ) es solo una representación de cadena del objeto / matriz en el momento en que ocurre el registro. No se actualizará si el objeto / matriz cambia. Entonces eso también puede parecer confuso a veces.

Espero que esté claro ahora.

Solo para ampliar la respuesta de @ ibrahim-mahrir, quieren decir esto

 function getPaths() { var dirPath = document.getElementById("mdir").innerHTML; var filePaths = []; fs.readdir(dirPath, function(err, dir) { for (var i = 0, l = dir.length; i < l; i++) { var filePath = dir[i]; filePaths.push(dirPath + "/" + filePath); } console.log(filePaths); console.log(filePaths.length); }); }