Ajax通信から取得したデータを扱うときの注意点

Ajax通信は成功しているのにデータを操作できない。。

Ajax通信で取得したデータをconsole.logしようとすると、
データは格納されているのに長さゼロの配列が表示されたりする。

例えば、こんなコード、

function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), mapInitConfig);

        const url = {Ajax通信を行うurl};

        let datas;

        jQuery(function ($){
            $.ajax({
                type: 'POST',
                dataType: 'json',
                crossDomain: true,
                url: url,
                data: {
                    action : 'get_full_data'
                },
                success: function(responseList){
                    datas = responseList.map((response) => {
                      return {
                          city: response[0],
                          lat: parseFloat(response[1]),
                          lng: parseFloat(response[2])
                      };
                    });
                }
            });
        });

　　　　　console.log(datas);

        let markers = datas.map((data) => {
            return new google.maps.Marker({
                position: {
                    lat: data.lat,
                    lng: data.lng
                },
                map
            });
        });
    }

この例はGoogle Map APIのMapにAjax通信で取得したデータを用いてマーカーを表示しようといています。
Ajax通信で先にデータを取得しておいてdatasに格納。それを用いてマーカーを追加。
としたくなりますが、これだと以下の理由から上手くいきません。

Ajax通信は非同期通信

小見出しにもある通り、非同期通信なので先に他のコードが実行されてしまう。
（そのコードがAjax通信によるデータを必要としていても！！）

解決方法

今回は簡易的な解決方法としてajax関数のsuccessの中にマーカーを追加するコードを加えました。 本当はasync awaitを使ったりするといいんだと思います。

こんなコードになりました。

function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), mapInitConfig);

        const url = {Ajax通信を行うurl};

        jQuery(function ($){
            $.ajax({
                type: 'POST',
                dataType: 'json',
                crossDomain: true,
                url: url,
                data: {
                    action : 'get_full_data'
                },
                success: function(responseList){
                    let datas = responseList.map((response) => {
                      return {
                          city: response[0],
                          lat: parseFloat(response[1]),
                          lng: parseFloat(response[2])
                      };
                    });
　　　　　　　　　　　　let markers = datas.map((data) => {
            　　　　　　　return new google.maps.Marker({
                　　　　　　　position: {
                    　　　　　　　lat: data.lat,
                    　　　　　　　lng: data.lng
                　　　　　　　},
                　　　　　　　map
            　　　　　　　});
        　　　　　　　});
                }
            });
        });
    }