Kodokon kodokon.com

Arrow functions, scope, and template literals

arrow सिंटैक्स, ब्लॉक स्कोप और क्लोज़र में महारत हासिल करें, फिर template literals से डायनैमिक स्ट्रिंग्स बनाएँ।

8 मिनट · 3 प्रश्न

इस पाठ को Kodokon में खोलें

आधुनिक कोड में arrow फ़ंक्शन हर जगह हैं: map और filter callbacks, event listeners, promises। इनकी ताक़त: एक संक्षिप्त सिंटैक्स जिसमें implicit return होता है जब body एक ही अभिव्यक्ति में समा जाती है। जैसे ही आप कर्ली ब्रेसेस खोलते हैं, return फिर से अनिवार्य हो जाता है।

JAVASCRIPT
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
एक अभिव्यक्ति पर implicit return, कर्ली ब्रेसेस के साथ explicit return।

स्कोप तय करता है कि कोई वेरिएबल कहाँ दिखाई देगा। let और const के साथ, किसी ब्लॉक (if, for, कर्ली ब्रेसेस) के अंदर घोषित वेरिएबल केवल उसी ब्लॉक के भीतर मौजूद रहता है। एक और अनिवार्य तंत्र: एक फ़ंक्शन उस स्कोप के वेरिएबल्स तक पहुँच बनाए रखता है जहाँ उसे बनाया गया था, भले ही वह स्कोप खत्म हो चुका हो। यह एक closure है, और यही काउंटर, कैश और स्टेट मैनेजर को काम करने लायक बनाता है।

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

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
लौटाया गया फ़ंक्शन count तक पहुँच बनाए रखता है: यही एक closure है।

बैकटिक्स से घिरे template literals, कॉनकैटनेशन का एक कहीं बेहतर विकल्प हैं। आप ${...} से एक अभिव्यक्ति डालते हैं, और लाइन ब्रेक्स ज्यों के त्यों संरक्षित रहते हैं, जो संदेश या HTML टुकड़े बनाने के लिए आदर्श है।

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

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

console.log(message);
बिना किसी कॉनकैटनेशन के इंटरपोलेशन और बहु-पंक्ति स्ट्रिंग्स।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

  1. कौन सा सिंटैक्स implicit return वाले arrow फ़ंक्शन से किसी ऑब्जेक्ट को सही ढंग से लौटाता है?
    • (name) => { name: name }
    • (name) => ({ name })
    • (name) => return { name }
  2. क्या if ब्लॉक के अंदर let से घोषित कोई वेरिएबल उस ब्लॉक के बाद पहुँच-योग्य होता है?
    • हाँ, ठीक var की तरह
    • नहीं, इसका स्कोप ब्लॉक तक सीमित है
    • केवल अगर इसे इनिशियलाइज़ किया गया हो
  3. कौन सा अक्षर एक template literal को सीमांकित करता है?
    • एकल उद्धरण चिह्न
    • दोहरा उद्धरण चिह्न
    • बैकटिक