Javascriptの配列をグローバル変数にpushできない

Question

履修登録システムを作る課題をしております。
mongooseにある生徒情報をfind()を使って全て取り出しpushでグローバル変数に入れたいのですが、
実行後、そのグローバル変数の中身が[]と表示されます。
ローカル変数にpushした場合は上手くいくのですが、なぜグローバル変数にはpushされないのかがわからないため、
こちらで質問させていただきました。

var data = [];
Students.find()
.exec()
.then((students)=>{
   for(const student of students){
      data.push({
        number: student.number,
        firstName: student.firstName,
        lastName: student.lastName,
        id: student._id
      })
   }
})

console.log(data); // []

説明不足や至らない点があるかと思いますが、ご教示いただけると幸いです。

追記
forループの直前にconsol.log(students)を置くと、中身がきちんと表示されているので、この時点でデータは取り出しができているのがわかります。それと以下のようにグローバル関数ではなくローカル関数にして置き換えてみるときちんとデータがpushされます。

Students.find()
.exec()
.then((students)=>{
　 var data = [];
   for(const student of students){
      data.push({
        number: student.number,
        firstName: student.firstName,
        lastName: student.lastName,
        id: student._id
      })
   }
   console.log(data); // データが表示される
})

Answer 1

Students.find().exec().then(() => {...})となっているところは非同期な処理ですね。
thenの中に書いている処理（関数）はすぐに実行されるのではなく、exec()の処理が正常に完了した時、
つまりMongooseからの結果を受け取った時に実行されます。

よって、console.log(data)が実行されるタイミングではまだ何も入っていない空の配列となります。
下記のように、実際にどんな処理順で実行されているか確認してみるとわかりやすいかもしれません。

var data = [];
console.log('log1')
Students.find()
.exec()
.then((students)=>{
   console.log('log2')
   for(const student of students){
      data.push({
        number: student.number,
        firstName: student.firstName,
        lastName: student.lastName,
        id: student._id
      })
   }
})
console.log('log3')

console.log(data); // []

thenの中の処理は後から（MongoDBからデータを取得したタイミング）で実行されるので、
上記のconsole.logで出力しているテキストが標準出力される順番は

log1
log3
[]
log2

となります。

非同期はJavascriptではかなり重要な機能なので是非勉強してみてください。
Javascript 非同期 しくみとかJavascript Promiseとかでググると
解説の記事がいっぱい出てくると思います。

（説明したいんですけど語彙力が低いので簡潔に説明できそうにないです・・・。)

Comments

[Mikamikachan]

ukyodaさん、お返事ありがとうございます。
javascriptを勉強するうえで非同期、同期の概念が重要なことがわかりました。
今回はasync awaitを使用しコードを書き直してみたところ、data内のデータをconsole.logで表示することがきました（この方法があっているのかは正直自信はありませんが。。。）

丁寧にわかりやすく回答していただきありがとうございました！

Answer 2

async awaitを使用しコードを書き直してみたところグローバル変数data内に生徒情報がpushされconsole.logで表示することができました。
どういうタイミングで処理を非同期、同期にする必要があるのか、まだ完全には理解できてはいないので、これから非同期、同期についてもう少し学ぼうと思います。

今回はありがとうございました！

var data = [];
console.log("log1");
async function getAllStudents(){
         await Students.find()
            .exec()
            .then((students)=>{
                console.log('log2');
                for(const student of students){
                  data.push({
                     number: student.number,
                     firstName: student.firstName,
                     lastName: student.lastName,
                     id: student._id
                  })
                }
            })
}

getAllStudent()
.then(result=>{
   console.log("log3");
   console.log(data);
})
.catch((err)=>{
   console.log(err);
})

///log1
///log2
///log3
///生徒情報