JavaScript Functions: สร้างฟังก์ชันให้โค้ดทำงานซ้ำได้

JavaScript

EP 9 ของซีรีส์ JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม เรียนรู้การสร้างฟังก์ชัน การรับพารามิเตอร์ การส่งค่ากลับ และการนำฟังก์ชันไปประยุกต์ใช้กับข้อมูลจริง

EP 9: Functions หัวใจของการเขียนโปรแกรมที่นำกลับมาใช้ซ้ำได้

1. ฟังก์ชันคืออะไร?

function sayHello() {
    console.log('สวัสดี JavaScript!');
}

sayHello();
sayHello();

2. ส่วนประกอบของฟังก์ชัน

function calculateTotal(price, quantity) {
    const total = price * quantity;
    return total;
}

const result = calculateTotal(120, 3);
console.log(result);

3. พารามิเตอร์และอาร์กิวเมนต์ต่างกันอย่างไร?

function greet(name) {
    console.log(`สวัสดี ${name}`);
}

greet('มิน');
greet('นัท');
greet('พลอย');

กำหนดค่าเริ่มต้นให้พารามิเตอร์

function greetUser(name = 'ผู้ใช้งาน') {
    return `ยินดีต้อนรับ ${name}`;
}

console.log(greetUser('ออม'));
console.log(greetUser());

4. return สำคัญอย่างไร?

function add(a, b) {
    return a + b;
}

function addAndPrint(a, b) {
    console.log(a + b);
}

const sum = add(10, 5);
const printed = addAndPrint(10, 5);

console.log('ค่าที่ส่งกลับ:', sum);
console.log('ค่าที่ได้รับ:', printed);

5. Function Declaration และ Function Expression

function square(number) {
    return number * number;
}

const cube = function (number) {
    return number * number * number;
};

console.log(square(4));
console.log(cube(3));

6. Arrow Function รูปแบบกระชับที่นิยมใช้

const double = number => number * 2;
const add = (a, b) => a + b;
const isAdult = age => age >= 18;

console.log(double(6));
console.log(add(7, 8));
console.log(isAdult(20));

const calculateDiscount = (price, percent) => {
    const discount = price * percent / 100;
    const finalPrice = price - discount;
    return finalPrice;
};

console.log(calculateDiscount(1000, 15));

7. นำฟังก์ชันไปทำงานร่วมกับ Array

const prices = [100, 250, 80, 400, 150];

const pricesWithVat = prices.map(price => price * 1.07);
const expensivePrices = prices.filter(price => price >= 200);
const totalPrice = prices.reduce((sum, price) => sum + price, 0);

console.log('ราคาพร้อม VAT:', pricesWithVat);
console.log('ราคาตั้งแต่ 200 ขึ้นไป:', expensivePrices);
console.log('ราคารวม:', totalPrice);

8. ขอบเขตตัวแปรกับฟังก์ชัน

const message = 'ข้อความจากภายนอก';

function showMessage() {
    const localMessage = 'ข้อความภายในฟังก์ชัน';
    console.log(message);
    console.log(localMessage);
}

showMessage();
console.log(message);
// console.log(localMessage); จะเกิด ReferenceError

9. ตัวอย่างประยุกต์: คำนวณยอดสั่งซื้อ

const cart = [
    { name: 'สมุด', price: 35, quantity: 2 },
    { name: 'ปากกา', price: 12, quantity: 5 },
    { name: 'กระเป๋า', price: 450, quantity: 1 }
];

function calculateSubtotal(items) {
    return items.reduce((sum, item) => {
        return sum + item.price * item.quantity;
    }, 0);
}

function calculateDiscount(subtotal, percent = 0) {
    return subtotal * percent / 100;
}

function calculateOrder(items, discountPercent = 0) {
    const subtotal = calculateSubtotal(items);
    const discount = calculateDiscount(subtotal, discountPercent);

    return {
        subtotal,
        discount,
        total: subtotal - discount
    };
}

const order = calculateOrder(cart, 10);
console.log('ยอดก่อนหักส่วนลด:', order.subtotal);
console.log('ส่วนลด:', order.discount);
console.log('ยอดชำระสุทธิ:', order.total);

10. แนวทางเขียนฟังก์ชันที่ดี

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

function rectangleArea(width, height) {
    return width * height;
}

console.log(rectangleArea(8, 5));

function isEven(number) {
    return Number.isInteger(number) && number % 2 === 0;
}

console.log(isEven(12));
console.log(isEven(7));
console.log(isEven(4.5));

function average(numbers) {
    if (numbers.length === 0) {
        return null;
    }

    const total = numbers.reduce((sum, number) => sum + number, 0);
    return total / numbers.length;
}

console.log(average([10, 20, 30]));
console.log(average([]));

12. สรุปบทเรียนและเตรียมตัวสู่ตอนถัดไป