setTimeout and scope in javascript

I’m playing around with setTimeout, and I’m not getting the results I’d expect. I have an array by the name of cars, and I have a function called fetchCars which simply calls setTimeout and returns the cars after 1000 ms. As far as I know the setTimeout should have access to the cars array because of closures, but for some reason when I an await an invocation of fetchCars I don’t get any results.

Here is a sandbox
Here is my code:

const cars = [
  { brand: "Toyota", model: "Camry", year: "2014" },
  { brand: "BMW", year: "2016", model: "M3" },
  { brand: "Porche", model: "911", year: "2018" }
];
export const fetchCars = async () => {
  setTimeout(() => {
    return cars;
  }, 1000);
};

const recieveCars = async () => {
  const cars = await fetchCars();
  console.log(cars);
};
recieveCars();


///Console Output:  undefined

>Solution :

The reason you’re seeing undefined in your console is that fetchCars returns a Promise (only by virtue that you have tagged it with async) that resolves to undefined – in other words, it doesn’t really return anything!

export const fetchCars = async () => {
  setTimeout(() => {
    // the callback you have passed to setTimeout will return cars, not the fetchCars function
    return cars;
  }, 1000);
};

If you want fetchCars to return a value, it needs to return a Promise that will resolve to the value you want to return.

// no need for async here, because we're going to be returning a Promise explicilty
export const fetchCars = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(cars);
    }, 1000);
  });
};