ตัวดำเนินการ ในภาษา 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 ในบทต่อไป จะเป็นเนื้อหาเพิ่มเติมเกี่ยวกับตัวดำเนินการ มันเป็นตัวดำเนินการที่สามารถช่วยอำนวยความสะดวกในการเขียนโปรแกรมให้กับเราได้