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