As part of a portfolio project for a web dev course, I'm trying to grab the device lat and long coords for a leafletJS based map app for use in later API calls but I'm having a synchronicity issue with JQuery's document.ready function. In my script.js file I have:

1 const getCoordsFromDeviceLocation = () => {
2     window.navigator.geolocation.getCurrentPosition((pos) => {
3         ({latitude, longitude} = pos.coords);
4         console.log(latitude);
5         console.log(longitude);
6         return {latitude, longitude};
7     })
8 }

And then:

9  $(function () {
10     const coords = getCoordsFromDeviceLocation();
11     console.log(coords);
12 })

The log is returning, in order:

11 - undefined

4 - (correct lat coord)

5 - (correct long coord)

I know it has something to do with synchronicity with line 11 returning first but I'm unsure about how to grab the coords within the doc.ready function. Can anyone point me in the right direction?