（解決済み）JavaScript Promise.then()でオブジェクトを操作できない

Question

前提

実現したいこと

ある配列の中のオブジェクトをマップで参照し、それぞれに新しいプロパティを追加したいのですが、map()直下ではオブジェクトを代入できたのに対し、promiseFoo().then()直下では代入できませんでした。promiseFoo().then()から戻り値を取り出すか、直下でオブジェクトを操作するにはどうすればよいでしょうか。

該当のソースコード

filteredResults.map((result: any) => {
  getIcon(result.link).then((value: any) => {
    console.log('URL: ' + value)
    result.icon = value
  })
}) 

Got an icon from https://stackoverflow.com/questions/68788222/filtering-an-axios-response | https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
URL: https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
Got an icon from https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6 | https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
URL: https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196

これだと全く代入されていませんが、ご覧の通りPromiseオブジェクトから値を取り出すことには成功しています。そして前述のようにmap()直下ならオブジェクトに普通に代入できます。

試したこと

filteredResults.map((result: any) => {
  result.icon = getIcon(result.link).then((value: any) => {
    console.log('URL: ' + value)
    return value
  })
})

これだとオブジェクトにはPromiseオブジェクトが代入されてしまいます。

補足情報（FW/ツールのバージョンなど）

{
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "@swc/core": "^1.3.4",
}

Comments

[maisumakun]

> これだと全く代入されていませんが

どうやって確認しましたか？

[poppy1115]

オブジェクトをJSONファイルに保存して確認しました

[maisumakun]

保存コードを実行するタイミングが悪かった、という可能性もあります。

[poppy1115]

```
filteredResults.map((result: any) => {
getIcon(result.link).then((value: any) => {
console.log('URL: ' + value)
return value
}).then((value: any) => (result.icon = value))
})
```
このコードでも解決しませんでした。

[maisumakun]

JSONへの保存コードはどこへどのように書いたのですか？

Answer 1

いろいろとダメな所があるので一つずつ追っていきましょう。

• Array.prototype.mapの役割・使い方が誤っている
• Promiseの中に一度入ると同期処理には帰ってこれない

ある配列の中のオブジェクトをマップで参照し、それぞれに新しいプロパティを追加したい

mapは数学用語の写像です。
Aの集合体一つ一つに対して、とある加工を施しA'の集合体を作り出すものです。

プログラミングでmapを扱う場合、
A'の集合体を作る時にAが勝手に変更されないようにしましょう。
質問文のプロパティを追加したいと代入演算子を使ってプロパティを書き換えていますが、
これはmapという意味ではやってはならない行為です。

加工するなら最初からforEachやfor...ofを使いましょう。

// このオブジェクトの配列があり、年齢を見ながら成年か否かというプロパティを追加したいとする
const users1 = [
  {name: "taro", age: 20},
  {name: "jiro", age: 17}
];

// ×: mapのこういう使い方はダメ
// 同僚は写像の結果を返り値として受け取る事を期待するので混乱の元になる
users1.map(user => user.isAdult = user.age >= 20);

// ○: 処理しかしていないのでforEachを使う
// users1変数を勝手に書き換える行為自体がお行儀が悪いのでこれもあまり良くない
users1.forEach(user => user.isAdult = user.age >= 20);

// ◎: オブジェクトの配列をmapで扱う場合、
// スプレッドプロパティでシャローコピーしながら新しくオブジェクトを生成するのがベストプラクティス
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer
const users2 = users1.map(user => ({...user, isAdult: user.age >= 20}));

値の加工の仕方関してはこれでOK

promiseFoo().then()直下では代入できませんでした。
promiseFoo().then()から戻り値を取り出すか、直下でオブジェクトを操作するにはどうすればよいでしょうか。

まずPromiseの機能とその限界から説明しましょう。

JavaScript名物の非同期処理のネストによる
「コールバック地獄」という単語を耳にした事はありますか？

Promiseはこのコールバック地獄という
非同期処理をネストさせる度に一生ソースコードのネストが深くなっていくというクソみたいな状況に対して、
オブジェクト指向プログラミングのテクニックでねじ伏せて解決する事を目的として作られました。

// 古の非同期処理
getIcon(url1, (err, icon1) => {
  getIcon(url2, (err, icon2) => {
    getIcon(url3, (err, icon3) => {
      const icons = [icon1, icon2, icon3];
      console.log(icons);
    })
  })
});

// [url1, url2, url3]にしてfor文で非同期処理を書けるようにして？
// いやーきついでしょ。

// Promise.thenを使うとコードのネストが1段階より先にいかない
Promise.resolve([])
  .then(icons => getIcons(url1).then(value => [...icons, value]))
  .then(icons => getIcons(url2).then(value => [...icons, value]))
  .then(icons => getIcons(url3).then(value => [...icons, value]))
  .then(icons => {
    console.log(icons);
  });

// Promiseの登場により可変回数の非同期処理も簡単に記述出来るようになった
let promise = Promise.resolve([]);
for (const url of [url1, url2, url3]) {
  promise = promise.then(icons =>
    getIcon(url).then(value => [...icons, value])
  );
}
promise.then(icons => {
  console.log(icons);
});

逆に言うとPromiseはこの.then(fn)メソッドを数珠つなぎにして
非同期処理を延々とぶら下げるしか機能がありません。

そもそもJavaScript(Node.js)はシングルスレッドなので
低速なHDD読み込みや、HTTP通信を待ってられないから、
非同期処理やイベントループ等の機能を作って扱う仕組みを設けているわけで、
一度非同期処理に入ってしまうと元の流れに戻る事は出来ません。

つまり、質問文の「promiseFoo().then()から戻り値を取り出す」事は不可能です。
JavaScript(Node.js)プログラマの要望は微塵も満たせてないですね。

---

さて、上記を元に質問文を実現するためのコードを書いていきましょう。
まずはPromiseだけでやる場合のコードを示します。

質問文ではPromiseの配列を作った所で困ってますが、
Promise.allという要望そのものの機能が存在します。
なのでPromiseの配列をPromise.all(promises).then(fn)でオブジェクトの配列に変換してから.thenメソッドで中身を確認しにいく流れとなります。

const main1 = () => {
  // 一度Promiseの配列を作る
  const promises = filteredResults.map(({link, icon}) =>
    getIcon(link).then(value => ({...value, icon}))
  );
  // Promise.allでそれぞれのPromiseから値を取り出す
  // 一度Promiseという非同期処理の中に入ったら、同期処理には戻れないので`.then`メソッドを叩いて中で確認する事になる
  Promise.all(promises).then(icons => {
    console.log(icons);
  });
}

// 上記を清書するとこういうコードになる
const main2 = () => {
  Promise.all(
    filteredResults.map(({link, icon}) =>
      getIcon(link).then(value => ({...value, icon}))
    )
  ).then(icons => {
    console.log(icons);
  });
}

これはPromiseを熟知していないと書けませんし、
それなりの中級者・上級者でも一生これを読み書きしろと言われれば顔をしかめます。

JavaScript(Node.js)のエンジニアが楽をするためには
結局の所Promiseの値を同期処理で記述する所までひきずり下ろすしかありません。
しかし、Promiseは非同期処理なので同期処理には帰ってこれない。

そこで、async/awaitという糖衣構文がES2017で実装されました。
awaitというワードを使うとPromise.then(fn)を自動実行して、
fnの第一引数を手前に引っ張り上げてくるようなコードに変換されます。

// async関数を定義してawait構文を有効にする
const main3 = async () => {
  const icons = await Promise.all(
    filteredResults.map(async ({link, icon}) =>
      const value = await getIcon(link);
      return {...value, icon};
    )
  );
  console.log(icons);
};

これはmain2と全く同じ挙動をするコードです。
async関数を実行すると、内部ではPromiseを使いまくる事になるので100%Promiseのインスタンスを返します。

await構文を使ってpromise.then(fn)の第一引数を手前に引っ張り出してくる事の威力が垣間見えますね。
thenのネストがコードから消えるだけでここまで読みやすくなります。

そして、async/await構文は普通のfor文をサポートします。
なのでmapをかませるよりはfor文使った方が簡素なコードになる事が多いですね。

mapを使えば一度に全てに要素に対して処理を実行しますが、通信先に負荷を掛けてしまう。
for文で毎回完了まで待つようにすれば通信先には負荷を掛けないが遅くなる。
この違いはありますが、読みやすさは段違いです。

// もうこれでよくね？
const main4 = async () => {
  const icons = [];
  for (const {link, icon} of filteredResults) {
    const value = await getIcon(link);
    icons.push({...value, icon});
  }
  console.log(icons);
};

Comments

[poppy1115]

調べた中で一番わかりやすい解説でした。Googleでも上位に来るレベルですね！
解決したコードを載せましたので、ぜひご参照ください。
forを使ったやり方は簡単そうでしたが、finalResultsにチェーンさせるのが一番簡単そうでしたのでmapを採用しました。またgetIcon()の戻り値はstringでしたので、説明不足を痛感しました。
ご解説ありがとうございました。

Answer 2

解決したコード

const finalResults = () => {
  return filteredResults.map(async (result: any) => {
    const value = await getIcon(result.link)
    console.log('URL: ' + value)
    return { ...result, icon: value }
  })
}

filteredResutlsにチェーンさせて、もっとシンプルにしました。

const filteredResults = response.data.items
  .map((item: object) =>
    Object.fromEntries(
      Object.entries(item).filter(key =>
        requiredFields.some(field => key.includes(field))
      )
    )
  )
  .map(async (result: any) => {
    const value = await getIcon(result.link)
    console.log('URL: ' + value)
    return { ...result, icon: value }
  })

---

自分が持っていた問題をまとめてみました。

• async/awaitでPromiseオブジェクトの値を取り出せないと思っていた
• filteredResutls配列内のオブジェクトをマップで取り出すとき、Spread構文にしていなかった
• returnの理解が甘かった。特にアロー関数のせいでreturnを忘れがちだった

超簡単な別解

ただGoogleのSecret APIを使うだけで要件は満たせました。くだらないスクレイピングの実装で数日失ってしまいましたが、とても勉強になりました。async/awaitが分かると言えるようになったと思います。

`https://www.google.com/s2/favicons?domain=${domain}&sz=${size}`

const finalResults = () => {
  return filteredResults.map(async (result: any) => {
    const iconUrl = `https://www.google.com/s2/favicons?domain=${result.domain}&sz=${256}`
    console.log('URL: ' + iconUrl)
    if (iconUrl === undefined) return { ...result, icon: '' }
    return { ...result, icon: iconUrl }
  })
}

Comments

[shiracamus]

filteredResults は Promise の配列になりますが、意図した結果でしょうか？
> console.log(filteredResults)
[ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]

[poppy1115]

Axiosを使っているので、Promiseオブジェクトの一種ですね。意図していませんでしたが、最終的にstringにできています。
本来filteredResultsはAxiosResponse<any, any>という型となります。ですが、
if (filteredResults.length < perpage) break
といった感じで長さを求めているので、any型になっているみたいです。

responses.push(filteredResults)
const results = await Promise.all(responses.flat()) // flat() combines multi-dimensional array elements
const bookmarks: string = JSON.stringify(results, null, 2)

filteredResultsを格納するresponses配列の型はAxiosResponse<any, any>[]です。
bookmarksで初めてstring型になります。

Answer 3

Promise.then()やPromise.catch()の戻り値はPromiseです。
Promiseから値を取り出すにはawaitしないといけません。
awaitするにはasync関数でなければいけません。

filteredResults.map(async (result: any) => {
  result.icon = await getIcon(result.link).then((value: any) => {
    console.log('URL: ' + value)
    return value
  })
})

async関数にするならthenを使う必要はありません。

filteredResults.map(async (result: any) => {
  const value: any = await getIcon(result.link);
  console.log('URL: ' + value);
  result.icon = value;
})

当然のことながら、mapした結果はPromiseの配列になるので、必要ならPromise.allで処理するなどしてください。
Promise.allもまたPromiseを返しますけどね。

Answer 4

（コメントのつもりが回答になっていたので削除）