using for-loop

    let arr=[]
    for (let mkt of markets) {
      const resA = await someAsyncFuncA(context, mkt[0].serumMarket);
      const resB = await someAsyncFuncB(resA);
      console.log(resB) 
      arr.push(resB)
    }
    console.log(arr) // it will log after the for-loop complete 

But when I am using map().

    let arr = [];
     markets.map(async (mkt) => {
      const resA = await someAsyncFuncA(context, mkt[0].serumMarket);
      const resB = await someAsyncFuncB(resA);
      console.log(resB) // it will log after console.log(arr) below
      arr.push(resB)
    });
    console.log(arr) // it will log first: []

I want to understand more for these 2 kinds of loop, such as the performance.
It seems map() always executes faster than for-loop, should I always use map()?
When should I use for-loop?