javascript / returnの使い方が知りたい

経験

プログラミング：VB.NETの基礎程度
javascript：コピペで試すことができる程度(Node.js,jQueryで少々)

やりたいこと

関数から戻り値を得て加工したい
(なぜ関数内のconsole.logで出力されるのが後なのかも知りたいです)

現状のコード

結果
[1]　undefined
[2]　Object { barcode_id: "11111", answer_id: "1090" }

javascript
1      var output = selectMaster("11111");
2      console.log(output); //[1]の行
3
4      function selectMaster(barcode_id) {
5        let bcd = barcode_id;
6        // Dexie.js を使ってIndexedDB に格納したものを取得
7        db.mt_conference_entry
8          .get({ barcode_id: bcd })
9          .then((val) => {
10            console.log(val);　//[2]の行
11            return val;
12          })
13          .catch(() => {
14            return false;
15          });
16      }

gentaro

2020/05/31 08:18

> javascript：基本の理解なし(触ったことがある程度) それだと回答がついても理解することすら困難だと思うんで、ちゃんと基礎から勉強してください。

yoh0811

2020/05/31 08:29

ご指摘痛み入ります。きっかけさえあれば読み解くことができるかと思い質問させていただきました。変更します。

行動規範の内容に同意します

回答3件

質問のソースではjavascriptの"promise"という非同期処理を従前よりも簡潔に記述できる仕組みを使っています。
promiseの説明はここで行うには非常に大変で難しい内容なので自己学習していただくしかないのですが、非同期処理の基本的な概念を熟知していないとのっけからつまずくことになると思います。
VB.NETが得意ならまず.NETの非同期処理を学習し（BackgroundWorkerやTask）"promise入門"的な記事をいくつか読み、簡単なコードをひたすら書いていくのが理解の近道かと思います。

で、起こっていることを簡単に書くと、selectMasterはdbに問い合わせをした結果を返す...わけではなく、dbに問い合わせした際のpromiseを返してきます。
また、db問い合わせの完了を待たず、呼び出し元では処理を続行することになります。
db問い合わせはさすがに若干時間がかかるので、selectMasterの後続のconsole.logが先に実行されるわけです。
db問い合わせが完了したら、db処理はresolveを実行し、非同期処理の完了をpromiseに通知します。
そうすると、非同期処理前に返してきたpromiseの.thenメソッドの中身が実行されます。

今回やりたいことをきちんと書き直すとこんな感じになるかと思います。

javascript
1      selectMaster("11111")
2        .then((val) => {
3          //.thenの処理は、db問い合わせの完了後に動き出します。
4          //valの中にDBへ問い合わせた結果が入っている
5          console.log("非同期処理の完了後に実行されます。");
6        })
7        .catch(() => {
8          //問い合わせに失敗した際の処理
9        });
10      console.log("非同期処理の問い合わせを行い、こちらは先に終了します。")
11
12      function selectMaster(barcode_id) {
13        let bcd = barcode_id;
14        // Dexie.js を使ってIndexedDB に格納したものを取得
15        return db.mt_conference_entry
16          .get({ barcode_id: bcd })
17      }

投稿2020/05/31 10:13

編集2020/05/31 13:55

hope_mucci

総合スコア4447

AkitoshiManabe

2020/05/31 11:13

selectMaster() 内、 return を書き忘れています（Promiseの返却）。

hope_mucci

2020/05/31 13:57

ご指摘ありがとうございます。修正しました。

yoh0811

2020/05/31 23:30

関数呼び出しするときに.then句でも可能なのですね。大変勉強になります。同期処理に対応していない記述もこれで回答待ちできるようになるということなのかな・・・？なんか楽しくなってきました！(もすこし勉強して試してみます) 実装部分をシンプルにしたい、という差でAkitoshiManabeさまの回答をベストアンサーにさせていただきますが、とても参考になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

JavaScriptの return の使い方は、普通に関数の返り値を明示して関数処理を終える時に使います。
むしろ、JavaScript特有の処理の流れを理解すべしという学習課題を「きっかけ」として回答いたします。

非同期処理
コールバック関数
Promise によるフロー制御
async / await

この４つを MDN を加えて検索してみてください。

なぜ関数内のconsole.logで出力されるのが後なのか

kei344 さん、hope_mucci さんの両氏も回答されていますが、

非同期処理　のためです。
ご質問のコードでは db.mt_conference_entry()（Promise）の結果を待たずに
selectMaster()関数を抜けていますので、[1]の行は undefined になります。

async / await の構文を使うなら以下のようになりそうです。

javascript
1var output = selectMaster("11111");
2console.log(output); //[1]の行
3
4// await を使いたいので async 関数を宣言
5async function selectMaster(barcode_id) {
6  let bcd = barcode_id;
7
8  // Promise の結果を await で待つ。
9  // then() / cathc() のコールバック関数内で return された値を取得
10  let dbResult = await db.mt_conference_entry
11    .get({ barcode_id: bcd })
12    .then((val) => {
13      console.log(val);　//[2]の行
14      return val;
15    })
16    .catch(() => {
17      return false;
18    });
19  return dbResult;
20  // let dbResult = await の代わりに　return await してもOK
21  // (本回答は、関数内の上から順に処理を追えるようにdbResultを宣言）
22}

投稿2020/05/31 11:10

AkitoshiManabe

総合スコア5432

yoh0811

2020/05/31 23:37

async/await の解説が理解できずに悶々としていたのですが、関数をasyncで、.dbの戻り値をawaitで、それ指定することで同期待ちになるんですね。関数内の.thenで値が取れたので同期処理できていないとは気づいていませんでした。関数の処理内だけで同期待ちさせたかったので、イメージしていたのはまさにこれでした！大変勉強になりました。ありがとうございました。

行動規範の内容に同意します