Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Logical NOT Operator (!) ใน JavaScript

Logical NOT Operator (!) กลับสถานะตรรกะของ operand: true→false, false→true และแปลงค่าให้เป็น Boolean

ตัวอย่างจากบทความ

<html>
  <body>
    <script>
      var a = true;
      document.write("a = ");
      document.write(a);        // true
      result = !a;
      document.write("<br>!a = ");
      document.write(result);   // false
    </script>
  </body>
</html>

ตารางความจริง (Truth Table)

Operand!Operand
truefalse
falsetrue
0true
1 (non-zero)false
"" (empty string)true
"hello" (non-empty)false
nulltrue
undefinedtrue
NaNtrue
{} (object)false
[] (array)false

การใช้งานทั่วไป

1. ตรวจสอบค่า Falsy

if (!value) {
  // value คือ null, undefined, '', 0, false, NaN
  console.log('Value is falsy');
}

2. Double NOT (!!) แปลงเป็น Boolean

!!"hello"    // true
!!0          // false
!!null       // false
!!undefined  // false
!!{}         // true
!![]         // true

// เทียบเท่า Boolean()
Boolean("hello") // true

3. Toggle Boolean

let isVisible = true;
isVisible = !isVisible; // false
isVisible = !isVisible; // true

4. Default Value Pattern (เก่า)

// ก่อน ES6 default parameters
function greet(name) {
  name = name || 'Guest'; // !name จะ true ถ้า name falsy
  // ปัญหา: name = '' หรือ 0 จะกลายเป็น 'Guest'
}

// ES6 แนะนำ
function greet(name = 'Guest') { ... }

Operator Precedence

! มี precedence สูงมาก (รองจาก . [] () new)

!a + b    // (!a) + b
!(a + b)  // ต้องใช้วงเล็บ

ข้อควรระวัง

  • [] == false คือ true แต่ ![] คือ false (เพราะ [] เป็น truthy)
  • ![] == [] คือ true (type coercion แปลกๆ)
  • ใช้ !! แทน Boolean() เพื่อความสั้น แต่อ่านยากกว่า