JavaScript Scope และ Closure

JavaScript

EP 10 ของซีรีส์ JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม เรียนรู้ Global Scope, Function Scope, Block Scope, Lexical Scope และ Closure พร้อมตัวอย่างโค้ดและแบบฝึกหัด

EP 10: Scope และ Closure เข้าใจขอบเขตตัวแปรอย่างลึกซึ้ง

1. Scope คืออะไร?

2. Global Scope: ตัวแปรระดับภายนอก

const siteName = 'LevelLance';

function showSiteName() {
    console.log(siteName);
}

showSiteName();
console.log(siteName);

3. Function Scope: ขอบเขตภายในฟังก์ชัน

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

console.log(calculatePrice(50, 3));

// ตัวแปร total อยู่ภายใน calculatePrice
// console.log(total); จะเกิด ReferenceError

4. Block Scope: ขอบเขตภายในบล็อก

const score = 85;

if (score >= 50) {
    const result = 'ผ่าน';
    let bonus = 10;
    console.log(result);
    console.log(bonus);
}

console.log(score);
// result และ bonus ไม่สามารถเรียกจากตรงนี้ได้

แล้ว var แตกต่างอย่างไร?

if (true) {
    var oldStyle = 'ประกาศด้วย var';
    let modernStyle = 'ประกาศด้วย let';

    console.log(oldStyle);
    console.log(modernStyle);
}

console.log(oldStyle);
// console.log(modernStyle); จะเกิด ReferenceError

5. Lexical Scope: ฟังก์ชันมองเห็นตัวแปรจากที่ใด?

const message = 'ข้อความระดับบนสุด';

function outer() {
    const name = 'JavaScript';

    function inner() {
        console.log(message);
        console.log(name);
    }

    inner();
}

outer();

6. Closure คืออะไร?

function createGreeting(name) {
    return function () {
        return `สวัสดี ${name}`;
    };
}

const greetMali = createGreeting('มะลิ');
const greetNiran = createGreeting('นิรันดร์');

console.log(greetMali());
console.log(greetNiran());

7. ใช้ Closure สร้างตัวนับที่เก็บสถานะ

function createCounter() {
    let count = 0;

    return function () {
        count += 1;
        return count;
    };
}

const counterA = createCounter();
const counterB = createCounter();

console.log(counterA());
console.log(counterA());
console.log(counterB());
console.log(counterA());

8. Closure กับการซ่อนข้อมูล

function createWallet(initialBalance = 0) {
    let balance = initialBalance;

    return {
        deposit(amount) {
            if (amount <= 0) {
                return false;
            }

            balance += amount;
            return true;
        },
        getBalance() {
            return balance;
        }
    };
}

const wallet = createWallet(100);
wallet.deposit(50);
console.log(wallet.getBalance());
console.log(wallet.balance);

9. Closure ที่ใช้ใน Callback และ Event-driven Code

function createMultiplier(multiplier) {
    return function (number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
const numbers = [2, 4, 6];

console.log(numbers.map(double));
console.log(numbers.map(triple));

10. เปรียบเทียบ Scope และ Closure

11. ข้อผิดพลาดที่พบบ่อย

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

function showScore() {
    const score = 95;
    return score;
}

const result = showScore();
console.log(result);

function createCounter() {
    let count = 0;

    return function () {
        count += 1;
        return count;
    };
}

const first = createCounter();
const second = createCounter();

console.log(first());
console.log(first());
console.log(second());
console.log(first());

function createMultiplier(factor) {
    return number => number * factor;
}

const timesTwo = createMultiplier(2);
const timesFive = createMultiplier(5);
const values = [1, 2, 3, 4];

console.log(values.map(timesTwo));
console.log(values.map(timesFive));

13. สรุปบทเรียน