🦊

JavaScript⑤

2022/12/16に公開

switch

  • 同値演算子(===)による分岐に特化した条件分岐
  • 対象となる1つの値を様々な値と比較して一致しているかどうか調べたい時に便利

構文

switch(式) {
case 値1:
// 「式 === 値1」であるときに、実行したい処理を書く
break;// ここでswitch文を抜ける意味
case 値2;
// 「式 === 値2」であるときに、実行したい処理を書く
break;// ここでswitch文を抜ける意味
default:
// 式の値が、すべての値に合致しないときに、実行したい処理を書く
break;
}

補足:caseは複数設置できる

例題

  • 変数nの値が1だったら、「one」とコンソールに出力する
  • 変数nの値が2だったら、「two」とコンソールに出力する
  • 変数nの値が3だったら、「three」とコンソールに出力する
  • 変数nの値が上記以外だったら、「other」とコンソールに出力する

回答

const n = 1;
switch(n) {
    case 1:
        console.log('one');
        break;
        case 2:
            console.log('two');
            case 3:
                console.log('three');
                break;
                default:
                    console.log('other');
                    break;
}

よくありがちな間違いとして、case文の中でbreakを記述し忘れると予期せぬ動作となる
2つのケースを実行する処理が行われたりするので
原則各caseごとにbreakを入れておくようにする

if、switchの使い分け

絶対的な1つの正解はない

目安
基本的にはifを利用
同値演算子(===)による評価だけ、かつ、同値演算子(===)による評価が、3個以上の場合は、switchを使うとスッキリ書ける場合が多い

演習:テーマパークの料金計算

年齢(変数age)の値によって、テーマパークの入場料を出し分けてコンソールに出力する

料金は下記とする

  • 大人(12歳以上の者)5000yen
  • 中人(6歳以上12歳未満の者)2500yen
  • 小人(6歳未満の者)1000yen
    ※if/ else if /elseを使用すること

回答

const age = 5 ;
if(age >= 12) {
    console.log('5000yen');
} else if(age >= 6) {
    console.log('2500yen');
} else {
console.log('1000yen');
}

繰り返し処理について

繰り返し処理とは

  • 条件が満たされる間 同じ処理を何回も実行する
  • 反復処理

3つの種類

  • for
  • while
  • do while

振り返し処理forを使おう

構文
for(初期化式;ループ継続条件式; 増減式) {
// 繰り返し実行したい処理を記述
}

例題
変数iの値を1から3まで変化させて、
コンソールに出力するプログラムを
for文を使って記述

回答

for(let i = 1; i <= 3; i++){
    console.log(i);
}

〜解説〜

let i = 1; i <= 3
変数iに初期値1を入れる、iの値が1になる
ループ条件式が評価される

iの値は1で、1は3以下が成り立つためループは継続する
console.log(i)
処理が実行され、コンソールにiの値が出力される

i++
増減式で1を足すのでiの値は2になる

i <= 3
Iの値は2で2は3以下なのでループは継続する
処理が実行され、iの値は2なので2が出力される

i++
増減式で2を足すのでiの値は3になる

iは3以下なのでループは継続する
処理が実行され、iの値が出力される

i++
1を足すのでiの値は4になる
条件式が成り立たないのでループ終了
よって出力結果は1,2,3

振り返し処理whileを使おう

構文
while(条件式){
// 条件式がtrueのときに実行したい処理
}

例題
変数iの値を1から3まで変化させながら
コンソールに出力するプログラムを
while文を使って記述

回答

let i = 1;
while(i <= 3) {
    console.log(i);
    i++
}

解説

let i = 1;
変数iに初期値1をセットする

while(i <= 3)
条件式を評価する
iの値は1で3以下が成り立つので繰り返し処理が実行される

console.log(i);
コンソールにiの値が出力される

i++
iの値をインクリメント、値は2になる



3まで繰り返し
出力結果は1,2,3になる

⚠️注意点
i++を入れ忘れると永遠に条件式を満たし続けるため無限ループになる

振り返し処理do whileを使おう

構文
do {
// 条件式がtrueのときに、実行したい処理
} while(条件式);

whileとdo whileの違い

  • while
    条件の判断が前にある
    条件によっては一度もループを実行しない

  • do while
    条件の判断が後ろにある
    条件に関わらず、最低1回はループをする

例題
変数iの値を1から3まで変化させ、
コンソールに出力するプログラムを
While文を使って記述

回答

let i = 1;
do {
    console.log(i);
    i++
} while(i <= 3);

解説

let i = 1;
変数iに初期値1を設定
{}内の処理は必ず1回実行される

console.log(i);
でiの値が出力される

i++
iの値をインクリメント、値は2になる
while(i <= 3);
条件式の評価
iの値は2で3以下が成り立つため繰り返し処理は継続される

console.log(i);
でiの値が出力される、iの値は2なので2が出力される

i++
iの値をインクリメント、値は3になる
while(i <= 3);
条件式の評価
iの値は3で3以下が成り立つため繰り返し処理は継続される

console.log(i);
でiの値が出力される、iの値は3なので3が出力される

i++
iの値をインクリメント、値は4になる
while(i <= 3);
条件式の評価
iの値は4でiは3以下の条件式が成りたたないため繰り返し処理はここで終了
よって出力結果は1,2,3になる

whileの場合と同様にi++を入れ忘れると
永遠に条件式を満たし続けるため無限ループになるので注意!

演習:繰り返し処理

1~100の整数値について
合計値を計算してコンソールに出力する

ヒント

  1. 合計値を保持する変数(例:let sum = 0;)を、for文より前に記述する
  2. 繰り返し処理for文を利用。変数sumの値を足していく
  3. 繰り返し処理終了後(for文より後に記述)、sumの値をコンソールに出力する

回答

let sum = 0;
for(let i = 1; i <= 100; i++) {
    sum = sum + i;
}

console.log(sum);

合計値を入れる変数sumを用意
0で初期化する
0で初期化する理由は変数sumを0で初期化せず
変数sumで宣言すると変数の値はundefinedのため後の計算で問題が起こる可能性がある!!

0+1は1だがundefined+1は1となることが保証されていない


今日はここまで!!
理解はできてるつもりだけどいざ演習となると難しいな、、!
また復習しよう😌
今日は眠い1日だったけどジムも行ってパワーもらって勉強も頑張れた!
とにかく1週間がめちゃくちゃはやい、、!
金曜も頑張って週末は名古屋旅行楽しむ🙆🏻‍♀️

Discussion