เราพบ operators ครั้งแรกตอนเป็นเด็กเรียน arithmetic ใน elementary school Operators คือ symbols ระหว่าง two operands ใน web development เราใช้ operators เปรียบเทียบสองค่า เพื่อตัดสินใจว่า expression เป็น true หรือ false ในบทความนี้ เราจะดู comparison (a.k.a relational) และ equality operators - พวกเขาคือสองประเภท operators ที่พบบ่อยที่สุดใน JavaScript
Comparison Operators
จะมีเวลาในการสร้าง logic แก้ปัญหา ที่คุณต้องใช้ comparison หรือ relational operators เพื่อ conditionally render อะไรบนหน้าจอ มาดูตัวที่พบบ่อยที่สุดในโค้ด นี่คือ object ที่เราจะใช้สำหรับ operators ถัดไป:
- in – ใช้ in operator เช็คว่ามี property ใน object หรือไม่:
const cityData = { city: "San Jose", state: "California", area: 181.36, land: 178.24, water: 3.12, urban: 342.27, metro: 2694.61, elevation: 82, population: 1021795, timezone: "Los_Angeles/Pacific", website: "www.sanjoseca.gov" } console.log("metro" in cityData); //true console.log("country" in cityData); //false
- instanceof – ใช้ instanceof operator ถามว่า object เป็น instance ของ class หรือ constructor function หรือไม่
function Class(subject, teacher, numStudents) { this.subject = subject; this.teacher = teacher; this.numStudents = numStudents; } const classroom = new Class('Academic Geometry', 'Jane Doe', 24); console.log(classroom instanceof Class); // expected output: true console.log(classroom instanceof Object); // expected output: true
- Less than ( < ), Less than or equal to ( <= ) – Comparison operator คืนค่า true ใน conditional statement ถ้า operand A น้อยกว่า operand B เราเห็นบ่อยตอนสร้าง for loop:
for(let i = 1; i <= n; i++) { // code here } for(let i = 0; i < arr.length; i++) { // code here }
- Greater than ( > ), Greater than or equal to ( >= ) – Comparison operator คืนค่า true ใน conditional statement ถ้า operand A มากกว่า operand B ใช้บ่อยตอนหา maximum number ใน array:
let maximum = -Infinity; for(let i = 0; i < arr.length; i++) { if(arr[i] >= maximum) { maximum = arr[i]; } }
Note: >= ไม่เหมือน => ตัวหลังใช้สำหรับ big arrow functions ใน ES6 JavaScript syntax
Equality Operators
คล้าย comparison operators equality operators ก็ evaluate เป็น Boolean value ประกาศว่า expression เป็น true หรือ false
Equality ( == ) vs. Identity ( === ) – เวลาเห็น equal signs ( = ) ใน JavaScript หนึ่ง equal sign คือ assignment operator ไม่ใช่ที่เราคุ้นใน math class
Two equal signs คือ equality operator อย่างเคร่งครัด เช็คแค่ว่าค่าเท่ากันหรือไม่ โดยพยายาม convert ค่าให้เป็น data type ของอีกฝั่ง เรียกว่า type coercion
console.log(8 == '8'); //true
คล้ายกัน ถ้าเห็น bang/exclamation point กับหนึ่ง equal sign ( != ) เรียกว่า inequality operator เปรียบเทียบสองค่า ดูว่า operands ไม่เท่ากันในตัวเลข ไม่เช็ค type
console.log(8 != '4'); //true
ในทางกลับกัน identity operator สาม equal signs ( === ) เช็ค type และ number ตอนเปรียบเทียบสองค่า
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
console.log(8 === '8'); //false console.log(8 === 8); //true
เหมือน inequality operator nonidentity operator ( !== ) เช็คว่า operands ไม่เท่ากันหรือไม่ นอกจากนี้เช็ค type ด้วย ถ้าเป็นจริง condition เป็น true คืนค่า true ถ้าไม่ คืนค่า false
console.log(8 !== '8'); //true console.log(8 !== 8); //false
Final Thoughts
Comparison และ equality operators สำคัญต่อการสร้าง logic ในการเขียนโปรแกรม เวลาเปรียบเทียบ left operand กับ right operand เราใช้ equality operators ดูว่าค่าเท่ากันใน type, ไม่ใน type, ใน type และ number, หรือไม่ใน type และ number นอกจากนี้ เราใช้ comparison operators ช่วย logic ที่จะ render user interface (UI) ตอนคุณรู้สึกสบายใจกับ operators เหล่านี้ ลองดู logical operators, ternary operator, และ bitwise operators!
Ready For More Tutorials on JavaScript?
Check these out!
JavaScript Ternary Operator: A Step-By-Step Guide
JavaScript Switch Case: A Step-By-Step Guide
JavaScript Syntax: A Guide for Beginners
