ตัวดำเนินการ ternary คืออะไร?

ตัวดำเนินการ ternary ใช้เพื่อตรวจสอบเงื่อนไขในโค้ดของคุณ แทนที่จะใช้คำสั่ง if…else เรียกอีกอย่างว่าตัวดำเนินการตามเงื่อนไข และทำให้โค้ดสั้นลงและอ่านง่ายขึ้นมาก (โดยส่วนใหญ่แล้ว)

ไวยากรณ์

มาดูไวยากรณ์ของตัวดำเนินการที่ประกอบไปด้วย:

condition ? trueExpression : falseExpression

condition — เงื่อนไขที่คุณกำลังประเมิน เช่น อายุ > 5 ปี

trueExpression: นี่คือสิ่งที่จะเกิดขึ้นหากconditionเป็นtrue.

falseExpression: นี่คือสิ่งที่จะเกิดขึ้นหากconditionเป็นfalse.

ตัวอย่าง

ด้านล่างนี้คือตัวอย่างการใช้คำสั่ง if…else เพื่อตรวจสอบว่ารถควรเคลื่อนตัวหรือไม่โดยพิจารณาจากสัญญาณไฟจราจรที่เป็นสีอะไร

let color = ‘red’; // color of the traffic light
let carMovement;

if (color === 'red') {
  carMovement = 'stop';
} else {
  carMovement = 'go';
}

console.log(carMovement); //stop

let color = 'red'; // color of the traffic light
let carMovement = color === red ? 'stop' : 'go';

console.log(carMovement); //stop

คุณยังสามารถซ้อนหรือเชื่อมโยงตัวดำเนินการ ternary หนึ่งตัวเป็นนิพจน์ภายในตัวดำเนินการ ternary อีกตัวหนึ่ง ด้านล่างนี้เป็นตัวอย่างในการตรวจสอบว่าตัวเลขเป็นบวก ลบ หรือศูนย์:

let num = 2;
let result = num >= 0 ? num === 0 ? 'zero' : 'positive' : 'negative';

console.log(result); //positive

let num = 2;
let result = (num >= 0) ? (num === 0 ? "zero" : "positive") : "negative";

console.log(result); //positive

เมื่อใดที่คุณควรใช้ตัวดำเนินการแบบไตรภาค

เช่นเดียวกับตัวอย่างด้านบนที่ไฮไลต์ ตัวดำเนินการ ternary อาจทำให้โค้ดสั้นลง แต่เมื่อใช้ตัวดำเนินการ ternary ที่ซ้อนกันที่ซับซ้อน ตัวดำเนินการ ternary มักจะทำให้โค้ดอ่านได้น้อยลงและเกิดความสับสนมากขึ้น

หลักทั่วไปคือการคิดว่าคนอื่นในอีก 2 ปีข้างหน้าจะสามารถอ่านและเข้าใจโค้ดของคุณได้อย่างง่ายดายหรือไม่ ถ้าคำตอบคือไม่ ให้ใช้คำสั่ง if…else แทน

เคล็ดลับ: หากใช้ ESlint จะห้ามไม่ให้ใช้ตัวดำเนินการ ternary ที่ซ้อนกันโดยสิ้นเชิง!

บทสรุป

ตัวดำเนินการแบบ Ternary จะโดดเด่นก็ต่อเมื่อทำให้โค้ดอ่าน เข้าใจ และบำรุงรักษาได้ง่ายขึ้น ไม่ใช่แค่การทำให้โค้ดสั้นลง ดังนั้นจงใช้มันอย่างมีประสิทธิภาพ