if และ else

จากโปรเจกต์ที่แล้ว เราได้ลองเล่นกับ if กับ else กันดูไปแล้ว

ในตอนนีี้ เราจะมาเรียนรู้โครงสร้างของ if กับ else กัน

if (เงื่อนไข) {
  // โค้ดที่จะทำงานถ้าเงื่อนไขเป็นจริง
} else {
  // โค้ดที่จะทำงานถ้าเงื่อนไขเป็นเท็จ
}

การใช้ if ซ้อนกัน

เวลาเราเขียนโปรแกรม เงื่อนไขของเราอาจจะซับซ้อนมากกว่าแค่สองเส้นทาง
เราสามารถเอา if ซ้อนกันได้ โดยเราจะเขียนเงื่อนไขที่ซ้อนกันได้เท่าที่เราต้องการ

ตัวอย่าง: โปรแกรมคำนวณเกรด

ผมจะสร้างโปรแกรมที่คำนวณเกรดของนักเรียน โดยโปรแกรมจะรับคะแนนเข้ามา และแสดงเกรดออกมา โดยใช้ตารางเกรดดังนี้

คะแนน	เงื่อนไข	เกรด
80-100	คะแนน ≥ 80	A
70-79	70 ≤ คะแนน < 80	B
60-69	60 ≤ คะแนน < 70	C
50-59	50 ≤ คะแนน < 60	D
0-49	คะแนน < 50	F

ตัวอย่าง:
index.html
ลองเล่นกับตัวอย่างข้างบนดู
1. ใส่คะแนน 100 แล้วกด Calculate grade → ควรได้เกรด A
2. ใส่คะแนน 90 แล้วกด Calculate grade → ควรได้เกรด A
3. ใส่คะแนน 80 แล้วกด Calculate grade → ควรได้เกรด A
4. ใส่คะแนน 79 แล้วกด Calculate grade → ควรได้เกรด B
5. ใส่คะแนน 70 แล้วกด Calculate grade → ควรได้เกรด B
6. ใส่คะแนน 69 แล้วกด Calculate grade → ควรได้เกรด C
7. ใส่คะแนน 60 แล้วกด Calculate grade → ควรได้เกรด C
8. ใส่คะแนน 59 แล้วกด Calculate grade → ควรได้เกรด D
9. ใส่คะแนน 50 แล้วกด Calculate grade → ควรได้เกรด D
10. ใส่คะแนน 49 แล้วกด Calculate grade → ควรได้เกรด F
11. ใส่คะแนน 0 แล้วกด Calculate grade → ควรได้เกรด F
เขียนโปรแกรมดังนี้
html
```
Your score:
<input id="scoreInput" value="100" type="number" max="100" min="0" />
<input id="calculateGrade" value="Calculate grade" type="button" />

<script>
  let scoreInput = document.getElementById('scoreInput')
  let calculateGrade = document.getElementById('calculateGrade')

  calculateGrade.onclick = () => {
    let score = Number(scoreInput.value)
    let grade
    if (score >= 80) {
      grade = 'A'
    } else {
      if (score >= 70) {
        grade = 'B'
      } else {
        if (score >= 60) {
          grade = 'C'
        } else {
          if (score >= 50) {
            grade = 'D'
          } else {
            grade = 'F'
          }
        }
      }
    }
    alert('Your grade is ' + grade)
  }
</script>
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
การลดเงื่อนไขซ้ำซ้อน
เงื่อนไขของเกรด B คือ “70 ≤ คะแนน < 80” แต่ในโค้ด บรรทัดที่ 15 (ซึ่งกำหนดเงื่อนไขของเกรด B เอาไว้) เขียนไว้แค่ score >= 70 ทำไมถึงเป็นเช่นนั้น?
ก็เพราะว่า ถ้าคะแนน ≥ 80 (เงื่อนไขในบรรทัดที่ 12), จะทำให้เข้าเงื่อนไขของเกรด A ทำให้โค้ดในส่วนของ else (บรรทัดที่ 15–27) ไม่ทำงาน นั่นแปลว่า ถ้าโค้ดมาถึงบรรทัดที่ 15 ได้ เรามั่นใจว่า คะแนนต้องน้อยกว่า 80 แน่นอน

จะเห็นว่า พอซ้อน if–else หลายๆ ชั้น โค้ดจะอ่านยากมาก กรณีที่มีหลายเงื่อนไข เราสามารถใช้ else if แทนได้

if (เงื่อนไข1) {
  // โค้ดที่จะทำงาน ถ้าเงื่อนไข1 เป็นจริง
} else if (เงื่อนไข2) {
  // โค้ดที่จะทำงาน ถ้าเงื่อนไข2 เป็นจริง
} else {
  // โค้ดที่จะทำงาน ถ้าทั้งเงื่อนไข1 และเงื่อนไข2 เป็นเท็จทั้งคู่
}

นำมาใช้กับโปรแกรมคำนวณเกรดได้ แบบนี้

calculateGrade.onclick = () => {
  let score = Number(scoreInput.value)
  let grade
  if (score >= 80) {
    grade = 'A'
  } else if (score >= 70) {
    grade = 'B'
  } else if (score >= 60) {
    grade = 'C'
  } else if (score >= 50) {
    grade = 'D'
  } else {
    grade = 'F'
  }
  alert('Your grade is ' + grade)
}

จะเห็นว่า โค้ดสั้นลง และอ่านง่ายขึ้นครับ

ดูโค้ด

html

<!doctype html>
<html>
  <head>
    <title>Grade Calculator</title>
  </head>
  <body>
    Your score:
    <input id="scoreInput" value="100" type="number" max="100" min="0">
    <input id="calculateGrade" value="Calculate grade" type="button">

    <script>
      let scoreInput = document.getElementById('scoreInput')
      let calculateGrade = document.getElementById('calculateGrade')

      calculateGrade.onclick = () => {
        let score = Number(scoreInput.value)
        let grade
        if (score >= 80) {
          grade = 'A'
        } else if (score >= 70) {
          grade = 'B'
        } else if (score >= 60) {
          grade = 'C'
        } else if (score >= 50) {
          grade = 'D'
        } else {
          grade = 'F'
        }
        alert('Your grade is ' + grade)
      }
    </script>

  </body>
</html>

การแปลงข้อมูลเป็น boolean

โดยปกติแล้ว เงื่อนไขใน if ควรจะเป็นข้อมูลชนิด boolean
js
```
if (Math.random() < 0.5) {
  alert('Heads')
} else {
  alert('Tails')
}
```
แต่จะเกิดอะไรขึ้นถ้าเราใส่ข้อมูลชนิดอื่นลงไปในเงื่อนไขของ if?
js
```
if (12345) {
  // A
} else {
  // B
}
```
ในกรณีนี้ โค้ดส่วนไหนจะถูกทำงาน? A หรือ B?
กรณีที่เงื่อนไขมีชนิดข้อมูลที่ไม่ใช่ boolean จะถูกแปลงเป็น boolean ก่อน
โดยในภาษา JavaScript ค่าต่อไปนี้จะถูกแปลงเป็น false:
- 0
- NaN (Not a Number, เป็นค่าที่ได้จากการคำนวณทางคณิตศาสตร์ที่ผิดพลาด)
- "" (สตริงเปล่า)
- undefined (ค่าเริ่มต้นของตัวแปรที่ยังไม่ได้กำหนดค่า)
- null (จะได้รู้จักในบทถัดๆ ไป)
ส่วนค่าอื่นๆ จะถูกแปลงเป็น true

if และ else ​

การใช้ if ซ้อนกัน ​

ตัวอย่าง: โปรแกรมคำนวณเกรด ​

การแปลงข้อมูลเป็น boolean ​

if และ else

การใช้ if ซ้อนกัน

ตัวอย่าง: โปรแกรมคำนวณเกรด

การแปลงข้อมูลเป็น boolean