ตัวดำเนินการ ในภาษา JavaScript

ตัวดำเนินการ (Operator) คือสัญลักษณ์ทางไวยากรณ์ของภาษาที่ใช้ในคำนวณ เปรียบเทียบ หรือดำเนินการกับข้อมูลเพื่อให้ได้ผลลัพธ์ใหม่ออกมา ตัวดำเนินการจะทำงานกับตัวถูกดำเนินการ (Operands) ซึ่งอาจมีตั้งแต่หนึ่งตัวหรือหลายตัวถูกดำเนินการได้ ในภาษา JavaScript นั้นมีตัวดำเนินการอยู่หลายประเภท และแต่ละประเภทมีหน้าที่การทำงานที่แตกต่างกัน ในบทนี้ เราจะแนะนำให้คุณรู้จักและใช้งานตัวดำเนินการประเภทต่างๆ ในภาษา JavaScript นี่เป็นเนื้อหาในบทนี้

  • ตัวดำเนินการกำหนดค่า
  • ตัวดำเนินการทางคณิตศาสตร์
  • ตัวดำเนินการเปรียบเทียบ
  • ตัวดำเนินการตรรกศาสตร์
  • ตัวดำเนินการระดับบิต
  • ลำดับความสำคัญของตัวดำเนินการ

ตัวดำเนินการกำหนดค่า (=)

ตัวดำเนินการกำหนดค่า (Assignment operator) คือตัวดำเนินการที่ใช้สำหรับกำหนดหรืออัพเดทค่าให้กับตัวแปรหรือค่าคงที่ คุณได้เห็นการใช้งานของมันมาบ้างแล้วในบทก่อนหน้า และนี่เป็นตัวอย่างอีกครั้ง

let n = 10;
n = 11;

ในตัวอย่าง เป็นการประกาศตัวแปร n และเราใช้ตัวดำเนินการกำหนดค่า = เพื่อกำหนดค่าให้กับตัวแปร จากนั้นเปลียนแปลงค่าในตัวแปรเป็นค่าใหม่ด้วยตัวดำเนินการกำหนดค่าเช่นเดิม

และนี่เป็นอีกตัวอย่างสำหรับการใช้ตัวดำเนินกำหนดค่าในการอัพเดทค่าและสร้าง Property ใหม่บนออบเจ็ค

let user = {
    name: "Metin"
};

user.id = 1;            // Create property and assign value
user.name = "New Name"; // Update value

ในตัวอย่าง เป็นการใช้งานตัวดำเนินการกำหนดค่าสำหรับอัพเดทค่าให้กับ Property ของออบเจ็ค ถ้าหากออบเจ็คยังไม่มี Property อยู่จะเป็นการสร้าง Property ใหม่แทน ไม่เช่นนั้นจะอัพเดทค่าเดิม

นอกจากนี้ ตัวดำเนินการกำหนดค่ายังใช้สำหรับกำหนดค่าเริ่มต้นให้กับพารามิเตอร์ของฟังก์ชัน ในตัวอย่างนี้ เป็นการกำหนดค่าเริ่มต้นให้กับพารามิเตอร์ name ถ้าหากเราเรียกใช้ฟังก์ชันโดยที่ไม่ส่งพารามิเตอร์มา ค่าในตัวแปร name จะมีค่าเป็นแทน "Metin"

function sayHi(name = "Metin") {
    console.log("Hi " + name + "!");
}

สำหรับการกำหนดค่าเริ่มต้นให้กับฟังก์ชันนั้น คุณจะได้เรียนรู้เกี่ยวกับมันอีกครั้งในบทของฟังก์ชัน

ตัวดำเนินการทางคณิตศาสตร์

ตัวดำเนินการทางคณิตศาสตร์ (Arithmetic operators) คือตัวดำเนินการที่ใช้ในการคำนวณทางคณิตศาสตร์ ยกตัวอย่างเช่น การบวก การลบ การคูณ และการหาร แน่นอนว่ามันเป็นตัวดำเนินการพื้นฐานที่เราน่าจะคุ้นเคยกันดี และการใช้งานของมันนั้นก็เรียบง่ายเหมือนอย่างที่เคย

นี่เป็นตารางของตัวดำเนินการทางคณิตศาสตร์ในภาษา JavaScript

สัญลักษณ์ ตัวดำเนินการ ตัวอย่าง
+ การบวก a + b
- การลบ a - b
* การคูณ a * b
/ การหาร a / b
% การหารเอาเศษ a % b
** การยกกำลัง a ** b

ตัวดำเนินการบวก ลบ คูณ และหารนั้นเราคุ้นเคยกับมันเป็นอย่างดี ส่วนสองตัวดำเนินสุดท้ายนั้นถูกเพิ่มเข้ามาในภาษา JavaScript เพื่อช่วยอำนวยความสะดวกในการเขียนโปรแกรม มันใช้สำหรับหารเอาเศษ (%) และยกกำลัง (**) ตามลำดับ เรามาดูตัวอย่างการใช้งานตัวดำเนินการชุดแรกก่อน

let a = 5;
let b = 3;

console.log('a + b = ' + (a + b));  // 8
console.log('a - b = ' + (a - b));  // 2
console.log('a * b = ' + (a * b));  // 15
console.log('a / b = ' + (a / b));  // 1.6666666666666667

และอย่างที่คุณเห็น ผลลัพธ์นั้นเป็นไปตามที่เราคาดเอาไว้ เราได้นำค่าในตัวแปร a และ b มาทำการบวก ลบ คูณ หารกัน และแสดงผลลัพธ์ออกทางหน้าจอ ต่อไปมาดูตัวอย่างสองตัวดำเนินการที่เหลือ

console.log(5 % 3);     // 3
console.log(9 % 4);     // 1

ตัวดำเนินการหารเอาเศษ (%) ส่งค่ากลับเป็นเศษจากการหาร ยกตัวอย่าเช่น 5 หาร 3 เท่ากับ 1 เศษ 2 ดังนั้น 2 จึงเป็นคำตอบ

console.log(2 ** 3);    // 8
console.log(6 ** 2);    // 36

ตัวดำเนินการยกกำลัง (**) เป็นการนำตัวเลขด้านหน้าคูณกันเท่ากับตามจำนวนครั้งของตัวเลขด้านหลัง หรือเรียกสั้นๆ ว่าการยกกำลังนั่นเอง ดังนั้น 2 ** 3 หมายถึง 2 ยกกำลังด้วย 3 หรือเขียนได้เป็น 2 * 2 * 2 ซึ่งมีค่าเท่ากับ 8

ตัวดำเนินการสามารถใช้พร้อมกันได้ ยกตัวอย่างเช่น เพื่อหาค่าเฉลี่ยของตัวเลขในตัวแปรทั้งสามตัว เราต้องนำค่าในตัวเลขเหล่านั้นมาบวกกันแล้วหารด้วย 3 นี่เป็นตัวอย่าง

let a = 5, b = 3, c = 10;
let avg = (a + b + c) / 3;
console.log("Average is " + avg);   // 6

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

ตัวดำเนินการเปรียบเทียบ

ตัวดำเนินการเปรียบเทียบ (Comparison operators) คือตัวดำเนินการที่ใช้สำหรับเปรียบระหว่างค่าสองค่า เช่น เพื่อเปรียบเทียบความเท่ากัน น้อยกว่า หรือมากกว่า ผลลัพธ์ของตัวดำเนินการเปรียบเทียบนั้นจะเป็น Boolean เพื่อบ่งบอกว่าผลการเปรียบเป็นจริงหรือไม่

นี่เป็นตารางของตัวดำเนินการเปรียบเทียบในภาษา JavaScript

สัญลักษณ์ ตัวดำเนินการ ตัวอย่าง
== เท่ากับ a == b
!= ไม่เท่ากับ a != b
< น้อยกว่า a < b
<= น้อยกว่าหรือเท่ากับ a <= b
> มากกว่า a > b
>= มากกว่าหรือเท่ากับ a >= b

เราใช้ตัวดำเนินการเปรียบเทียบเมื่อเราต้องการทราบว่าค่าทางด้านซ้ายของตัวดำเนินการ เท่ากับ ไม่เท่ากับ น้อยกว่า หรือมากกว่า ค่าทางด้านขวาของตัวดำเนินการหรือไม่ ยกตัวอย่างเช่น

console.log('3 equals 3: ', 3 == 3);    //true
console.log('5 not equal 6: ', 5 != 6); // false
console.log('1 less than 2: ', 1 < 2);  // true
console.log('100 greater than 200: ', 100 > 200);  // false

เนื่องจากตัวดำเนินการเปรียบเทียบนั้นส่งค่ากลับเป็น Boolean ดังนั้นเราสามารถใช้มันกับคำสั่งตรวจสอบเงื่อนไข if หรือคำสั่งอื่นๆ ได้ ยกตัวอย่างเช่น

let n = 3;
if (n > 0) {
    console.log("n is positive");
} else if (n < 0) {
    console.log("n is negative");
} else {
    console.log("n is zero");
}
// Result: n is positive

ในตัวอย่าง เป็นโปรแกรมเพื่อตรวจสอบว่าตัวเลขในตัวแปรเป็นจำนวนเต็มบวก เต็มลบ หรือศูนย์ โดยการใช้ตัวดำเนินการเปรียบเทีียบร่วมกับคำสั่ัง if โปรแกรมจะทำงานในบล็อคของเงื่อนไข n > 0 เนื่องจากค่าในตัวเลขมากกว่า 0 ซึ่งทำให้เงื่อนไขเป็นจริง

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

// Maybe from user input
let username = "metin";
let password = "1234";

if (username == "metin" && password == "1234") {
    console.log("Logged in as Metin.");
} else {
    console.log("Invalid username or password.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Logged in as Metin.

ในตัวอย่าง เป็นโปรแกรมจำลองการเข้าสู่ระบบของเว็บไซต์ เรามีตัวแปร username และ password สำหรับเก็บชื่อผู้ใช้และรหัสผ่านตามลำดับ ซึ่งในความเป็นจริงค่าเหล่านี้ควรรับมาจากผู้ใช้ หลังจากนั้นเราใช้ตัวดำเนินการเปรียบเทียบเท่ากับ == เพื่อตรวจสอบว่าข้อมูลถูกต้องหรือไม่ ซึ่งแน่นอนว่ามันเท่ากัน

if (username == "metin" && password == "1234") {
...

เราได้ใช้ตัวดำเนินการ && เพื่อเชื่อม Expression ทั้งสองเข้าด้วยกัน ดังนั้นทั้งชื่อผู้ใช้และรหัสผ่านต้องถูกต้องคำสั่งใน if จึงจะทำงาน

ในตัวอย่างก่อนหน้า ตัวดำเนินการเปรียบเทียบเท่ากับ == และไม่เท่ากับ != นั้นเปรียบเทียบโดยข้ามการตรวจสอบประเภทข้อมูลไป นั่นหมายว่าค่าตัวเลข 1 และข้อความ "1" นั้นมีค่าเท่ากัน ดังนั้นในภาษา JavaScript มีตัวดำเนินการเปรียบเทียบอีกแบบที่ให้เราสามารถเปรียบเทียบความเท่ากันทั้งค่าและประเภทข้อมูลได้ นี่เป็นรายการของตัวดำเนินการดังกล่าว

สัญลักษณ์ ตัวดำเนินการ ตัวอย่าง
=== เท่ากันทั้งค่าประเภทข้อมูล a === b
!== ไม่เท่ากันทั้งค่าประเภทข้อมูล a !== b

ในตัวอย่างก่อนหน้า ตัวดำเนินการ == และ != ใช้เปรียบเทียบข้อมูลโดยที่ไม่สนใจประเภทข้อมูล ยกตัวอย่างเช่น

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

ในตัวอย่าง เมื่อเราเปรียบเทียบค่าของตัวเลข 3 และค่าของ String ที่มีค่าเป็น "3" ด้วยตัวดำเนินการเท่ากับ == นั้นจะเห็นว่ามันเท่ากัน นั่นเป็นเพราะว่าภาษา JavaScript ได้แปลงค่าของ String เป็นตัวเลขก่อนนำไปเปรียบเทียบนั่นเอง เช่นเดียวกับ 10 != "10" เนื่องจากว่าทั้งสองค่าเท่ากัน ดังนั้นผลลัพธ์ที่ได้จึงเป็น false

ตอนนี้เรามาเปลี่ยนเป็นการใช้งานตัวดำเนินการที่สามารถตรวจสอบประเภทของข้อมูลได้ด้วยแทน

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

และเมื่อเราเปลี่ยนมาใช้ตัวดำเนินการ === เพื่อเปรียบเทียบค่า จะเห็นว่าผลลัพธ์ในการเปรียบเทียบ 3 === "3" จะเป็น false ถึงแม้ว่าค่าของตัวเลขที่ปรากฏใน Literal จะเท่ากัน แต่ประเภทข้อมูลไม่ตรงกันนั่นเอง และ 10 !== "10" ได้เป็นผลลัพธ์เป็น true เพราะประเภทข้อมูลของทั้งสองไม่ตรงกันตั้งแต่แรก

ตัวดำเนินการตรรกศาสตร์

ตัวดำเนินการตรรกศาสตร์ (Logical operators) คือตัวดำเนินการที่ใช้สำหรับรวมสอง Expression เข้าด้วยกันโดยการใช้กฏของตรรกศาสตร์ แม้ว่าตัวดำเนินการตรรกศาสตร์ในภาษา JavaScript จะทำงานกับข้อมูลทุกประเภท แต่เพื่อให้ง่ายต่อการทำความเข้าใจ ในบทนี้เราจะพูดถึงการทำงานของตัวดำเนินการตรรกศาสตร์กับค่า Boolean และนี่เป็นการทำงานของตัวดำเนินการแต่ละตัว

  • ตัวดำเนินการ AND: ถ้าหากทั้งสอง Expression เป็นจริงจะได้ผลลัพธ์เป็น true ไม่เช่นนั้น false
  • ตัวดำเนินการ OR: ถ้าหากมีอย่างน้อยหนึ่ง Expression เป็นจริงจะได้ผลลัพธ์เป็น true ไม่เช่นนั้น false
  • ตัวดำเนินการ NOT: กลับค่า Expression จาก true เป็น false และในทางกลับกัน

และนี่เป็นตารางของตัวดำเนินการตรรกศาสตร์ในภาษา JavaScript

สัญลักษณ์ ตัวดำเนินการ ตัวอย่าง
&& Logical AND a && b
|| Logical OR a || b
! Logical NOT !a

สำหรับตัวดำเนินการ AND และ OR กำหนดให้ a และ b เป็น Expression ของตัวดำเนินการ โดยทั่วไปแล้ว Expression จะเป็นค่าของ Boolean ที่ได้จาก Boolean literal หรือจากผลลัพธ์การทำงานของตัวดำเนินการเปรียบเทียบก็ได้ แต่ในความเป็นจริงแล้ว ทุกค่าในภาษา JavaScript สามารถใช้เป็น Expression ได้

ก่อนที่เราจะไปดูตัวอย่าง มาดูผลลัพธ์ที่เป็นไปได้สำหรับการใช้งานตัวดำเนินการ AND และ OR

การทำงานของตัวดำเนินการ AND

กำหนดให้ a และ b เป็น Expression ที่ใช้กับตัวดำเนินการ AND ในรูปแบบ a && b ผลลัพธ์การทำงานจะเป็น true เมื่อทั้งสองค่าเป็นจริง ไม่เช่นนั้น false

a b a && b
true true true
true false false
false true false
false false false

การทำงานของตัวดำเนินการ OR

กำหนดให้ a และ b เป็น Expression ที่ใช้กับตัวดำเนินการในรูปแบบ a || b ผลลัพธ์การทำงานจะเป็น true เมื่อมีอย่างน้อยหนึ่งค่าที่เป็นจริง ไม่เช่นนั้น false

a b a || b
true true true
true false true
false true true
false false false

ต่อไปมาดูตัวอย่างการใช้งานตัวดำเนินการ AND (&&) เราจะใช้ตัวอย่างโปรแกรมจำลองการเข้าสู่ระบบจากตัวอย่างก่อนหน้า

let username = "metin";
let password = "1234";

if (username == "metin" && password == "secret") {
    console.log("Logged in as Metin.");
} else {
    console.log("Invalid username or password.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Invalid username or password.

โปรแกรมแจ้งว่าชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง เนื่องจากผลลัพธ์การทำงานของตัวดำเนินการ AND เป็น false

if (username == "metin" && password == "secret") {
...

ตัวดำเนินการ AND ต้องการ Expression ทั้งสองเป็นจริงจึงจะได้ผลลัพธ์เป็น true เนื่องจากรหัสผ่านที่เก็บในตัวแปร password นั้นไม่เท่ากับ "secret" ดังนั้นผลลัพธ์ของ Expression นี้ไม่เป็นจริง ซึ่งทำให้ true && false มีค่าเป็น false นั่นเอง

ต่อไปมาดูตัวอย่างการใช้งานตัวดำเนินการ OR เราจะเขียนโปรแกรมเพื่อช่วยตัดสินใจว่าควรจะซื้อคอมพิวเตอร์หรือไม่ ซึ่งเราจะซื้อก็เมื่อราคาของมันน้อยกว่า 100 เหรียญ หรือมีส่วนลด 60% ขึ้นไป ถ้าหากเงื่อนไขอย่างใดอย่างหนึ่งเป็นจริง เราจะซื้อมัน ไม่เช่นนั้นเราไม่สนใจ

let price = 299;
let discount = 60;

console.log("Magic Computer");
console.log("Price: " + price + " USD");
console.log("Discount: " + discount + "%");

if (price < 100 || discount >= 50) {
    console.log("I buy it.");
} else {
    console.log("I'm not interested.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม โปรแกรมทำงานในบล็อคของคำสั่ง if เนื่องจากเงื่อนไขเป็นจริง

Magic Computer
Price: 299 USD
Discount: 60%
I buy it.

ในตัวอย่าง เรามีราคาของคอมพิวเตอร์เก็บไว้ในตัวแปร price และส่วนลดของสิ้นค้าที่มีหน่วยเป็นเปอร์เซนต์เก็บในตัวแปร discount จากนั้นเราได้นำมาเปรียบเทียบด้วยตัวดำเนินการเปรียบเทียบ และรวมผลลัพธ์ของการเปรียบเทียบด้วยตัวดำเนินการ OR

if (price < 100 || discount >= 50) { // false || true => true
...

ผลของการเปรียบเทียบราคา price < 100 นั้นไม่เป็นจริง จากนั้นผลของการเปรียบเทียบส่วนลด discount >= 50 เป็นจริง และเมื่อนำมารวมกับตัวดำเนินการ OR เราจะได้ผลลัพธ์เป็นจริง เพราะว่ามีอย่างน้อยหนึ่งค่าเป็นจริงนั่นเอง หรือ false || true ได้เป็น true

ต่อไปเป็นตัวอย่างการใช้งานตัวดำเนินการ NOT ตัวดำเนินการ NOT ใช้กลับ Expression จาก true เป็น false และจาก false เป็น true

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

เรามักจะใช้มันสำหรับกลับค่าของ Boolean เพื่อตรวจสอบว่าเงื่อนไขหรือค่าในตัวแปรเป็น false หรือไม่ ยกตัวอย่างเช่น

let loggedIn = false;
if (!loggedIn) {
    console.log("Not logged in. Please login to continue.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Not logged in. Please login to continue.

ในตัวอย่าง เราต้องการตรวจสอบว่าผู้ใช้ไม่เข้าสู่ระบบใช่หรือไม่ ในตอนแรกค่าในตัวแปร loggedIn มีค่าเป็น false ดังนั้นการใช้ตัวดำเนินการ NOT เพื่อกลับค่าทำให้มันเป็นจริง และโปรแกรมทำงานในบล็อคของคำสั่ง if

ถ้าหากไม่ใช้ตัวดำเนินการ NOT เราต้องจะตรวจสอบค่าของในตัวแปรด้วยตัวดำเนินการเปรียบเทียบ == ว่าเท่ากับ false หรือไม่ ยกตัวอย่างเช่น

if (loggedIn == false) {
...

ซึ่งแน่นอนว่าเราสามารทำแบบนี้ได้ แต่มันทำให้โค้ดของเราไม่กระซับ เนื่องจากว่าคำสั่ง if นั้นทำงานกับ Boolean อยู่แล้ว ดังนั้นการใช้ตัวดำเนินการ NOT จึงเป็นวิธีที่นิยมใช้กัน

หรืออีกวิธีหนึ่งเพื่อเปรียบเทียบตัวแปรกับ false เราสามารถประกาศตัวแปรโดยใช้ชื่อในความหมายที่ตรงกันข้ามได้ ยกตัวอย่างเช่น

let notLoggedIn = true;
if (notLoggedIn) {
    console.log("Not logged in. Please login to continue.");
}

มันได้ผลเช่นเดียวกัน แต่จะเห็นว่าเราต้องตั้งชื่อตัวแปรในความความหมายที่ตรงกันข้าม ซึ่งนี่จะทำให้โค้ดอ่านและเข้าใจได้ยาก และมันไม่ใช่วิธีในการเขียนที่ดี เนื่องจาก Boolean นั้นถูกออกแบบมาให้เก็บค่า true สำหรับสิ่งที่มีค่าในความหมายเชิงบวก เช่น ใช่ โอเค ถูกต้อง เป็นต้น แต่ความหมายชื่อตัวแปรของเราคือ ไม่เข้าสู่ระบบ ซึ่งเป็นค่าในเชิงลบ

ตัวดำเนินการระดับบิต

ตัวดำเนินการระดับบิต (Bitwise operators) คือตัวดำเนินการที่ดำเนินการในระบิตของข้อมูล โดยทั่วไปแล้วตัวดำเนินการประเภทนี้มักจะใช้กับการเขียนโปรแกรมในระดับต่ำ (Low level) เนื่องจากภาษา JavaScript นั้นเป็นภาษาเขียนโปรแกรมระดับสูงดังนั้นเราจึงไม่ค่อยได้ใช้มัน นี่เป็นตัวอย่างการใช้งานตัวดำเนินการระดับบิตในภาษา JavaScript

console.log(3 & 10);    // 2
console.log(3 | 10);    // 11

ในตัวอย่าง เราได้ใช้ตัวดำเนินการระดับบิตเพื่อดำเนินการกับตัวเลขจำนวนเต็มสองตัวเพื่อให้ได้ค่าใหม่ ผลลัพธ์ของการทำงานอาจทำให้คุณสงสัย แต่นั่นเป็นการใช้งานพื้นฐานของมัน

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับตัวดำเนินระดับบิตในภาษา JavaScript คุณสามารถเรียนรู้ได้ที่ บทตัวดำเนินการระดับบิต ซึ่งจะอธิบายรายละเอียดและการใช้งานทั้งหมดที่คุณควรรู้

ลำดับความสำคัญของตัวดำเนินการ

ลำดับความสำคัญของตัวดำเนินการ (Operator precedence) คือการกำหนดความสำคัญการทำงานของตัวดำเนินการเมื่อโปรแกรมพบกับตัวดำเนินการมากกว่าหนึ่งตัวในหนึ่งคำสั่งหรือ Expression นั่นทำให้ตัวดำเนินการที่มีความสำคัญมากกว่าจะทำงานก่อนตัวดำเนินที่มีความสำคัญน้อยกว่าเสมอ ยกตัวอย่างเช่น

console.log(1 + 2 * 3);

คุณสามารถเดาได้หรือไม่ว่าคำตอบคืออะไร มันคือ 9 หรือ 7 กันแน่ และนี่เป็นผลลัพธ์การทำงานของโปรแกรม

7

คำตอบคือ 7 นั่นเป็นเพราะว่าตัวดำเนินการคูณ * มีลำดับความสำคัญมากกว่าตัวดำเนินการบวก + ดังนั้นลำดับของการคำนวณจะเป็น 1 + (2 * 3)

แล้วถ้าหากเราต้องการให้โปรแกรมทำการบวกเลขก่อนละ เราจะทำอย่างไรได้บ้าง แน่นอนคุณสามารถทำได้โดยใส่วงเล็บให้กับ Expression ที่ต้องการให้ทำงานก่อน นี่เป็นตัวอย่าง

console.log((1 + 2) * 3);   // 9

และอย่างที่คุณเห็น วงเล็บนั้นมีความสำคัญมากที่สุด ดังนั้นโปรแกรมจะทำในวงเล็บก่อนเสมอ ซึ่งตอนนี้ผลลัพธ์ที่ได้จะเป็น 9

ตัวดำเนินการทางคณิตศาสตร์นั้นมีลำดับความสำคัญมากกว่าตัวดำเนินการเปรียบเทียบเสมอ นี่เป็นโปรแกรมในการเปรียบเทียบว่าพื้นที่ของสี่เหลี่ยมน้อยกว่าพื้นที่ของวงกลมหรือไม่

let rect = { width: 3, height: 5 };
let radius = 6;
let r = rect.width * rect.height < Math.PI * radius ** 2;
console.log(r); // true

ในตัวอย่าง โปรแกรมจะคำนวณ Expression ของการคูณทางด้านซ้ายก่อน (rect.width * rect.height) ตามด้วยการคูณและยกกำลังทางด้านขวา (Math.PI * radius ** 2) จากนั้นนำผลลัพธ์ของ Expression ทั้งสองข้างมาเปรียบเทียบกันด้วยตัวดำเนินการ < และได้ผลลัพธ์เป็นจริง

และตัวดำเนินการเปรียบเทียบมีลำดับความสำคัญมากกว่าตัวดำเนินการตรรกศาสตร์ AND และ OR เสมอ นี่เป็นตัวอย่าง

// Maybe provided by user
let username = "metin";
let password = "1234";

if (username == "metin" && password == "1234") {
    console.log("Welcome Metin!");
} else {
    console.log("Invalid username or password.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Welcome Metin

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

นี่เป็นเพียงการแนะนำลำดับความสำคัญของตัวดำเนินการในเบื้องต้นเท่านั้น ในภาษา JavaScript นั้นทุกตัวดำเนินการมีลำดับความสำคัญของมัน คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับลำดับความสำคัญของตัวดำเนินการในภาษา JavaScript ได้ที่ MDN Operator precedence

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับตัวดำเนินการพื้นฐานในภาษา JavaScript ในบทต่อไป จะเป็นเนื้อหาเพิ่มเติมเกี่ยวกับตัวดำเนินการ มันเป็นตัวดำเนินการที่สามารถช่วยอำนวยความสะดวกในการเขียนโปรแกรมให้กับเราได้