อาร์โรว์ฟังก์ชัน, ขอบเขต และ template literals

เชี่ยวชาญไวยากรณ์อาร์โรว์ ขอบเขตแบบบล็อก และคลอเชอร์ แล้วสร้างสตริงแบบไดนามิกด้วย template literals

8 นาที · 3 คำถาม

อาร์โรว์ฟังก์ชันมีอยู่ทุกที่ในโค้ดสมัยใหม่: ทั้งในคอลแบ็กของ map และ filter, event listener และ promise จุดแข็งของมันคือไวยากรณ์ที่กระชับพร้อมการคืนค่าโดยปริยาย เมื่อเนื้อหาฟังก์ชันเป็นเพียงนิพจน์เดียว แต่ทันทีที่คุณเปิดวงเล็บปีกกา return จะกลับมาเป็นสิ่งจำเป็นอีกครั้ง

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

ขอบเขต (scope) กำหนดว่าตัวแปรจะมองเห็นได้จากที่ใด เมื่อใช้ let และ const ตัวแปรที่ประกาศภายในบล็อก (if, for, วงเล็บปีกกา) จะมีอยู่เฉพาะภายในบล็อกนั้นเท่านั้น อีกกลไกสำคัญหนึ่ง: ฟังก์ชันจะยังคงเข้าถึงตัวแปรของขอบเขตที่มันถูกสร้างขึ้นได้ แม้ว่าขอบเขตนั้นจะสิ้นสุดไปแล้ว นี่คือคลอเชอร์ (closure) และเป็นสิ่งที่ทำให้ตัวนับ แคช และตัวจัดการสถานะทำงานได้

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Template literals ซึ่งคั่นด้วยเครื่องหมาย backtick เป็นทางเลือกที่ดีกว่าการเชื่อมสตริงมาก คุณสามารถแทรกนิพจน์ด้วย ${...} และการขึ้นบรรทัดใหม่จะถูกคงไว้ตามเดิม ซึ่งเหมาะอย่างยิ่งสำหรับการสร้างข้อความหรือชิ้นส่วน HTML

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ไวยากรณ์ใดที่คืนออบเจกต์จากอาร์โรว์ฟังก์ชันด้วยการคืนค่าโดยปริยายได้อย่างถูกต้อง?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. ตัวแปรที่ประกาศด้วย let ภายในบล็อก if สามารถเข้าถึงได้หลังจากบล็อกนั้นหรือไม่?
   • ได้ เหมือนกับ var
   • ไม่ได้ ขอบเขตของมันจำกัดอยู่ในบล็อก
   • ได้ เฉพาะเมื่อถูกกำหนดค่าเริ่มต้นแล้วเท่านั้น
3. อักขระใดที่ใช้คั่น template literal?
   • เครื่องหมายอัญประกาศเดี่ยว
   • เครื่องหมายอัญประกาศคู่
   • เครื่องหมาย backtick