おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

JavaScriptにおける制御構文の記述方法 - 『JavaScript本格入門』第2章

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

結構久しぶりになりましたがJavaScriptの勉強を進めます。

プログラミングでも重要な分岐(if)と循環(while・for)について記述方法を学びます。

switch、do…while、for…in、for…of、break、continue、try…catch…finally命令についても勉強しました。

※前回はこちら

www.okigaru-migaru.net

if命令

プログラミングの基本中の基本、分岐構造の代表格if命令です。

ここでは記述方法だけ触れておきます。

var x = 1;
If (x === 1) {
  console.log('xは1です。');
else
  console.log('xは1ではありません。');
}

VBAとは異なり、条件式ではx=1は使えません。JavaScriptでは=は代入演算子ゆえですね。等価演算子の==あるいは===を使いましょう。

switch命令

var rank = 'B';
if (rank === 'A') {
  console.log('Aランクです。');
} else if (rank === 'B') {
  console.log('Bランクです。');
} else if (rank === 'C') {
  console.log('Cランクです。');
} else {
  console. log('ランク外です。');
}

このように変数 === 値の形式で同じ条件式が並んで冗長に見えます。

こういったケースではswitch命令を利用すべきです。同値演算子による多岐分岐に特化した条件分岐命令です。

var rank = 'B'
switch(rank) {
  case 'A' :
    console.log('Aランクです。');
    break;
  case 'B' :
    console.log('Bランクです。');
    break;
  case 'C' :
    console.log('Cランクです。');
    break;
  default :
    console.log('ランク外です。');
    break;
}

変数rankを順番に判定して、条件に合えばbreakでブロックから抜け出します。

もしいずれの条件にも合わなければdefaultを返します。

ちなみにcaseは===で比較されますので注意です。

ループ:whileとfor命令

ループにはwhileとforの2種類があります。

while命令は条件式がtrueの間、ループを繰り返します。forは指定回数だけループを繰り返します。

var x = 8;
while(x < 10) {
  console.log('xの値は' + x);
  x++;
}

for命令の場合は、(初期化式; ループ継続条件式; 増減式)を入力します。

for (var x = 8; x < 10; x++) {
  console.log('xの値は' + x);
}

do…while命令(後置判定)

通常のwhile命令では条件式がtrueの場合に任意の処理を行いますが(前置判定)、do…while命令ならば任意の処理を行ってから条件式の判定を行います(後置判定)。

var x = 8;
do {
  console.log('xの値は' + x);
  x++;
} while(x < 10);

for…in命令

for…in命令は、連想配列(オブジェクト)の要素を順番に処理します。

var data = { apple:150, orange:100, banana:120 };
for (var key in data) {
  console.log(key + '=' * data[key];

for命令の括弧内にあるkeyは仮変数で、連想配列のキーを一時的に格納するための変数です。ここではapple、orange、bananaが順番に格納されます。

この仮変数を介して個々の要素にアクセスします。ループするたびにapple=150、orange=100、banana=120と返されます。

通常の配列でも利用することは可能ですが、予期せぬものまで列挙されてしまう可能性があります(function(){}など)

また、処理の順序も保証されませんし、仮変数にはインデックス番号が格納されるだけでコードがシンプルになりません。

そこで、配列の列挙ではfor命令かfor…of命令を利用すべきです。

for…of命令

for…of命令は配列をはじめとして、Arrayライクなオブジェクトやイテレーター/ジェネレーターなども処理できます。

とりあえずよくわかりませんが、これらを総称して列挙可能なオブジェクトと呼ぶそうです。

var data = [ 'apple', 'orange', 'banana' ] ;
Array.prototype.hoge = function() {}
for (var value of data) {
  console.log(vlaue);
}

for…in命令と同様に仮変数を設定してから、ofの後ろに列挙可能なオブジェクトを記述します。

ループを中断する:break命令

特定の条件を満たした場合にループを強制的に中断したい場合はbreak命令を使います。

var result = 0;
for (var i = 1; i <= 100; i++) {
  result += i;
  if (result > 1000) { break; }
}
console.log('合計値が1000を超えるのは' + i);

変数iを1〜100の間で加算していき、合計値(変数result)が1000を超えたところでループを脱出します。

break命令はifなど条件分岐命令と合わせて使用します。

ループをスキップする:continue命令

ループを中断してしまうのではなく、現在のループだけスキップして次のループを継続して実行したいという場合はcontinue命令を使用します。

var result = 0;
for (var i = 1; i < 100; i++) {
  if (i % 2 === 0) { continue; }
  result += i;
}
console.log('合計:' + result);

変数iが偶数(2で割り切れる)の場合にのみ処理をスキップし、奇数だけの合計値を求めます。

例外を処理する:try…catch…finally命令

変数を参照しようとしたら未定義だったり、数値を受け取ることを想定した関数に文字列が渡されるなど、想定しなしなかったエラーが発生しがちです。

エラーが起きるとスクリプト全体が停止してしまうのですが、それを防ぐのがtry…catch…finally命令です。

var i = 1;
try {
  i = i * j;
} catch(e) {
  console.log(e.message);
} finally {
  console.log('処理は完了しました。');
}

結果---
j is not defined
処理は完了しました。

変数jは未定義なので例外の発生になります。tryブロックで例外が発生したら、そのままcatchブロックに引き継がれます。

finallyブロックは例外の有無に関わらず処理されます。