ตัวดำเนินการทางตรรกศาสตร์/JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#javascrip

#ตัวดำเนินการทางตรรกศาสตร์

ตัวดำเนินการทางตรรกศาสตร์ (Logical Operators) ใน JavaScript ใช้ประเมินค่าตรรกะ (Boolean: true หรือ false) หรือเพื่อควบคุมการทำงานตามเงื่อนไข พวกมันทำงานบนหลักการที่เรียกว่า Short-Circuit Evaluation ซึ่งหมายความว่ามันอาจจะหยุดประเมินโอเปอแรนด์ (Operand) ที่เหลือทันทีที่ทราบผลลัพธ์สุดท้าย

มีตัวดำเนินการหลัก 3 ตัว:

1. ∣∣ (OR: หรือ)

ตัวดำเนินการ OR ใช้ตรวจสอบว่ามีเงื่อนไขใดเป็นจริงหรือไม่

ตารางความจริง: จะคืนค่า true หากมีโอเปอแรนด์ตัวใดตัวหนึ่งหรือทั้งสองเป็น true

การทำงานแบบ Short-Circuit:

มันจะประเมินโอเปอแรนด์จากซ้ายไปขวา

ทันทีที่เจอโอเปอแรนด์ตัวแรกที่เป็น Truthy (ถือว่าเป็น true) มันจะคืนค่าของโอเปอแรนด์ตัวนั้นและหยุดการประเมิน

ถ้าโอเปอแรนด์ทั้งหมดเป็น Falsy (ถือว่าเป็น false) มันจะคืนค่าของโอเปอแรนด์ตัวสุดท้าย

ตัวอย่าง ผลลัพธ์ เหตุผล

`true false`

`0 5`

`"" null`

ประโยชน์ทั่วไป: ใช้ในการกำหนด ค่าเริ่มต้น (Default Value) หากค่าแรกเป็น null หรือ undefined

JavaScript

let userName = userSetting || 'Guest';

// ถ้า userSetting เป็น null/undefined/""/0 จะตั้ง userName เป็น 'Guest'

2. && (AND: และ)

ตัวดำเนินการ AND ใช้ตรวจสอบว่าเงื่อนไขทั้งหมดเป็นจริงหรือไม่

ตารางความจริง: จะคืนค่า true ก็ต่อเมื่อโอเปอแรนด์ทั้งสองด้านเป็น true เท่านั้น

การทำงานแบบ Short-Circuit:

มันจะประเมินโอเปอแรนด์จากซ้ายไปขวา

ทันทีที่เจอโอเปอแรนด์ตัวแรกที่เป็น Falsy (ถือว่าเป็น false) มันจะคืนค่าของโอเปอแรนด์ตัวนั้นและหยุดการประเมิน

ถ้าโอเปอแรนด์ทั้งหมดเป็น Truthy มันจะคืนค่าของโอเปอแรนด์ตัวสุดท้าย

ตัวอย่าง ผลลัพธ์ เหตุผล

true && false false ตัวแรกเป็น true แต่ตัวที่สองเป็น false จึงคืนค่า false (ตัวที่สอง)

5 && "Hello" "Hello" ทั้งคู่เป็น Truthy คืนค่าตัวสุดท้าย

0 && "World" 0 0 เป็น Falsy คืนค่า 0 ทันที

ประโยชน์ทั่วไป: ใช้ในการทำ Conditional Rendering หรือเรียกฟังก์ชันแบบมีเงื่อนไข (ใช้แทนโครงสร้าง if แบบสั้น)

JavaScript

// ถ้า isLogged เป็น true, ให้เรียกฟังก์ชัน showProfile

isLogged && showProfile();

3. ! (NOT: ไม่)

ตัวดำเนินการ NOT ใช้เพื่อกลับค่าตรรกะ

การทำงาน: มันจะแปลงโอเปอแรนด์ให้เป็นค่าตรรกะ (Boolean) แล้วกลับค่า

!true ได้ false

!false ได้ true

ตัวอย่าง ผลลัพธ์ เหตุผล

!true false กลับค่า

!0 true 0 เป็น Falsy ถูกแปลงเป็น false แล้วกลับเป็น true

!!"Hello" true ! แรกแปลง "Hello" (Truthy) เป็น false และ ! ที่สองกลับเป็น true

ส่งออกไปยังชีต

ประโยชน์ทั่วไป: ใช้ในการตรวจสอบว่าค่าหนึ่งเป็น Falsy หรือ Truthy (การใช้ !! เพื่อแปลงค่าใด ๆ ให้เป็น Boolean แท้ๆ)

ค่า Falsy และ Truthy ใน JavaScript

ในการประเมินค่าตรรกะ JavaScript จะถือว่าค่าต่อไปนี้เป็น Falsy (เทียบเท่ากับ false):

false

0 (เลขศูนย์)

"" (สตริงว่าง)

null

undefined

NaN (Not-a-Number)

Truthy คือค่าอื่น ๆ ทั้งหมดที่ไม่ได้อยู่ในรายการ Falsy (เช่น 1, "hello", [], {})