JavaScript スコープについて

Question

前提・実現したいこと

関数内で取得した値をグローバルの変数に格納したい。
apiで取得した情報をグローバル変数に格納したいのですがどうもundifinedが出てしまいます。
何か教えていただけると幸いです。
以下が組み込んでいるアプリになります。
Box ContentsPicker

発生している問題・エラーメッセージ

undefined

該当のソースコード

 let contentId;
 #sdkのAPI
 folderPicker.addListener('choose', 　
    function picker(items){
       items.map(function(item) {
       console.log(item.id); #グローバル変数に格納したい値(hoge)
       contentId = item.id;
       console.log(contentId); #出力結果：hoge
       return item.id;
       })
    }
 );

console.log(contentId); #出力結果：undefined

試したこと

戻り値に設定しているので以下のような記法を試しましたがcontentId(変数)に格納することが出来ませんでした。

  const sample = function picker(); #省略

補足情報

JavaScript初心者なので色々と教えていただけると嬉しいです。

Answer 1

このコードの流れ的には

1. contentIdの宣言
2. picker()をイベントリスナとして登録
3. contentIdをコンソール出力

となっており、picker()が実行されるタイミングが含まれていませんから、
コンソール出力した時点ではcontentIdには何も代入されていない状態となります。

ちなみにaddEventListner()はイベントにフックする関数を登録するものであり、
const sample = function picker()もまた関数を変数に代入しているだけで、
いずれも関数が即時実行されるものではありません。

ですから、このコードの場合は
なんらかの方法でfolderPickerに対してchooseイベントが発火された後に通過する地点に
console.log(contentId)を仕掛ける必要があります。

Comments

[OkukawaRyoki]

ご回答ありがとうございます。addEventListenerが発火する前にconsole.logが処理されているためundifinedなだけであって、contentIdにはchooseイベントが発生した後、グローバルで使える値が入っているというもとでしょうか？

[surface_0]

はい、概ねその認識で正しいと思います。
（正確にはaddEventListenerが発火するというより、chooseイベントが発火するですが）