未定义 object 属性，但有时在我刷新页面或稍后在代码中定义

Question

Hey there I have this piece of code that gets the users geolocation and stores that in a location property of a Data class, simple enough.

When I use the default constructor for this function I want it to call the function

_initLocation()

To define the _location property.

This is the code for the object:

  constructor(){
    this._initLocation();
    this._dataStore = new Map();
  }
  
  _initLocation(){
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords;
      this._location = new Array(latitude, longitude);

      }, () => alert('location not found'))
    }
  }

  get location(){
    return this._location;
  }

  get dataStore(){
    return this._dataStore;
  }

  icon = L.icon({
    iconUrl: 'icon.png',
    
    iconSize: [100, 100],
    iconAnchor: [50, 100],
    popupAnchor: [0, -100],
  });

}

When I use this same code outside of the Object, it works perfectly fine, but whenever I try to use console.log on the newly created object I get:

Object { icon: {…}, _dataStore: Map(0) }
​
_dataStore: Map(0)
​
icon: Object { options: {…}, _initHooksCalled: true }
​
<prototype>: Object { … }

So there is no location property on this object, but later on if I console.log the object that property will later exist. It also sometimes appears on refresh. It's ruining code later in the project because that location data is required but undefined. It's clear I need some delay or lag? I've tried DOMContentLoaded. But I'm also uncertain as to why the alert popup isn't showing if it can't get the current location?

Also frustratingly when I console.log the location value in the _initLocation() function I get the correct data, but if I console.log the _location property I get 'undefined'??

Any help would be greatly appreciated.

Edit, here is how I'm using that object:

I instantiate the object then I used it in an object named Renderer, by assigning it to _maptyData property. I then use that property in these functions:

  createMap(){
    this.map = L.map('map')
    .setView(this.maptyData.location, 13);

    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
      .addTo(this.map);
  }
  
  createMarker(atLocation = maptyData.location){
    if(atLocation === maptyData.location) {
      console.log(maptyData._location);
      this._locMarker = L.marker(atLocation, {icon: maptyData.icon})
      .addTo(this.map)
      .bindPopup('Your current location')
      .openPopup();
      console.log(this._locMarker);
    } else {
      this.currentMarker = L.marker(atLocation, {icon: maptyData.icon})
      .addTo(this.map)
      .bindPopup('Please enter event information!')
      .openPopup();
      return this.currentMarker;
    }

Answer 1

I resolved this problem, I'm new to javascript and later realised the problem is because the code needs to be async, I learnt about promises and implemented them to fix this.