Guest Adventurer 🥉 Lv.1
🪙 50
🔷 10
← กลับคลังเนื้อหา
Article · programming

JavaScript พื้นฐาน EP. 3: ตัวดำเนินการและนิพจน์

JavaScript

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

EP. 3: ตัวดำเนินการและนิพจน์ใน JavaScript

จาก EP. 2 เราได้เรียนรู้วิธีเก็บข้อมูลด้วยตัวแปรและชนิดข้อมูลแล้ว ในตอนนี้เราจะนำข้อมูลเหล่านั้นมาคำนวณ เปรียบเทียบ และตรวจสอบเงื่อนไขผ่านตัวดำเนินการ (Operators) ซึ่งเป็นเครื่องมือสำคัญที่ทำให้โปรแกรมสามารถหาผลลัพธ์จากข้อมูลได้ เช่น คำนวณราคาสินค้า ตรวจสอบคะแนนสอบ หรือพิจารณาว่าผู้ใช้มีสิทธิ์ดำเนินการบางอย่างหรือไม่
เป้าหมายการเรียนรู้เมื่อเรียนจบ คุณจะสามารถใช้ตัวดำเนินการทางคณิตศาสตร์ การกำหนดค่า การเปรียบเทียบ และตัวดำเนินการตรรกะ รวมถึงอธิบายความแตกต่างระหว่าง == กับ === และนำไปสร้างเงื่อนไขพื้นฐานได้

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

ตัวดำเนินการทางคณิตศาสตร์ใช้คำนวณตัวเลข โดยเครื่องหมายพื้นฐานที่ควรรู้จัก ได้แก่ + สำหรับบวก - สำหรับลบ * สำหรับคูณ / สำหรับหาร % สำหรับหาเศษจากการหาร และ ** สำหรับยกกำลัง
ตัวดำเนินการความหมายตัวอย่างผลลัพธ์
+บวก10 + 313
-ลบ10 - 37
*คูณ10 * 330
/หาร10 / 42.5
%หาเศษจากการหาร10 % 42
**ยกกำลัง2 ** 38
const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a ** b);

const isEven = 12 % 2 === 0;
console.log('12 เป็นเลขคู่หรือไม่:', isEven);
เครื่องหมาย % มีประโยชน์มากเมื่อต้องตรวจสอบเลขคู่และเลขคี่ หากนำจำนวนเต็มหารด้วย 2 แล้วเหลือเศษ 0 แสดงว่าเป็นเลขคู่ เช่น 12 % 2 === 0 ส่วน 13 % 2 จะได้ 1 จึงเป็นเลขคี่

2. ลำดับการคำนวณและการใช้วงเล็บ

JavaScript มีกฎลำดับความสำคัญของตัวดำเนินการ เช่น การคูณและการหารจะทำก่อนการบวกและการลบในกรณีที่ไม่มีวงเล็บกำหนดลำดับใหม่ หากต้องการให้โปรแกรมคำนวณส่วนใดก่อน ควรใช้วงเล็บเพื่อทำให้โค้ดชัดเจนและลดความผิดพลาด
const result1 = 2 + 3 * 4;
const result2 = (2 + 3) * 4;

console.log(result1);
console.log(result2);

const subtotal = 500;
const discount = 100;
const quantity = 2;
const total = (subtotal - discount) * quantity;

console.log('ยอดสุทธิ:', total);
จำง่าย ๆ2 + 3 * 4 ได้ 14 แต่ (2 + 3) * 4 ได้ 20 เพราะวงเล็บเปลี่ยนลำดับการคำนวณ ควรใช้วงเล็บเมื่อสูตรมีหลายขั้นตอนหรืออาจทำให้ผู้อ่านตีความผิด

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

เครื่องหมาย = ใช้กำหนดค่าให้ตัวแปร ไม่ใช่เครื่องหมายตรวจสอบว่าค่าสองด้านเท่ากัน นอกจากนี้ยังมีรูปแบบย่อ เช่น +=, -=, *= และ /= ซึ่งช่วยปรับค่าตัวแปรโดยอ้างอิงค่าปัจจุบัน
let score = 10;

score += 5;
console.log(score);

score -= 3;
console.log(score);

score *= 2;
console.log(score);

score /= 4;
console.log(score);

let count = 0;
count++;
count++;
console.log(count);
count--;
console.log(count);
จากตัวอย่าง score += 5 มีความหมายเทียบเท่ากับ score = score + 5 ส่วน count++ ใช้เพิ่มค่าแบบหนึ่งหน่วย และ count-- ใช้ลดค่าแบบหนึ่งหน่วย อย่างไรก็ตาม การเพิ่มหรือลดค่าแบบนี้ควรใช้อย่างระมัดระวังเมื่ออยู่ในนิพจน์ที่ซับซ้อน

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

ตัวดำเนินการเปรียบเทียบใช้ตรวจสอบความสัมพันธ์ระหว่างค่า และคืนผลเป็น Boolean คือ true หรือ false เครื่องหมายที่พบได้บ่อย ได้แก่ >, <, >=, <=, === และ !==
เครื่องหมายความหมายตัวอย่างผลลัพธ์
>มากกว่า8 > 5true
<น้อยกว่า3 < 2false
>=มากกว่าหรือเท่ากับ5 >= 5true
<=น้อยกว่าหรือเท่ากับ4 <= 3false
===เท่ากันทั้งค่าและชนิดข้อมูล5 === '5'false
!==ไม่เท่ากันโดยตรวจชนิดข้อมูลด้วย5 !== '5'true
const age = 18;
const minimumAge = 18;
const inputValue = '18';

console.log(age >= minimumAge);
console.log(age === minimumAge);
console.log(age === inputValue);
console.log(age !== inputValue);

console.log(10 > 5);
console.log(10 < 5);
console.log(10 >= 10);
console.log(10 <= 9);

ทำไมควรใช้ === แทน ==

เครื่องหมาย == เปรียบเทียบโดยอนุญาตให้ JavaScript แปลงชนิดข้อมูลบางกรณีก่อนตัดสินผล ส่วน === เปรียบเทียบทั้งค่าและชนิดข้อมูลโดยไม่แปลงชนิดให้อัตโนมัติ เช่น 5 == '5' ได้ true แต่ 5 === '5' ได้ false การใช้ === เป็นแนวทางที่แนะนำสำหรับโค้ดทั่วไป เพราะทำให้พฤติกรรมของโปรแกรมคาดเดาได้ง่ายกว่า
console.log(5 == '5');
console.log(5 === '5');

console.log(0 == false);
console.log(0 === false);

const userRole = 'admin';
console.log(userRole === 'admin');
อย่าสับสนระหว่าง =, == และ ==== ใช้กำหนดค่าให้ตัวแปร ส่วน == และ === ใช้เปรียบเทียบค่า โดย === ตรวจสอบชนิดข้อมูลด้วย ควรเลือกใช้เครื่องหมายให้ตรงกับเจตนาของโค้ด

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

ตัวดำเนินการตรรกะช่วยเชื่อมเงื่อนไขหลายข้อเข้าด้วยกัน ได้แก่ && หมายถึงเงื่อนไขทั้งสองด้านต้องเป็นจริง, || หมายถึงอย่างน้อยหนึ่งด้านเป็นจริง และ ! ใช้กลับค่าความจริงจาก true เป็น false หรือจาก false เป็น true
เครื่องหมายความหมายตัวอย่างผลลัพธ์
&&และtrue && truetrue
||หรือtrue || falsetrue
!ไม่ใช่!truefalse
const age = 20;
const hasTicket = true;
const isMember = false;

const canEnter = age >= 18 && hasTicket;
const hasBenefit = isMember || hasTicket;
const isNotMember = !isMember;

console.log('เข้าได้หรือไม่:', canEnter);
console.log('ได้รับสิทธิ์หรือไม่:', hasBenefit);
console.log('ไม่ใช่สมาชิก:', isNotMember);

const username = 'mali';
const passwordProvided = true;
const canLogin = username.length > 0 && passwordProvided;
console.log('พร้อมตรวจสอบการเข้าสู่ระบบ:', canLogin);
ตัวอย่าง canEnter จะเป็น true เมื่ออายุถึงเกณฑ์และมีบัตรครบทั้งสองเงื่อนไข ส่วน hasBenefit จะเป็น true หากเป็นสมาชิกหรือมีบัตรอย่างน้อยหนึ่งข้อ สำหรับการเข้าสู่ระบบจริง การตรวจสอบรหัสผ่านและสิทธิ์ต้องทำอย่างปลอดภัยที่ฝั่งเซิร์ฟเวอร์ด้วย ไม่ควรพึ่งการตรวจสอบจาก JavaScript ฝั่งเบราว์เซอร์เพียงอย่างเดียว

6. ตัวดำเนินการเงื่อนไขแบบย่อ

เครื่องหมาย ? : เรียกว่า Conditional หรือ Ternary Operator ใช้เลือกค่าระหว่างสองทางตามผลของเงื่อนไข เหมาะกับกรณีที่มีการเลือกค่าแบบสั้นและอ่านเข้าใจง่าย หากมีหลายเงื่อนไขซ้อนกัน ควรใช้ if...else เพื่อให้โค้ดอ่านสะดวกกว่า
const score = 78;
const result = score >= 50 ? 'ผ่าน' : 'ไม่ผ่าน';
console.log(result);

const hour = 14;
const greeting = hour < 12 ? 'สวัสดีตอนเช้า' : 'สวัสดีตอนบ่าย';
console.log(greeting);

const isLoggedIn = false;
const status = isLoggedIn ? 'เข้าสู่ระบบแล้ว' : 'ยังไม่ได้เข้าสู่ระบบ';
console.log(status);

7. การใช้ Nullish Coalescing และ Logical OR

เครื่องหมาย || สามารถใช้เลือกค่าทดแทนเมื่อค่าทางซ้ายเป็น falsy เช่น 0, false, ข้อความว่าง หรือ null ส่วน ?? หรือ Nullish Coalescing จะเลือกค่าทดแทนเฉพาะเมื่อค่าทางซ้ายเป็น null หรือ undefined เท่านั้น ความแตกต่างนี้สำคัญเมื่อค่าศูนย์หรือ false เป็นข้อมูลที่มีความหมาย
const quantity = 0;
const fallbackWithOr = quantity || 10;
const fallbackWithNullish = quantity ?? 10;

console.log(fallbackWithOr);
console.log(fallbackWithNullish);

const displayName = '';
console.log(displayName || 'ผู้ใช้งานทั่วไป');
console.log(displayName ?? 'ผู้ใช้งานทั่วไป');

const optionalScore = null;
console.log(optionalScore ?? 'ยังไม่มีคะแนน');
เลือกตัวดำเนินการให้ตรงกับความหมายหากต้องการแทนค่าที่เป็น null หรือ undefined ให้พิจารณาใช้ ?? แต่หากต้องการแทนค่าที่เป็น falsy ทั้งหมด เช่น 0 หรือข้อความว่างด้วย ให้พิจารณาใช้ ||

8. ตัวอย่างประยุกต์: คำนวณราคาสุทธิ

เราสามารถนำตัวดำเนินการหลายชนิดมาประยุกต์กับงานจริงได้ ตัวอย่างต่อไปนี้คำนวณราคาสินค้าตามจำนวน ตรวจสอบส่วนลด และสรุปยอดชำระ โดยตรวจสอบข้อมูลพื้นฐานก่อนนำไปคำนวณ
function calculateTotal(price, quantity, isMember) {
    if (
        typeof price !== 'number' ||
        typeof quantity !== 'number' ||
        !Number.isFinite(price) ||
        !Number.isFinite(quantity) ||
        price < 0 ||
        quantity < 0
    ) {
        return { success: false, message: 'ข้อมูลราคาไม่ถูกต้อง' };
    }

    const subtotal = price * quantity;
    const discountRate = isMember && subtotal >= 500 ? 0.10 : 0;
    const discount = subtotal * discountRate;
    const total = subtotal - discount;

    return {
        success: true,
        subtotal,
        discount,
        total
    };
}

console.log(calculateTotal(200, 3, true));
console.log(calculateTotal(100, 2, false));
console.log(calculateTotal(-50, 2, true));
ฟังก์ชันนี้ตรวจสอบว่าราคาและจำนวนเป็นตัวเลขที่ใช้คำนวณได้หรือไม่ จากนั้นใช้ * คำนวณยอดก่อนลด ใช้ && ตรวจสอบว่าสมาชิกและยอดถึงเกณฑ์ทั้งสองข้อ ใช้ตัวดำเนินการแบบเงื่อนไขเลือกอัตราส่วนลด และคืนผลลัพธ์เป็น Object เพื่อให้ส่วนอื่นของโปรแกรมนำไปใช้งานต่อได้

9. ข้อผิดพลาดที่ผู้เริ่มต้นมักพบ

ข้อผิดพลาดสาเหตุแนวทางแก้ไข
ใช้ = ในเงื่อนไขแทนการเปรียบเทียบสับสนระหว่างกำหนดค่าและเปรียบเทียบค่าใช้ === เมื่อจำเป็นต้องตรวจสอบความเท่ากัน
ใช้ == โดยไม่เข้าใจการแปลงชนิดค่าต่างชนิดอาจถูกแปลงก่อนเปรียบเทียบใช้ === เป็นค่าเริ่มต้นในโค้ดทั่วไป
นำข้อความมาคำนวณโดยไม่แปลงค่าข้อมูลตัวเลขอาจยังเป็น Stringตรวจสอบและแปลงด้วย Number()
ใช้ || แทนค่า 0 โดยไม่ตั้งใจเลขศูนย์เป็น falsyใช้ ?? เมื่อแทนเฉพาะ null หรือ undefined
เขียนนิพจน์ยาวจนอ่านยากมีหลายตัวดำเนินการในบรรทัดเดียวแบ่งขั้นตอนหรือใช้วงเล็บเพื่อสื่อเจตนา

10. แบบฝึกหัดท้ายบท

โจทย์ที่ 1: คำนวณค่าใช้จ่าย

สินค้าราคา 120 บาท ซื้อ 4 ชิ้น จงเขียนนิพจน์เพื่อหายอดรวมก่อนลด หากได้ส่วนลด 50 บาท ให้คำนวณยอดสุทธิ

โจทย์ที่ 2: ตรวจสอบสิทธิ์

ผู้ใช้ต้องมีอายุอย่างน้อย 18 ปีและมีบัตรสมาชิก จึงจะเข้าใช้งานบริการได้ ให้สร้างตัวแปร age และ hasMembership แล้วใช้ตัวดำเนินการตรรกะตรวจสอบสิทธิ์

โจทย์ที่ 3: เปรียบเทียบข้อมูล

กำหนด let inputScore = '80' และ const requiredScore = 80 จงเปรียบเทียบค่าด้วย == และ === พร้อมอธิบายว่าเหตุใดผลลัพธ์จึงต่างกัน

เฉลยตัวอย่าง

const price = 120;
const quantity = 4;
const subtotal = price * quantity;
const total = subtotal - 50;
console.log(subtotal);
console.log(total);

const age = 20;
const hasMembership = true;
const canUseService = age >= 18 && hasMembership;
console.log(canUseService);

const inputScore = '80';
const requiredScore = 80;
console.log(inputScore == requiredScore);
console.log(inputScore === requiredScore);

สรุปท้ายบท

ตัวดำเนินการช่วยให้ JavaScript คำนวณ กำหนดค่า เปรียบเทียบ และประเมินเงื่อนไขได้อย่างมีประสิทธิภาพ ควรแยกความหมายของ =, == และ === ให้ชัดเจน ใช้ &&, || และ ! เมื่อต้องจัดการเงื่อนไขหลายข้อ และเลือกใช้ ?? เมื่อจำเป็นต้องแทนค่าเฉพาะ null หรือ undefined การฝึกเขียนนิพจน์จากโจทย์ใกล้ตัวจะช่วยให้พร้อมเรียนรู้การควบคุมลำดับการทำงานของโปรแกรมในตอนถัดไป
ตอนถัดไป: เงื่อนไข if...else และการตัดสินใจEP. 4 จะเรียนรู้วิธีให้โปรแกรมเลือกเส้นทางการทำงานด้วย if, else if, else และ switch พร้อมตัวอย่างตรวจสอบคะแนน การให้ส่วนลด และการตัดสินใจจากข้อมูลหลายเงื่อนไข
อ่านจนถึงระยะ 500px ก่อนท้ายหน้าและอยู่ในหน้านี้อย่างน้อย 5 นาที เพื่อรับ EXP วันละครั้ง

⏳ กำลังจับเวลาอ่าน...

🌐
เลือกภาษา / Select Language
21 World Languages Supported