ReferenceError when using async/await with API fetch function

Other Questions RapidAPI
1

I’m having difficulty with my JavaScript code that is intended to make API requests. Every time I attempt to run it, I encounter the following error:

Uncaught (in promise) ReferenceError: Cannot access 'fetchInfo' before initialization

Here is the code I’m working with:

const API_TOKEN = import.meta.env.VITE_API_TOKEN;
const WEATHER_ENDPOINT = "https://weather-api.p.rapidapi.com/current?format=json";
const API_HOST = "weather-api.p.rapidapi.com";

const fetchInfo = async(endpoint, hostname) => {
  const result = await fetch(endpoint, {
    method: "GET",
    headers: {
      accept: "application/json",
      "x-rapidapi-host": hostname,
      "x-rapidapi-key": API_TOKEN
    }
  })

  if (!result.ok) {
    throw new Error(`Request failed with status: ${result.status}`)
  }

  return await result.json();
}

const executeRequest = async() => {
  // FETCH WEATHER DATA
  const fetchInfo = await fetchInfo(WEATHER_ENDPOINT, API_HOST);
  console.log(fetchInfo);
}

executeRequest();

What is leading to this initialization error, and how can I resolve it?

2

classic mistake! you’re redeclaring fetchInfo inside executeRequest, which shadows the original function. js hoists the const declaration but can’t access it before initialization - that’s why you’re getting the error. just rename the variable and you’ll be good to go.

3

You’ve encountered a variable name collision in your executeRequest function. By declaring a variable with the same name as the outer fetchInfo function, you are shadowing it. When you write const fetchInfo = await fetchInfo(…), JavaScript recognizes the const fetchInfo declaration first, leading to that reference error since you’re using it before it’s initialized.

An easy fix is to rename the variable within executeRequest:

const executeRequest = async() => {
const weatherData = await fetchInfo(WEATHER_ENDPOINT, API_HOST);
console.log(weatherData);
}

I’ve faced this issue multiple times when refactoring. The combination of the temporal dead zone with const and variable shadowing often results in confusing error messages. To avoid this, steer clear of using the same name for variables and functions in overlapping scopes.

4

This happens because of variable shadowing and JavaScript’s temporal dead zone. You’re declaring a new fetchInfo variable with const inside executeRequest, but trying to call the outer fetchInfo function on the same line before the variable gets initialized. JavaScript sees the const declaration first and creates a binding for fetchInfo in that scope, which shadows the outer function. Since you can’t access const variables before they’re declared, you get the reference error. I hit this exact issue last month when I reused a function name as a variable. Easy fix - just use a different variable name: const executeRequest = async() => { const data = await fetchInfo(WEATHER_ENDPOINT, API_HOST); console.log(data); } This avoids the naming conflict and your code should work fine.