คอร์ส IT พื้นฐาน JavaScript 040_ตัวดำเนินการ

ตัวดำเนินการ JavaScript ใช้สำหรับดำเนินการทางคณิตศาสตร์ การเปรียบเทียบ การดำเนินการเชิงตรรกะ และอื่นๆ และส่งคืนผลลัพธ์

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

• +: บวก
• -: ลบ
• *: คูณ
• /: หาร
• %: หารเอาเศษ
• **: ยกกำลัง

ตัวอย่าง:

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // แสดงผล 7
5
console.log(a - b);  // แสดงผล 3
6
console.log(a * b);  // แสดงผล 10
7
console.log(a / b);  // แสดงผล 2.5
8
console.log(a % b);  // แสดงผล 1
9
console.log(a**b);  // แสดงผล 25

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

• =: กำหนดค่า
• +=: กำหนดค่าการบวก
• -=: กำหนดค่าการลบ
• *=: กำหนดค่าการคูณ
• /=: กำหนดค่าการหาร
• %=: กำหนดค่าการหารเอาเศษ
• **=: กำหนดค่าการยกกำลัง
• ??=: กำหนดค่าว่าง จะกำหนดค่าเฉพาะเมื่อค่าตัวแปรเป็น null หรือ undefined

ตัวอย่าง:

1
let x = 5;
2
x += 2;  // x = x + 2; แสดงผล 7
3
x -= 2;  // x = x - 2; แสดงผล 3
4
x *= 2;  // x = x * 2; แสดงผล 10
5
x /= 2;  // x = x / 2; แสดงผล 2.5
6
x %= 2;  // x = x % 2; แสดงผล 1
7
x **= 2;  // x = x ** 2; แสดงผล 25
8
x ??= 2;  // แสดงผล 5, เมื่อ x เป็น null หรือ undefined จะกำหนดค่าเป็น 2
9
console.log(x);

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

• ==: เท่ากัน (ชนิดของค่าจะถูกแปลงโดยอัตโนมัติ)
• ===: เท่ากันอย่างเคร่งครัด (ค่าและชนิดต้องเท่ากัน)
• !=: ไม่เท่ากัน
• !==: ไม่เท่ากันอย่างเคร่งครัด
• >: มากกว่า
• <: น้อยกว่า
• >=: มากกว่าหรือเท่ากับ
• <=: น้อยกว่าหรือเท่ากับ

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

ตัวอย่าง:

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // แสดงผล true, ค่าเท่ากัน
6
console.log(a === b);  // แสดงผล false, ชนิดไม่เท่ากัน
7
console.log(a != b);   // แสดงผล false, ค่าเท่ากัน
8
console.log(a !== b);  // แสดงผล true, ชนิดไม่เท่ากัน
9
console.log(a > c);  // แสดงผล false, 5 < 10
10
console.log(a < c);  // แสดงผล true, 5 < 10
11
console.log(a >= c);  // แสดงผล false, 5 <= 10
12
console.log(a <= c);  // แสดงผล true, 5 <= 10

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

ตัวดำเนินการเชิงตรรกะเมื่อประมวลผลตัวถูกดำเนินการ จะแปลงเป็นค่าบูลีนและส่งคืนค่าเดิมของตัวถูกดำเนินการนี้

&&: AND เชิงตรรกะ

ใช้เพื่อตรวจสอบว่าเงื่อนไขทั้งหมดเป็น true หรือไม่ หากเงื่อนไขทั้งหมดเป็น true ผลลัพธ์ของนิพจน์ทั้งหมดจะเป็น true มิฉะนั้นผลลัพธ์จะเป็น false การดำเนินการ AND จะค้นหา false ตัวแรกจากซ้ายไปขวาตามลำดับ หากพบ false จะหยุดการคำนวณและส่งคืนค่าเดิมของตัวถูกดำเนินการนี้ (การประเมินแบบลัดวงจร) หากไม่มี false จะส่งคืน true ตัวสุดท้าย

||: OR เชิงตรรกะ

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

!: NOT เชิงตรรกะ

ใช้เพื่อกลับค่าบูลีน หากค่าเป็น true ใช้ตัวดำเนินการ NOT เชิงตรรกะจะกลับเป็น false หากค่าเป็น false จะกลับเป็น true NOT เชิงตรรกะยังสามารถใช้แปลงค่าที่ไม่ใช่บูลีนเป็นค่าบูลีน มันจะแปลงค่าใดๆ ที่ไม่ใช่ null, undefined, 0, NaN, "" (สตริงว่าง) เป็น true ในขณะที่ค่าที่กล่าวถึงข้างต้นจะถูกแปลงเป็น false ทั้งหมด

ตัวอย่าง:

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // แสดงผล false
7
console.log(c && d);  // แสดงผล null
8
console.log(a || b);  // แสดงผล true
9
console.log(c || d);  // แสดงผล hello
10
console.log(!a);      // แสดงผล false
11
console.log(!d);      // แสดงผล true

ตัวดำเนินการเงื่อนไข (Ternary)

• condition ? expr1 : expr2: หากเงื่อนไขเป็นจริง จะส่งคืน expr1 มิฉะนั้นจะส่งคืน expr2

ตัวอย่าง:

1
let age = 18;
2
let status = (age >= 18) ? 'ผู้ใหญ่' : 'เด็ก';
3
console.log(status);  // แสดงผล 'ผู้ใหญ่'

ตัวดำเนินการรวมค่าว่าง

ตัวดำเนินการรวมค่าว่าง (Nullish Coalescing Operator) ใช้สำหรับจัดการค่าเริ่มต้น โดยทั่วไปใช้เพื่อให้แน่ใจว่าตัวแปรมีค่าที่ไม่เป็นค่าว่าง (ไม่ใช่ null และไม่ใช่ undefined) ไวยากรณ์ของตัวดำเนินการนี้คือ ??

เมื่อใช้ตัวดำเนินการรวมค่าว่าง มันจะส่งคืนตัวถูกดำเนินการที่กำหนดไว้ตัวแรก (ไม่ใช่ null และไม่ใช่ undefined) หากตัวถูกดำเนินการตัวแรกเป็น null หรือ undefined จะส่งคืนตัวถูกดำเนินการตัวที่สอง

ตัวอย่าง:

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // แสดงผล 0, เพราะ num ไม่เป็น null หรือ undefined
5

6
let user;
7
console.log(user ?? "นิรนาม"); // แสดงผล นิรนาม, เพราะ user ไม่ได้กำหนดค่า

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

• &: AND บิต
• |: OR บิต
• ^: XOR บิต
• ~: NOT บิต
• <<: เลื่อนซ้าย
• >>: เลื่อนขวา
• >>>: เลื่อนขวาไร้เครื่องหมาย

ตัวอย่าง:

1
let a = 5;  // เลขฐานสอง: 0101
2
let b = 3;  // เลขฐานสอง: 0011
3

4
console.log(a & b);   // แสดงผล 1 (AND บิต)
5
console.log(a | b);   // แสดงผล 7 (OR บิต)
6
console.log(a ^ b);   // แสดงผล 6 (XOR บิต)
7
console.log(~a);      // แสดงผล -6 (NOT บิต)
8
console.log(a << 1);  // แสดงผล 10 (เลื่อนซ้าย)
9
console.log(a >> 1);  // แสดงผล 2 (เลื่อนขวา)

ตัวดำเนินการอื่นๆ

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

ตัวอย่าง:

1
let str = 'Hello';
2
console.log(typeof str);  // แสดงผล 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // แสดงผล true

+ (บวก)

ใน JavaScript เครื่องหมายบวก + มีหลายวัตถุประสงค์ รวมถึงการดำเนินการทางคณิตศาสตร์ การต่อสตริง และการดำเนินการแบบตัวเดียว

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

ตัวอย่าง:

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // แสดงผล 8

หากทั้งสองเป็นตัวเลข + จะใช้สำหรับการบวกทางคณิตศาสตร์

การต่อสตริง

ตัวอย่าง:

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // แสดงผล 'Hello World'

หากตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นสตริง + จะทำการต่อสตริง

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

ตัวอย่าง:

1
let str = '42';
2
let num = +str;
3
console.log(num);  // แสดงผล 42

เมื่อใช้ + หน้าตัวถูกดำเนินการเดียว มันสามารถแปลงตัวถูกดำเนินการเป็นตัวเลข นี่คือฟังก์ชันของตัวดำเนินการบวกแบบตัวเดียว

การแปลงชนิด

ตัวอย่าง:

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // การแปลงชนิดโดยปริยาย (การบังคับแปลงชนิด)
4
console.log(result);  // แสดงผล '4210'

หากตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นสตริง + จะทำการแปลงชนิด แปลงตัวถูกดำเนินการอื่นเป็นสตริง แล้วทำการต่อสตริง

การเชื่อมต่ออาร์เรย์

ตัวอย่าง:

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // แสดงผล '1,2,34,5,6'

เมื่อตัวถูกดำเนินการเป็นอาร์เรย์ + จะแปลงอาร์เรย์เป็นสตริง แล้วทำการต่อสตริง

กรณีพิเศษ

ตัวอย่าง:

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // แสดงผล '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // แสดงผล '51'

specialResult1 เพราะสตริงปรากฏทางซ้ายสุดของ + ตัวเลขที่ตามมาจะถูกต่อเป็นสตริง specialResult2 เพราะสตริงปรากฏทางขวาสุดของ + ตัวเลขก่อนหน้าจะทำการคำนวณทางคณิตศาสตร์ก่อนแล้วจึงต่อ

- (ลบ)

ใน JavaScript เครื่องหมายลบ - เป็นตัวดำเนินการที่ใช้สำหรับการลบทางคณิตศาสตร์

การลบทางคณิตศาสตร์

ตัวอย่าง:

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // แสดงผล 2

หากทั้งสองเป็นตัวเลข - จะใช้สำหรับการลบทางคณิตศาสตร์

ตัวดำเนินการลบแบบตัวเดียว

ตัวอย่าง:

1
let num = 42;
2
let result = -num;
3
console.log(result);  // แสดงผล -42

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

การแปลงชนิด

ตัวอย่าง:

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // แสดงผล 32

หากตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นสตริง - จะทำการแปลงชนิด แปลงตัวถูกดำเนินการอื่นเป็นตัวเลข แล้วทำการลบทางคณิตศาสตร์

กรณีพิเศษ

ตัวอย่าง:

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // แสดงผล 8

ในกรณีพิเศษนี้ เพราะเนื้อหาในสตริงสามารถแปลงเป็นตัวเลขได้สำเร็จ - จะทำการลบทางคณิตศาสตร์

=、==、=== (กำหนดค่า, เท่ากันแบบหลวม, เท่ากันอย่างเคร่งครัด)

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

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

= ใช้เพื่อกำหนดค่าทางขวาให้กับตัวแปรทางซ้าย

ตัวอย่าง:

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // แสดงผล 5
4
console.log(y);  // แสดงผล 'Hello'

ในตัวอย่างนี้ = กำหนดค่าทางขวาให้กับตัวแปร x และ y ทางซ้าย

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

== และ === ใช้เพื่อเปรียบเทียบความเท่ากันของค่าสองค่า

ตัวอย่าง:

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // แสดงผล true
5
console.log(a === b);  // แสดงผล false

== เมื่อทำการเปรียบเทียบความเท่ากัน จะทำการแปลงชนิด null == undefined แสดงผล true === เมื่อทำการเปรียบเทียบความเท่ากัน ต้องการให้ค่าและชนิดเท่ากัน null === undefined แสดงผล false NaN ไม่เท่ากับค่าใดๆ รวมถึง NaN ตัวมันเอง

++、-- (เพิ่มค่า, ลดค่า)

ใน JavaScript การเพิ่มค่า (++) และการลดค่า (--) เป็นตัวดำเนินการที่ใช้สำหรับเพิ่มหรือลดค่าของตัวแปร

ตัวดำเนินการเพิ่มค่า (++)

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

ตัวอย่างการเพิ่มค่าแบบนำหน้า:

1
let a = 5;
2
// การเพิ่มค่าแบบนำหน้า เพิ่ม 1 ก่อน แล้วใช้ค่าใหม่
3
let b = ++a;
4
console.log(b);  // แสดงผล 6
5
console.log(a);  // แสดงผล 6

ในตัวอย่างนี้ a เพิ่มขึ้น 1 ก่อน แล้ว b ได้รับค่า a ใหม่ (6)

ตัวอย่างการเพิ่มค่าแบบต่อท้าย:

1
let x = 5;
2
// การเพิ่มค่าแบบต่อท้าย ใช้ค่าปัจจุบันก่อน แล้วจึงเพิ่ม 1
3
let y = x++;
4
console.log(y);  // แสดงผล 5
5
console.log(x);  // แสดงผล 6

ในตัวอย่างนี้ y ได้รับค่าปัจจุบันของ x (5) ก่อน แล้วค่าของ x เพิ่มขึ้น 1

ตัวดำเนินการลดค่า (—)

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

ตัวอย่างการลดค่าแบบนำหน้า:

1
let p = 10;
2
// การลดค่าแบบนำหน้า ลด 1 ก่อน แล้วใช้ค่าใหม่
3
let q = --p;
4
console.log(q);  // แสดงผล 9
5
console.log(p);  // แสดงผล 9

ในตัวอย่างนี้ p ลดลง 1 ก่อน แล้ว q ได้รับค่า p ใหม่ (9)

ตัวอย่างการลดค่าแบบต่อท้าย:

1
let m = 8;
2
// การลดค่าแบบต่อท้าย ใช้ค่าปัจจุบันก่อน แล้วจึงลด 1
3
let n = m--;
4
console.log(n);  // แสดงผล 8
5
console.log(m);  // แสดงผล 7

ในตัวอย่างนี้ n ได้รับค่าปัจจุบันของ m (8) ก่อน แล้วค่าของ m ลดลง 1

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence