fetchメソッド内で他のメソッドを呼ぶと、 Chromeでは上手くいくのにSafariではうまくいかない問題

困ったこと

fetchメソッド内で、他のメソッドを呼ぶと、
Chromeでは上手くいくのにSafariではうまくいかない。

言葉でつらつら書くよりコードを見ていただいた方が早いので、コードで示します。

        const word_area     = document.getElementById("word_area");
        const btn_to_submit = document.getElementById("btn_to_submit");
        const def_list      = [];
        const url           = "hogehoge";

        btn_to_submit.addEventListener("click", () => {
          console.log(eng_word);
          fetch(url)
          .then(response => {
            return response.json();
          })
          .then(data => {
            // jsonファイルで取得した特定の値をdef_listという配列に詰めていく。
            data[0].shortdef.map(def => {
              def_list.push(def);
            })
            // addMeaning()というメソッド呼び出し
            addMeaning();
          })
          .catch(error => {
            console.log('error');
          });
        })

        function addMeaning() {
            // 本当はここでdef_listという配列をいろいろいじってます。
            console.log(def_list);
        }

上でも書いたように、これだとchromeではうまくいきますが、Safariではうまくいきません。
うまくいかないというのは、addMening()を呼び出すと、
catchメソッドが呼ばれてしまうのです。（＝fetchメソッド内でエラーが起きている）

詳しく見ていったところ、addMening()のdef_listをうまく参照できていない？？？

解決策

functionを使った関数ではなく、アロー関数にする！

        // ダメな例
        function addMeaning() {
            // 本当はここでdef_listという配列をいろいろいじってます。
            console.log(def_list);
        }

        // 良い例
        const addMeaning = () => {
            // 本当はここでdef_listという配列をいろいろいじってます。
            console.log(def_list);
        }

        // これでもいけました。
        const addMeaning = function(){
            // 本当はここでdef_listという配列をいろいろいじってます。
            console.log(def_list);
        }

まとめ

なんでかは分かりませんが、アロー関数を使うことでSafariでも動作するようになりました。
これ、どなたか理由が分かる方がいらっしゃいましたら、ご教授してくださると幸いです。

最後まで読んでくださり、ありがとうございました。
以上です。