Undefined Variable/Value

Question

what am I missing here?

I am creating a simple map app and intend to use the lat/lon coords for some ajax/php calls to a couple of api's.

I cant seem access the value of an array (which I will then later use in the ajax call). I've had similar problem before and resorted to taking the values from the HTML element, which makes no sense.

window.addEventListener('load', () => {

  let latlon = []

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      document.getElementById("information").innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;
    latlon.push(lat, long)
    document.getElementById("information").innerHTML = `lat: ${lat}, long: ${long}`
  }

  getLocation()

  console.log(latlon[0]) // returns undefined
  console.log(latlon) // returns array with the 2 coords

  //code continues......

in short my question is why does the first console log return undefined and how would I extract the value as string to allow me to insert in to the ajax call.

thanks in advance