Operators

#HelloFrontend #HelloErmine #HelloWorld2021

Operator คืออะไร ?

คือ ตัวดำเนินการที่จะใช้ร่วมกับตัวถูกดำเนินการ (operand) ตั้งแต่ 1 ตัวขึ้นไป แล้วให้ผลลัพธ์ออกมา

Arithmetic operators

ใช้งานเหมือนกับการดำนินการทางคณิตศาสตร์ ยกเว้น + ที่สามารถใช้ในการต่อ string เข้าหากันได้

let x = 5;
let y = 10;
let hello = "Hello, ";
console.log(x + y); // 15
console.log(y - x); // 5
console.log(x * y); // 50
console.log(y / x); // 2
console.log(hello + "World"); // Hello, World

Relational operators

คือ ตัวดำเนินการที่จะให้ผลลัพธ์เป็นค่า boolean โดยขึ้นอยู่กับผลการเปรียบเทียบระหว่างสองค่า

console.log(5 < 10);   // true
console.log(10 <= 10); // true
console.log(5 > 10);   // false
console.log(5 >= 10);  // false

Equality operators

คือ ตัวดำเนินการที่จะให้ผลลัพธ์เป็นค่า boolean โดยขึ้นอยู่กับความเท่ากันระหว่างสองค่า

1. เปรียบเทียบแบบแปลง type ให้ด้วย

== ใช้ตรวจสอบว่าทั้งสองค่าเท่ากัน โดยจะพยายามแปลงค่าให้มี type เหมือนกันก่อนการเปรียบเทียบ

console.log(10 == 10);   // true
console.log(10 == "10"); // true
console.log(0 == false); // true
console.log(1 == true);  // true

!= ใช้ตรวจสอบว่าทั้งสองค่าไม่เท่ากัน โดยจะพยายามแปลงค่าให้มี type เหมือนกันก่อนการเปรียบเทียบ (เป็นนิเสธของ ==)

console.log(10 != 10);   // false
console.log(10 != "10"); // false
console.log(0 != false); // false
console.log(1 != true);  // false

การแปลง type ของ == และ !=

• ถ้ามีค่า boolean : แปลงค่า boolean เป็น number ก่อน

  • true = 1

  • false = 0

• ถ้าเทียบค่า number กับ string : พยายามแปลงค่า string ให้เป็น number ก่อน เช่น

  • "10" ถูกแปลงเป็น 10

  • “” หรือ "0" ถูกแปลงเป็น 0

  • "-10" ถูกแปลงเป็น -10

2. เปรียบเทียบแบบไม่แปลง type ให้ด้วย

=== ใช้ตรวจสอบว่าทั้งสองค่ามี type และค่าเหมือนกัน

console.log(10 === 10);   // true
console.log(10 === "10"); // false
console.log(0 === false); // false
console.log(1 === true);  // false

!== ใช้ตรวจสอบว่าทั้งสองค่ามี type หรือค่าต่างกัน (เป็นนิเสธของ ===)

console.log(10 !== 10);   // false
console.log(10 !== "10"); // true
console.log(0 !== false); // true
console.log(1 !== true);  // true

ควรใช้ === และ !== เพื่อจะได้มั่นใจว่าค่าที่ถูกนำมาเปรียบเทียบเป็น type ที่เราต้องการจริง ๆ

Logical operators

คือ ตัวดำเนินการที่ผลลัพธ์จะขึ้นอยู่กับค่าความจริงของตัวที่ถูกดำเนินการทั้งสองตัว

• ! หมายถึง NOT (นิเสธ)

• && หมายถึง AND (และ)

• || หมายถึง OR (หรือ)

1. เมื่อใช้กับค่า boolean

ทั้งสามตัวจะให้ผลลัพธ์เป็นค่า boolean

// !
console.log(!true);  // false
console.log(!false); // true
// &&
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false
// ||
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

2. เมื่อใช้กับค่าที่ไม่ใช่ boolean

• ! จะให้ผลลัพธ์เป็นค่า boolean

• && และ || จะให้ผลลัพธ์เป็นค่าใดค่าหนึ่งของตัวที่ถูกดำเนินการทั้งสองตัว

ค่าความจริงของค่าที่ไม่ใช่ boolean

• ค่า undefined, null, 0, “” และ NaN จะถูกมองเป็นค่าเท็จ (falsy)

• ค่านอกเหนือจากนั้นทั้งหมดจะถูกมองเป็นค่าจริง (truthy)

a && b จะให้ผลลัพธ์ได้ 2 แบบ

• ถ้า a เป็นจริง จะได้ผลลัพธ์เป็น b

• ถ้า a เป็นเท็จ จะได้ผลลัพธ์เป็น a

console.log("Cat" && "Dog"); // Dog  (true && true)
console.log("Cat" && 0);     // 0    (true && false)
console.log(0 && "Cat");     // 0    (false && true)
console.log(0 && null);      // 0    (false && false)

a || b จะให้ผลลัพธ์ได้ 2 แบบ

• ถ้า a เป็นจริง จะได้ผลลัพธ์เป็น a

• ถ้า a เป็นเท็จ จะได้ผลลัพธ์เป็น b

console.log("Cat" || "Dog"); // Cat  (true || true)
console.log("Cat" || 0);     // Cat  (true || false)
console.log(0 || "Cat");     // Cat  (false || true)
console.log(0 || null);      // null (false || false)

Assignment operators

เป็นการกำหนดค่าลงไปในตัวแปรโดยจะนำค่าจากฝั่งขวาเข้ามาใส่ในตัวแปรฝั่งซ้าย

let x = 10;
x = x + 5;      // Assignment operator
console.log(x); // 15

จากตัวอย่างเรากำหนดค่า x ไว้เท่ากับ 10 แล้วใช้ assignment operator เพื่อกำหนดให้ตัวแปร x มีค่าเท่ากับ x + 5 ผลลัพธ์ที่ออกมาก็จะได้เท่ากับ 15

การเขียนแบบ shorthand

เราสามารถใช้ assignment operator ร่วมกับ operator แบบอื่นได้ เช่น

let x = 10;
x += 5;         // Shorthand assignment
console.log(x); // 15

ศึกษาการเขียนแบบ shorthand เพิ่มเติมได้ที่ https://www.w3schools.com/js/js_assignment.asp

Increment and decrement operators

คือ ตัวดำเนินการที่ดำเนินการกับตัวแปรเดียว ซึ่งจะแยกออกเป็น prefix mode และ postfix mode

1. prefix mode (++x, --x)

รูปแบบนี้โปรแกรมจะทำงานโดยการบวกหรือลบค่า x ด้วย 1 ก่อนถูกนำไปใช้

let x = 10;
let z = ++x;
console.log(x); // 11
console.log(z); // 11

2. postfix mode (x++, x--)

รูปแบบนี้โปรแกรมจะทำงานโดยนำค่า x ตัวเดิมไปใช้ก่อนแล้วจึงบวกหรือลบด้วย 1 ทีหลัง

let x = 10;
let z = x++;
console.log(x); // 11
console.log(z); // 10

แหล่งอ้างอิง 📑

Expressions and operators - JavaScript | MDN

Equality (==) - JavaScript | MDN

ECMAScript Language Specification - ECMA-262 Edition 5.1

JavaScript Assignment