JavaScript

【JavaScript】while文・do~while文の書き方・違いについて徹底解説

本記事では、JavaScriptの繰り返し処理で使われるwhile文・do~while文の書き方と違いについて解説しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

while文・do~while文の書き方・使い方

while文とdo~while文の基本的な書き方は以下のとおりです。

while(条件式){
    // 条件式がtrue時に実行させたい処理を記述
}
do{
    // 条件式がtrue時に実行させたい処理を記述
}while(条件式);
コードの解説
  • 条件式:ループ処理の条件

while文・do~while文は、条件式がtrue(真)である場合にのみブロック内の処理が実行されます。

先輩くん

while文・do~while文を使ったサンプルコードを用意したので、動作確認してみましょう!

let i = 0;

while (i < 3) {
  console.log(`${i + 1}回目の実行`);
  i++;
}

// => 1回目の実行
// => 2回目の実行
// => 3回目の実行
let i = 0;

do {
  console.log(`${i + 1}回目の実行`);
  i++;
} while (i < 3);

// => 1回目の実行
// => 2回目の実行
// => 3回目の実行

Live Serverなどの自動更新される拡張機能を使用している場合は、プログラムが完成する前に更新がされてしまい無限ループでブラウザがフリーズしてしまうことがあるので、注意してください。

while文・do~while文の違い

while文・do~while文の違いについて見ていきましょう。

先ほど紹介したサンプルコードでは、どちらも同じ結果になりました。基本的にはwhile文とdo~while文は同じ挙動をしますが、下記のような場合は異なる挙動をとります。

let i = 3;

while(i < 3) {
  console.log("処理が実行されました");
  i++;
};
let i = 3;

do {
  console.log("処理が実行されました");
  i++;
} while (i < 3);

// => 処理が実行されました

while文ではブロック内の処理が実行されないのに対して、do~while文ではブロック内の処理が実行されます。

このような結果になる理由は、while文はループ処理が始まる前に条件式を判定します。そのため、while文では条件式を満たしていないと判定され一度も処理が実行されません。

しかし、do~while文では一度ループ処理を行った後に条件式を判定します。そのため、do~while文ではブロック内の処理が一度実行されます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村