Conditional statements คือ statement ที่เป็นเงื่อนไข ตัวอย่างง่ายๆ เช่น นาฬิกาปลุกแล้ว เรายังง่วงนอนอยู่หรือไม่? ถ้าง่วง ก็นอนต่อ ถ้าไม่ง่วง ก็ตื่นนอน เป็นต้น

Conditional statements ใน JavaScript มีดังนี้

  1. if, else if, else
  2. comparison operators
  3. logical operators
  4. truthy and falsy values
  5. ternary operators
  6. switch statement

if keyword

  • ตามด้วย ( ) และ code block หรือ block statement { }
  • ข้างใน ( ) จะเป็นเงื่อนไขที่มีค่า true หรือ false
  • ถ้าเงื่อนไขเป็นจริง (true) code block จะรัน
  • ถ้าเงื่อนไขไม่เป็นจริง (false) code block จะไม่รัน

if…else statement

  • else keyword จะตามหลัง code block ของ if statement
  • จากนั้นตามด้วย code block ของตัวเอง { }
  • code ใน else statement code block จะรันเมื่อเงื่อนไขใน if statement เป็นเงื่อนไขที่ไม่เป็นจริงเท่านั้น

if…else statement ช่วยให้เราแก้ปัญหาสำหรับคำถามที่ต้องการคำตอบแบบ “ใช่หรือไม่” ได้โดยอัตโนมัติ (automate solution) หรือที่เรียกว่า binary decision

comparison operators

  • น้อยกว่า: <
  • มากกว่า: >
  • น้อยกว่าหรือเท่ากับ: <=
  • มากกว่าหรือเท่ากับ: >=
  • เป็น, คือ, เท่ากับ: ===
  • ไม่ใช่, ไม่เป็น, ไม่เท่ากับ: !==

logical operators

เป็น operators ที่ใช้งานกับ boolean value (มีสองค่า คือ true และ false)

  • && คือ operator “และ” ทั้งสองเงื่อนไขจะต้องเป็นจริง code ถึงจะรัน
  • || คือ operator “หรือ” เพียงแค่เงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง code ก็จะรัน
  • ! คือ operator “ไม่” หรือ รู้จักอีกชื่อว่า bang หากใส่ ! กับตัวแปรที่เป็นจริง console จะปริ้น false หากใส่กับตัวแปรที่เป็นเท็จ console จะปริ้นท์ true

Truthy and Falsy

เพื่อตรวจสอบว่าตัวแปรนั้นถูกกำหนดค่าไว้หรือไม่ หากตัวแปรนั้นถูกกำหนดค่าที่เป็น truthy ไว้ code block จะรัน

ค่าตัวแปรที่เป็น falsy ทำให้ code block ไม่รัน ได้แก่

  • ค่า 0
  • String ที่ว่าง หรือ empty strings
  • ค่า null
  • ค่า undefined
  • ค่า NaN (Not a Number)

Truthy and Falsy Assignment

ตรวจสอบว่าตัวแปรถูกกำหนดค่าไว้หรือไม่และกำหนดค่าให้ตัวแปรเมื่อตรวจสอบแล้วว่าตัวแปรไม่ได้ถูกกำหนดค่าไว้

JavaScript จะกำหนดค่าที่ truthy โดยใช้ operator || ในการกำหนดค่า

หากค่าด้านซ้ายมือไม่เป็น truthy ค่าด้านขวามือของ || จะถูกกำหนดให้เป็นค่าของตัวแปรนั้นแทน

Ternary operator

เป็นรูปประโยคแบบย่อของ if…else statement

  • ใส่ตัวแปรที่เป็นเงื่อนไขก่อนหน้าเครื่องหมาย ?
  • expressions หรือผลของเงื่อนไขสองแบบเขียนตามหลัง ? และมีเครื่องหมาย : (colon) คั้นกลาง
  • ถ้าเงื่อนไขเป็นจริง expression แรกจะรัน
  • ถ้าเงื่อนไขเป็นเท็จ expression ที่สองจะรัน

else if statement

else if statement ช่วยให้เราใส่ expression ได้มากกว่าสองแบบ โดยสามารถใส่ได้มากเท่าที่ต้องการ

else if statement ใส่หลังจาก if statement และก่อนหน้า else statement

switch keyword

ใช้ในกรณีที่มี expression หลายแบบและต้องการตรวจสอบว่าค่าของตัวแปรตรงกับ expression ใด เหมือนกับการใช้ else if statement แต่รูปประโยคของ switch statement ง่ายกว่าในการเขียนและอ่าน

  • ใส่ switch keyword เมื่อเริ่มเขียน statement จากนั้นตามด้วย ( ) โดยมีตัวแปรที่ต้องการตรวจสอบค่าอยู่ด้านใน
  • ตามด้วย { } (code block) ด้านใน { } จะมี case แต่ละอัน แสดง expression ที่ใช้เปรียบเทียบกับค่าของตัวแปร และคำสั่งให้โปรแกรมทำงานของแต่ละ case
  • break keyword บอกคอมพิวเตอร์ให้จบการทำงานของ code block นี้ทันที ไม่รัน code ที่เหลือต่อ
  • หาก expression ในทุก case เป็นเท็จ default statement ที่อยู่ด้านล่างสุดจะรัน