Can't change a variable inside onSnapshot method

Question

So my intention is to fetch the data from Firestore with an onSnapshot method (as it automatically updates when a change occurs) and then write it inside a variable. I tried it with this:

let cityLocations;

onSnapshot(cityRef, (doc) => {
    cityLocations = doc.data().allCityLocations;
    console.log(cityLocations);
});
console.log(cityLocations);

(For debugging I had two console logs, inside and outside the arrow function)

But what ended up happening was, only the console.log() inside the arrow function wrote out the needed data. The other console.log put out the still undefined value. It also logged out the undefined value first.

Here is what the console wrote out:

undefined           app.js:63 
['3_3']             app.js:61

Line 61 being the first console.log and line 63 the second.

I tried to make a var inside the arrow function, but it didn't work either. In VSCode it said Local Var, which is really strange to me since var is supposed to bypass scope. I'll be grateful for any suggestions.