setTimeout and scope in javascript

Question

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

Brendan Bond · Accepted Answer · 2021-12-12 03:21:29Z

4

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);
  });
};

answered Dec 12, 2021 at 3:21

Brendan Bond

1,8901 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric Haynes · Accepted Answer · 2021-12-12 03:43:57Z

1

setTimeout uses a callback and has no native Promise version. While Brendan's answer is correct and perfectly functional, another option that is more consistent with async/await style is to await the timeout promise in the async function, then return the value.

export const fetchCars = async () => {
  await new Promise((r) => setTimeout(r, 1000);

  return cars;
};

If you're doing this a lot, a convenience function like this:

const delay = (delayTime) => new Promise((r) => setTimeout(r, delayTime));

Will then let you write your function like:

export const fetchCars = async () => {
  await delay(1000);

  return cars;
};

answered Dec 12, 2021 at 3:43

Eric Haynes

5,9322 gold badges35 silver badges44 bronze badges

1 Comment

Kaiido Over a year ago

"setTimeout[...] has no native Promise version.", it's coming.

Collectives™ on Stack Overflow

setTimeout and scope in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related