แนะนำ condition และ loop

การประกาศ condition (เงื่อนไข) ใน javascript

แน่นอน ทุกคำสั่งในการเขียน program นั้นย่อมต้องมีการประกาศเงื่อนไขการใช้งานไว้ เช่น

• ถ้าเกรดมากกว่า 80 ให้แสดงเกรด A ออกมา, ถ้าเกรดน้อยกว่า 50 ให้แสดงเกรด F ออกมา
• ถ้ามีอายุ มากกว่า 20 ปี = ยืนยันได้ว่าเป็น ผู้ใหญ่

Condition operator

ถ้า ... แล้ว สิ่งนี้คือ condition หรือ เงื่อนไขในทางภาษา programming ซึ่งพื้นฐานของ condition นั้น จะมีสิ่งที่เป็น Condition operator ที่จะมีการประกาศไว้ทั้ง 2 ฝั่ง และ ผลลัพธ์ของ Condition นั้นจะออกมาเป็น true (เป็นจริง) หรือ false (เป็นเท็จ) เพื่อให้นำไปใช้งานต่อได้

จะมี Condition operator ที่ใช้งานได้คือ

• == เป็นการเช็คว่า ตัวแปรฝั่งซ้าย และ ฝั่งขวา มีค่าเท่ากันหรือไม่ ?
• != เป็นการเช็คว่า ตัวแปรฝั่งซ้าย และ ฝั่งขวา มีค่าไม่เท่ากันหรือไม่ ? (ตรงข้ามกับ ==)
• < เป็นการเช็คว่า ตัวแปรฝั่งซ้าย น้อยกว่า ฝั่งขวา หรือไม่ ?
• <= เป็นการเช็คว่า ตัวแปรฝั่งซ้าย น้อยกว่าหรือเท่ากับ ฝั่งขวา หรือไม่ ?
• > เป็นการเช็คว่า ตัวแปรฝั่งซ้าย มากกว่า ฝั่งขวา หรือไม่ ?
• >= เป็นการเช็คว่า ตัวแปรฝั่งซ้าย มากกว่าหรือเท่ากับ ฝั่งขวา หรือไม่ ?

เรามาลองดูตัวอย่างการใช้ Condition operator โดยการนำผลลัพธ์ใส่ตัวแปรใหม่เอาไว้กัน (ซึ่งตัวแปรที่นำมารับก็จะได้ผลลัพธ์เป็น true, false ที่เป็น Boolean ออกมา)

let number1 = 12
let number2 = 5

let isEqual = (number1 == number2) // เช็คว่า number1 เท่ากับ number2 หรือไม่ = ซึ่งผลลัพธ์คือไม่เท่ากัน isEqual จะมีค่าเป็น false ออกมา
let isNotEqual = (number1 != number2) // เช็คว่า number1 เท่ากับ number2 หรือไม่ = ซึ่งผลลัพธ์คือไม่เท่ากัน isNotEqual จะมีค่าเป็น true ออกมา
let isMore = (number1 > number2) // เช็คว่า number1 มีค่ามากกว่า number2 หรือไม่ = ซึ่งผลลัพธ์ก็คือมากกว่า isMore จะมีค่าเป็น true ออกมา
let isLess = (number1 <= number2) // เช็คว่า number1 มีค่าน้อยกว่าหรือเท่ากับ number2 หรือไม่ = ซึ่งผลลัพธ์ก็คือไม่น้อยกว่า isLess จะมีค่าเป็น false ออกมา

เราจะลองมาใช้งานร่วมกับ Condition statement กัน

Condition statement

Condition statement คือชุดคำสั่งที่ใช้สำหรับสร้างเงื่อนไขเพื่อให้ program สามารถดำเนินการต่างกันได้ ซึ่งใน javascript (รวมถึง ภาษา programming เกือบๆทุกภาษา) นั้นจะมี condition statement คือ

• if = สำหรับเงื่อนไขอันเดีย
• if-else = สำหรับเงื่อนไข ใช่ และ ไม่ใช่
• else if = สำหรับหลายเงื่อนไข
• switch = สำหรับใช้กับหลานเงื่อนไขตาม condition ที่ระบุ

วิธีการประกาศนั้น จะเป็นการใส่ condition เข้าไปใน () หลัง if แบบนี้

// ตัวอย่าง if
if (condition) { // condition คือเงื่อนไขที่ต้องการจะเช็ค
  /* หากเงื่อนไขเป็นจริง (true) สิ่งที่อยู่ใน {} นี้ทั้งหมดจะทำงาน */
  /* และจะไม่ทำงานเมื่อเงื่อนไขเป็นเท็จ (false) */
}

// ตัวอย่าง if - else
if (condition) { // condition คือเงื่อนไขที่ต้องการจะเช็ค

} else {
  /* หากเงื่อนไขของ condition เป็นเท็จ (false) สิ่งที่อยู่ใน {} ของ else นี้ทั้งหมดจะทำงาน */ 
  /* else จะทำงานเมื่อ if เป็นเท็จ = if จะไม่ทำงานหาก else ทำงาน */
}

// ตัวอย่าง else if
if (condition1)  {
  /* หากเงื่อนไข condition1 เป็นจริง (true) สิ่งที่อยู่ใน {} นี้ทั้งหมดจะทำงาน */
} else if (condition2) {
  /* หากเงื่อนไข condition2 เป็นจริง (true) สิ่งที่อยู่ใน {} นี้ทั้งหมดจะทำงาน */
} else {
  /* หากไม่มีเงื่อนไขใดเป็นจริงเลย จะกลับมาทำงานใน else แทน */
}

// ตัวอย่าง switch จะเป็นการใชักับตัวแปรเพื่อสร้างเงื่อนไข (มีค่าเทียบเท่ากับ ==)
switch (variable) { 
  case condition1: // variable == condition1
    // ... ถ้า condition1 เป็นจริงจะทำในช่วงนี้
    break // จนถึงบรรทัดนี้จะออกจาก switch ออกไป
  case condition2: // variable == condition1
    // เพิ่ม condition มากกว่า 1 อันได้
    break
  default:
    // หากไม่เข้าเคสไหนเลย = จะทำเคสนี้ (เหมือน else ใน if-else)
}

เรามาลองดูตัวอย่างการใช้งานกัน

let number1 = 12
let number2 = 5

// case 1: if ปกติ
if (number1 != number2) { // condition นี้เป็นจริง (true)
  // บรรทัดนี้จะทำงาน
  console.log('number1 is not equal number2')
}

// case 2: if-else
if (number1 == number2) { // condition นี้ไม่เป็นจริง (false)
  // บรรทัดนี้จะ "ไม่ทำงาน"
  console.log('number1 is equal number2')
} else {
  // บรรทัดนี้จะ "ทำงาน" แทน (เนื่องจาก condition เป็นเท็จ)
  console.log('number1 is not equal number2')
}

// case 3: else if
let number = 15
if (number <= 10) { // condition นี้ไม่เป็นจริง (false)
  // บรรทัดนี้จะ "ไม่ทำงาน"
  console.log('number is less than or equal 10')
} else if (number < 20) { // condition นี้เป็นจริง (true)
  // บรรทัดนี้จะ "ทำงาน"
  console.log('number is less than 20')
} else {
  // บรรทัดนี้จะ "ไม่ทำงาน" (เนื่องจากทำงานใน else if ไปแล้ว)
  console.log('number other case')
}

// case 4: switch
const day = 2 // ประกาศตัวแปรสำหรับใช้ในเงื่อนไ
switch (day) { // ระบุใน switch ว่าจะเช็คเงื่อนไขตามตัวนี้
  case 1: // ถ้า day == 1
    // บรรทัดนี้ "ไม่ทำงาน"
    console.log('Monday')
    break
  case 2: // ถ้า day == 2 (ซึ่งเป็นจริง)
    // บรรทัดนี้ "ทำงาน"
    console.log('Tuesday')
    break
  case 3: // ถ้า day == 3
    // บรรทัดนี้ "ไม่ทำงาน"
    console.log('Wednesday')
    break
  default:
    console.log('Invalid day')
}

รู้จักกับ Logical operator

แน่นอน ในโลกของ programming เองก็สามารถ handle condition มากกว่า 1 condition ได้

มันเลยมีสิ่งที่เรียกว่า "Logical operator" ในการเปรียบเทียบ condition ที่มากกว่า 1 condition ได้ ซึ่งใน javascript (และในภาษา programming อื่นๆ) จะมีการประกาศใช้ทั้ง 2 ฝั่ง โดยมีดังนี้

• && (และ, AND) เป็นการเชื่อมว่า ถ้า condition ทั้ง 2 ฝั่งเป็นจริง จะเป็นจริง (true) และจะเป็นเท็จ (false) เมื่อมี condition ใด condition หนึ่ง ไม่เป็นจริง
• || (หรือ, OR) เป็นการเชื่อมว่า ถ้า condition ทั้ง 2 ฝั่ง condition ใด condition หนึ่งเป็นจริง จะเป็นจริง (true) และจะเป็นเท็จ (false) เมื่อมี condition ทุก condition ไม่เป็นจริง
• ! (ไม่, NOT) เป็นการกลับ condition โดยถ้า condition เป็นจริง (true) จะกลายเป็นเท็จ (false) แทน (และจะกลับกันในฝั่งของ condition ที่เป็นเท็จเช่นกัน)

** Concept จะเหมือนกับตรรกศาสตร์ในคณิตศาสตร์เรื่อง "และ", "หรือ", "นิเสธ" เลย

เราจะลองยกตัวอย่างเพิ่มเติม

let a = 5
let b = 10

if (a > 0 && b > 0) { // ซึ่งประโยคนี้ a > 0 และ b > 0 เป็นจริงทั้งคู่
  // บรรทัดนี้จะ "ทำงาน"
  console.log('Both a and b are positive.')
} else {
  // บรรทัดนี้จะ "ไม่ทำงาน"
  console.log('Either a or b is not positive.')
}

let a = -5
let b = 10
if (a > 0 || b > 0) { // ซึ่งประโยคนี้ a > 0 เป็นเท็จ (false) และ b > 0 เป็นจริง (true) = ประโยคนี้เป็นจริง (true) เนื่องจากมีเงื่อนไขอันหนึ่งเป็นจริง
  // บรรทัดนี้จะ "ทำงาน"
  console.log('Either a or b is positive.')
} else {
  // บรรทัดนี้จะ "ไม่ทำงาน"
  console.log('Both a and b are not positive.')
}

ลองมาดูผ่านโจทย์จริงกันดีกว่า เราจะลองทำ condition สำหรับการตัดเกรดโดย เราจะมีตัวแปร score ตัวแปรหนึ่ง โดยเราจะตัดเกรดโดยเงื่อนไขตามนี้

• ถ้า score >= 90, แสดงเป็นเกรด A
• ถ้า score >= 80, แสดงเป็นเกรด B
• ถ้า score >= 70, แสดงเป็นเกรด C
• ถ้า score >= 60, แสดงเป็นเกรด D
• และถ้าไม่เข้าเงื่อนไขไดเลย (score < 60), แสดงเป็นเกรด F

let score = 85
if (score >= 90) {
  console.log('Your grade is A.')
} else if (score >= 80) {
  console.log('Your grade is B.')
} else if (score >= 70) {
  console.log('Your grade is C.')
} else if (score >= 60) {
  console.log('Your grade is D.')
} else {
  console.log('Your grade is F.')
}

// แสดงเป็นคำว่า 'Your grade is B.' ออกมาแทน

การใช้งาน loop (การวนซ้ำ) ใน javascript

Loop คือการ ทำซ้ำ (repeat) คำสั่งใน programming ตามเงื่อนไข (condition) ที่เป็นจริง

ซึ่ง loop ใน javascript นั้นจะมี 2 คำสั่งที่ใช้กันหลักๆ (จริงๆมีมากกว่านี้เดี๋ยวเราจะแนะนำอีกที) คือ while และ for

เราจะมาดูโครงสร้างกันก่อน

while (condition) { // ใส่ condition เหมือน if
  // ถ้า condition เป็นจริง (true) = จะทำคำสั่งใน {} ไปเรื่อยๆ
  // จนกว่า condition จะเป็นเท็จ (false)
}

for (init ; condition ; increment) {
  /*
    init คือ การกำหนดค่าเริ่มต้นของ for
    condition คือ condition ที่จะใช้งาน (เหมือน while loop)
    increment คือ เมื่อจบ loop {} หนึ่งรอบ จะให้ทำคำสั่งอะไรเพิ่ม
  */

  // ใน {} นี้จะทำเรื่อยๆเท่าที่ condition เป็นจริง
}

ซึ่ง condition ที่ใส่ตรงนี้ จะเป็น condition แบบเดียวกับในหัวข้อ condition statement เลย สามารถใช้ไอเดียเดียวกันในการประกาศ condition ได้

เราจะมาลองดูผ่านตัวอย่างกัน ตัวอย่างคือ

• เราจะวนทำคำสั่งเดิมทั้งหมด 10 รอบ โดยเราจะใช้ทั้ง while และ for กัน

// ฉบับ while
let i = 0
while (i < 10) {
  console.log('round: ', i)
  i++
}

// ฉบับ for
for (let i = 0; i < 10; i++) {
  console.log('round: ', i)
}

// ซึ่งทั้ง 2 code นี้ให้ผลลัพธ์เหมือนกัน