array.length is zero, but the array has elements in it [duplicate]

by

readdir is asynchronous. It won’t get the results right away. You should use the filePaths inside the callback. The only reason why the console shows the value is because the console evaluates the array when you unfold it.

When you press the little arrow on the left, put the mouse on the i box on the right. What happens is that the console keeps a reference to the array, so when the user unfolds the array it then shows the current value of the array. But when you log filePaths.length the array is empty because readdir didn’t finish reading yet, that’s why you get 0. But by the time you open the console and press that arrow, readdir will have already done reading and the console will print the current value of the array (after it’s been filled).

enter image description here

Example to demonstrate the problem: (not a solution, it’s just to understand what is really happening)

Open the browser console and try this code and see what happens:

var arr = [];

setTimeout(function() {
  arr.push(1, 2, 3);
}, 5000);

console.log(arr.length);

console.log(arr);

Here the array and it’s length are both logged before the array is filled. The array will be filled after 5 seconds. So the output will be 0 and a string representation of the array array[]. Now because arrays could have tons of data, the console won’t show that data until the user unfolds the array. So what the console does is keep a reference to the array until the user press the unfold arrow. If you unfold the array before 5 seconds you’ll see that the array is empty (not filled yet). If you wait until the 5 seconds pass then unfold it, then you’ll see that it’s filled, even though it was logged as an empty array.

Note: Also, the line that get logged to the console (something like > Array(0)) is just a string representation of the object/array at the moment the log happens. It won’t get updated if the object/array changes. So that also may seem confusing sometimes.

I hope it’s clear now.

More Related Contents:

  1. Array.prototype.fill() with object passes reference and not new instance
  2. JavaScript: Difference between .forEach() and .map()
  3. Why can I add named properties to an array as if it were an object?
  4. How to extend an existing JavaScript array with another array, without creating a new array
  5. Is the order of elements in a JSON list preserved?
  6. JavaScript: How to join / combine two arrays to concatenate into one array?
  7. Maximum size of an Array in Javascript
  8. Sum JavaScript object propertyA values with the same object propertyB in an array of objects
  9. Merge 2 arrays of objects
  10. Convert string with commas to array
  11. JavaScript, Node.js: is Array.forEach asynchronous?
  12. How do I sort an array of objects based on the ordering of another array?
  13. JavaScript – get array element fulfilling a condition
  14. Length of a JavaScript associative array
  15. What does this “(function(){});”, a function inside brackets, mean in javascript? [duplicate]
  16. Add a property to a JavaScript array
  17. Javascript recursive array flattening
  18. How to free up the memory in JavaScript
  19. Trying to capitalize the first character in array of strings, why this is not working?
  20. Removing undefined values from Array
  21. How to remove duplicates from a two-dimensional array? [closed]
  22. Javascript – sorting array by multiple criteria
  23. spread operator vs array.concat()
  24. How to get an Array with jQuery, multiple with the same name
  25. Sort a Javascript Array by frequency and then filter repeats
  26. How can I loop through enum values for display in radio buttons? [duplicate]
  27. Javascript array search and remove string?
  28. Using jQuery inArray with array of JavaScript Objects
  29. best way to generate empty 2D array
  30. Converting Array of Objects into Array of Arrays

Leave a Comment