JavaScriptのif文とfor文

概要

条件分岐とループは、JavaScriptにおけるプログラムの流れを制御するために不可欠です。この章では、if文とfor文の使い方、およびこれらを使った効果的なコードの書き方について学びます。

目次

  1. if文（条件分岐）
  2. for文（繰り返し処理）
  3. breakとcontinue
  4. 注意事項
  5. 練習問題

1. if文（条件分岐）

  • if文は条件に基づいて異なるコードブロックを実行するために使用されます。
  • if文の後には条件式が続き、その条件式がtrueの場合にのみ中の処理が実行されます。
  • else if文は複数の条件を順に評価するために使用され、前のifまたはelse ifの条件がfalseだった場合に評価されます。
  • else文はどの条件もtrueでなかった場合に実行されるコードブロックです。
    if (条件式A) {
  処理C
}else if(条件式B) {
  処理D
}else {
  処理E
}
  • アロー関数の省略形の時と同じく、if文の処理がreturnのみなど１処理だけの場合、{}を省略して同行に処理のみを書くことができる。
    if (条件式A) return false
else if(条件式B) {
  // 処理D (複数行に渡る処理)
  // ...
}else console.log("Hello World")

2. for文（繰り返し処理）

  • for文は繰り返し処理を実行するために使用されます。
  • for文は「初期化式」「条件式」「更新式」を持ち、for(初期化式; 条件式; 更新式){ }の形式で、これらが一連の流れで処理されます。
  • 初期化式で変数を初期化し、条件式がtrueである限り、ループ内のコード（処理D）が実行され続けます。各イテレーションの終わりには更新式が実行されます。
for (初期化式A; 条件式B; 更新式C) {
  処理D
}

流れとしては、

  1. for文開始
  2. 初期化式A
  3. 条件式B判定=>falseならループ終了
  4. 処理D
  5. 更新式C
  6. 次のループへ(3.条件式B判定に戻る)
// 例
const array = [0, 1, 2, 3, 4]
for (let i = 0, len = array.length; i < len; i++) {
  console.log(array[i])
}
  1. 初期化式でlet i=0とlet len=array.lengthを宣言してiに0、lenに5が入る
  2. 条件式i<lenの判定が行われる=>判定がfalseならループ終了
  3. for文の中の処理が実行される
  4. 更新式i++が実行される
  5. 次のループへ(3.条件式B判定に戻る)

3. breakとcontinue

  • break文はfor文（または他のループ）の実行を中断し、ループの外に制御を移します。
  • continue文は現在のイテレーションをスキップし、次のイテレーションに進みます。continueはループを終了しませんが、現在のイテレーションの残りの部分をスキップします。
    // breakの例
const array = [0, 1, 2, 3, 4]
for (let i = 0, len = array.length; i < len; i++) {
  if(i === 3) break 
  console.log(array[i])
}
// => 0,1,2

    // continueの例
const array = [0, 1, 2, 3, 4]
for (let i = 0, len = array.length; i < len; i++) {
  if(i === 2) continue 
  console.log(array[i])
}
// => 0,1,3,4

4. 注意事項:

  • コードの可読性を高めるために、条件式やループ内の処理が複雑になりすぎないように注意が必要です。
  • また、無限ループに陥らないように、for文の条件式と更新式を適切に設計することが重要です。
  • if文やfor文は、関数内部や他の制御構造（例えば、他のif文やfor文）の内部にネストして使用することができます。

5. 練習問題

①下記処理の出力を答えよ

const a = NaN
const sample = () => {
  if (!a) {
    return
  }
  return true
}
console.log(String(sample()))

②下記処理の出力を答えよ

const zero = 0
if (!zero) {
  console.log('1')
} else if (zero === 0) {
  console.log('2')
} else {
  console.log('3')
}

if (typeof zero === 'number') {
  console.log('4')
}
if (zero === 0) {
  console.log('5')
}
if (!!zero) {
  console.log('6')
}

③配列を引数で受け取り、合計値を返す関数を実装し答えよ

下記解答例

const sumArray = (array = []) => {
  let result = 0
  for (let i = 0, len = array.length; i < len; i++) {
    if (!Number(array[i])) break
    result += array[i]
  }
  return result
}

④空配列[]であることを判定するif文を答えよ(ヒントlength)

const array = []

if(ここに解答) {
  console.log('Correct!!')
}else {
  console.log('Incorrect...')
}

⑤空連想配列{}であることを判定するif文を答えよ(ヒントObject.keys)

const object = {}

if(ここに解答) {
  console.log('Correct!!')
}else {
  console.log('Incorrect...')
}