Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Title*

Body*

**EDIT: this appears to be a sync issue due to me not understanding promises correctly. I assumed that the ".then" waited for the promise to resolve. This is apparently not the case.**

I am encountering a strange error that I've never seen before.

I have this code which produces the following output in the Chrome console.  

Clearly it is an array and it has data and a length, but when I print the length property it is zero. (I also can't iterate over it with map)  

I'm really confused, any help would be much appreciated.
    
    const readFile = (file) => (
      new Promise((resolve) => {
        const fr = new FileReader();
        fr.onload = () => {
          resolve(fr.result);
        };
        fr.readAsText(file);
      })
    );

    const readFiles = (files) => {
      const readFiles = [];
      files.forEach((file) => (readFile(file)).then((data) => readFiles.push({name: file.name, data })));
      return readFiles;
    };

    const scenes = readFiles(...grabbed from file picker dialog...)
    console.log('scenes: ', ui.value.scenes);
    console.log('length: ', ui.value.scenes.length);


[![console][1]][1]
  [1]: https://i.sstatic.net/JPa8r.png

Collectives™ on Stack Overflow