Promiseのコールバックの中で使われる変数はどこで定義されるのか

Question

Javascript初心者です。
google map apiを触りながら、Javascriptの勉強をしております。
こちらに記載されているgoogle map apiのサンプルコードについてわからないことがあります。
リンク内容
npmでパッケージをインストールして、モジュールを読み込む部分です。

下記ソースコードのうち、※の部分で突然googleというクラスが出てきますが、これは一体どこの誰がいつの間に定義したものなのでしょうか。
Promiseのコールバックには何も引数を与えていないため、怪しいとしたらimportしたパッケージかと思うのですが、importで読み込んだパッケージ内で、モジュールの枠を超えてグローバル変数等を定義することなどできるのでしょうか。（new Loader.googleなら理解できます。）

npm install @googlemaps/js-api-loader
import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});
loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {※
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

基礎的な質問だと存じますが、どうぞ宜しくお願い致します。

Comments

[m.ts10806]

ほぼそのまま「importしたモジュールに定義されている」ではなく？
正確には利用しているクラスはgoogle.maps.Map()ですが。

Answer 1

@googlemaps/js-api-loaderが読み込むのはGoogle Maps JavaScript APIですが、これはグローバルにgoogleを置いていきます。

Comments

[maisumakun]

> importで読み込んだパッケージ内で、モジュールの枠を超えてグローバル変数等を定義することなどできるのでしょうか。

importから呼び出されたコードが動的に<script>を生成して、その中で定義されます。「モジュールの枠を超え」た、ブラウザサイドの機能を使った処理です。

[ultimate_newbie]

ピンポイントなご回答、誠にありがとうございます。
勉強不足で大変恐縮なのですが、今回のような実装ですと、例えば自分が独自にgoogleという変数をグローバルで定義していたら競合してしまうということでしょうか。
モジュール分割の利点の一つに、スコープの形成(=グローバル汚染の防止)というのがあったかと思い、追加でお聞きした次第です。
宜しくお願い致します。

[maisumakun]

> 勉強不足で大変恐縮なのですが、今回のような実装ですと、例えば自分が独自にgoogleという変数をグローバルで定義していたら競合してしまうということでしょうか。

そのとおりです。

[ultimate_newbie]

ありがとうございました。
すっきり致しました。