Difference between for loop

Question

I recently notice that when I make async call in forEach loop like this:

fs.readdir(directory, function (err, filenames) {
    if (err) throw err;
    filenames.forEach(async function (filename) {
        let promise = await query.getItemByName(filename);
    });
});

it doesn't wait until the promise get resolved but if I do:

fs.readdir(directory, async function (err, filenames) {
    if (err) throw err;
    for (filename of filenames) {
        let promise = await query.getItemByName(filename);
    });
});

it wait for the promise to get resolved, I mean it fire the async calls one after another.

Can someone explain me why ?

What is the difference between items.forEach(function (item){}); and for(item of items) ?