โอเปอเรเตอร์ใน JavaScript มีอะไรบ้าง?

ในนิพจน์ 10 + 20 = 30 ตัวเลข 10 และ 20 เรียกว่า Operand ส่วน + เรียกว่า Operator (โอเปอเรเตอร์) JavaScript รองรับกลุ่มโอเปอเรเตอร์หลัก 5 กลุ่ม:

Arithmetic Operators (คณิตศาสตร์): + - * / % ** ++ --
Comparison Operators (เปรียบเทียบ): == === != !== > < >= <=
Logical Operators (ตรรกะ): && || ! ??
Assignment Operators (กำหนดค่า): = += -= *= /= %= **= &= |= ^= <<= >>= >>>= &&= ||= ??=
Conditional (Ternary) Operator: condition ? expr1 : expr2

Comparison Operators (รายละเอียด)

สมมติ var A = 10, B = 20:

#	Operator	ชื่อ	คำอธิบาย	ตัวอย่าง (A=10, B=20)
1	`==`	Equal (Loose)	ค่าเท่ากัน (มี Type Coercion)	`(A == B)` false
2	`===`	Strict Equal	ค่าและชนิดเท่ากัน	`(A === B)` false
3	`!=`	Not Equal (Loose)	ค่าไม่เท่ากัน (มี Coercion)	`(A != B)` true
4	`!==`	Strict Not Equal	ค่าหรือชนิดไม่เท่ากัน	`(A !== B)` true
5	`>`	Greater Than	ซ้ายมากกว่าขวา	`(A > B)` false
6	`<`	Less Than	ซ้ายน้อยกว่าขวา	`(A < B)` true
7	`>=`	Greater Than or Equal	ซ้ายมากกว่าหรือเท่าขวา	`(A >= B)` false
8	`<=`	Less Than or Equal	ซ้ายน้อยกว่าหรือเท่าขวา	`(A <= B)` true

ตัวอย่างโค้ดทดสอบ Comparison Operators

<html>
<body>
  <script>
    var a = 10, b = 20;
    var linebreak = "<br />";
    
    document.write("(a == b) => "); result = (a == b); document.write(result); document.write(linebreak);
    document.write("(a === b) => "); result = (a === b); document.write(result); document.write(linebreak);
    document.write("(a != b) => "); result = (a != b); document.write(result); document.write(linebreak);
    document.write("(a !== b) => "); result = (a !== b); document.write(result); document.write(linebreak);
    document.write("(a > b) => "); result = (a > b); document.write(result); document.write(linebreak);
    document.write("(a < b) => "); result = (a < b); document.write(result); document.write(linebreak);
    document.write("(a >= b) => "); result = (a >= b); document.write(result); document.write(linebreak);
    document.write("(a <= b) => "); result = (a <= b); document.write(result); document.write(linebreak);
  </script>
</body>
</html>

ผลลัพธ์

(a == b) => false
(a === b) => false
(a != b) => true
(a !== b) => true
(a > b) => false
(a < b) => true
(a >= b) => false
(a <= b) => true

Operator Precedence (ลำดับความสำคัญบางส่วน)

1. () [] .           // Grouping, Member Access
2. new, typeof, ++, --, !, ~, +, -  // Unary
3. **                // Exponentiation
4. * / %             // Multiplicative
5. + -               // Additive
6. << >> >>>         // Shift
7. < <= > >=         // Relational
8. == != === !==     // Equality
9. &                 // Bitwise AND
10. ^                // Bitwise XOR
11. |                // Bitwise OR
12. &&               // Logical AND
13. ||               // Logical OR
14. ??               // Nullish Coalescing
15. ? :              // Ternary
16. = += -= ...      // Assignment
17. ,                // Comma

โปรแกรมเมอร์ควรจดจำ

ใช้ === และ !== เสมอ (หลีกเลี่ยง Type Coercion)
&& และ || เป็น Short-Circuit Evaluation
?? (Nullish Coalescing) ตรวจสอบ null/undefined เท่านั้น (ไม่ใช่ Falsy)
Bitwise Operators ทำงานกับ 32-bit Integer เท่านั้น