Operators + Comparison
เครื่องหมายพื้นฐาน + - * / กับดักคลาสสิก == vs === กฎ truthy/falsy 6 ตัว และ short-circuit ของ && ||
เปิด browser console (F12) แล้วพิมพ์ 1 + 1 กด Enter จะได้ 2 ออกมา นี่คือ operator ตัวแรกที่ทุกคนเจอ + เป็นเครื่องหมาย ที่บอกให้คอมพิวเตอร์ บวก ค่าซ้ายกับขวา
บทนี้จะรู้จัก operator พื้นฐานทั้งหมด แต่ที่สำคัญที่สุดคือ operator เปรียบเทียบ ที่ทำให้ JS โดนล้อมา 30 ปี
Arithmetic บวก ลบ คูณ หาร
+บวก,-ลบ,*คูณ,/หาร%หารเอาเศษ (modulo) เช่น7 % 3 === 1**ยกกำลัง เช่น2 ** 10 === 1024
Comparison เปรียบเทียบ
ผลของการ compare คือ true หรือ false เสมอ
>มากกว่า,<น้อยกว่า,>=มากกว่าเท่ากับ,<=น้อยกว่าเท่ากับ===เท่ากับ (strict),!==ไม่เท่ากับ (strict)==เท่ากับ (loose),!=ไม่เท่ากับ (loose) ทั้งสองตัวควร หลีกเลี่ยง
== กับ === กับดักคลาสสิก
ทำไมมีตั้ง 2 แบบ เพราะ JS ออกแบบสมัยปี 1995 ให้ “ฉลาด” ตอน compare ถ้าค่าซ้าย กับขวามี type ต่างกัน == จะ แปลง type ให้เหมือนกันก่อน แล้วค่อย compare ส่วน === ตรวจ type กับ value ตรงๆ ไม่แปลงให้
ลองเล่นดูว่ามันต่างกันยังไง
== กับ === ให้ผลต่างกันยังไงtype: numbertype: string==loose (แปลง type)5 == "5"
===strict (เช็ค type ด้วย)5 === "5"
== งงยังไง=== เสมอ ไม่ต้องคิดมาก หลีกเลี่ยง == เพราะกฎการแปลง type ของมันเขียนเป็น flowchart ยาวเป็นหน้า จำไม่หมดและทำให้เกิด bug ที่ debug ยากTruthy กับ Falsy
เวลาเอาค่าที่ไม่ใช่ boolean ใส่ใน if เช่น if(x) JS จะแปลงค่า x เป็น boolean ก่อนตัดสิน ค่าที่ถือว่าเป็น false เรียกว่า falsy ส่วนที่เหลือเป็น truthy หมด
falsy มีแค่ 6 ตัว เท่านั้น จำได้คุ้ม คือ false, 0, “”, null, undefined, NaN
if(value) ผ่านไหมif ("") {
console.log("ผ่าน") // ไม่รัน
}“0” (string), “false” (string), [], {} ทั้งหมดเป็น truthy ตอบผิดได้ง่ายมากLogical: && || ! ??
4 operators ที่ใช้เชื่อมเงื่อนไขเข้าด้วยกัน
&&(AND) ต้องเป็นtrueทั้งคู่ถึงจะได้true||(OR) ขอแค่ตัวเดียวtrueก็ได้true!(NOT) สลับtrueเป็นfalseและกลับกัน??(nullish coalescing) คล้าย||แต่เลือกตัวซ้ายเฉพาะตอนเป็น null หรือ undefined เท่านั้น (ไม่เหมาเอา0หรือ“”ด้วย)
Short-circuit JS หยุดถามเมื่อรู้คำตอบแล้ว
&& และ || มีพฤติกรรมพิเศษ คือถ้าตัวซ้ายตัดสิน ผลได้แล้ว JS จะ ไม่ดู ตัวขวา ลองดูว่ามันทำงานยังไง
หยุดที่ false ตัวแรก เพราะ AND ต้อง true ทุกตัวถึงจะ true
&&&&1.true→ ดูตัวถัดไป2.true→ ดูตัวถัดไป3.false→ false แล้ว ไม่ต้องดูต่อ ผลลัพธ์ = falsetrue && true && false = falseuser && user.name คือ “ถ้ามี user ค่อยอ่าน name” ถ้า user เป็น null/undefined && จะ short-circuit ไม่ไปอ่าน .name ป้องกัน TypeError ได้Assignment shortcuts
ตัวช่วยเขียนสั้น ลดการเขียนชื่อตัวแปรซ้ำ
x += 5 // เหมือน x = x + 5
x -= 5 // x = x - 5
x *= 2 // x = x * 2
x /= 2 // x = x / 2
x++ // x += 1
x-- // x -= 1สรุป
- Arithmetic ใช้
+ - * / % **และระวัง+สับสนกับการต่อ string - Comparison ใช้
===เสมอ ห้ามใช้== - Truthy กับ Falsy จำ 6 falsy ก็พอ ที่เหลือ truthy หมด
- Logical
&&||มี short-circuit ใช้ป้องกัน null ได้ ??ใหม่กว่า||ใช้แทนเมื่อต้องการให้0และ“”นับว่ามีค่า
ใน lesson ถัดไปจะเอา operator มาใช้กับ control flow คือ if/else และ loop เพื่อให้โปรแกรมตัดสินใจและทำซ้ำได้