जावास्क्रिप्ट का विकास जारी है, और ईएस13 (ईसीएमएस्क्रिप्ट 2022) की शुरूआत के साथ, कई नई विशेषताएं हैं जिनके बारे में डेवलपर्स को अधिक कुशल और आधुनिक कोड लिखने के लिए जागरूक होना चाहिए। इस लेख में, हम ES13 की दस सबसे प्रभावशाली विशेषताओं के बारे में जानेंगे जो आपके विकास कार्यप्रवाह को बेहतर बना सकती हैं।

1. शीर्ष-स्तरीय प्रतीक्षा

ES13 से पहले:

पहले, आप केवल async फ़ंक्शंस के अंदर wait का उपयोग कर सकते थे। इसका मतलब यह था कि यदि आपको प्रतीक्षा का उपयोग करने की आवश्यकता है, तो आपको अपना कोड एक एसिंक फ़ंक्शन के अंदर लपेटना होगा, भले ही आपके बाकी मॉड्यूल को इसकी आवश्यकता न हो।

उदाहरण:

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

ES13 फ़ीचर:

ES13 के साथ, अब आप अपने मॉड्यूल के शीर्ष स्तर पर wait का उपयोग कर सकते हैं, जिससे अतिरिक्त async रैपर फ़ंक्शन की आवश्यकता समाप्त हो जाएगी।

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. निजी इंस्टेंस तरीके और एक्सेसर्स

ES13 से पहले:

ES13 से पहले, जावास्क्रिप्ट कक्षाओं में वास्तविक निजी फ़ील्ड या विधियाँ नहीं थीं। गोपनीयता को अनुकरण करने के लिए डेवलपर्स अक्सर अंडरस्कोर या क्लोजर जैसी नामकरण परंपराओं का उपयोग करते थे, लेकिन ये विधियां वास्तव में निजी नहीं थीं।

उदाहरण:

// Simulating private fields (Before ES13)
class Person {
  constructor(name) {
    this._name = name; // Conventionally "private"
  }

  _getName() {
    return this._name;
  }

  greet() {
    return `Hello, ${this._getName()}!`;
  }
}

const john = new Person('John');
console.log(john._getName()); // Accessible, but intended to be private

ES13 फ़ीचर:

ES13 # उपसर्ग का उपयोग करके वास्तविक निजी इंस्टेंस विधियों और एक्सेसर्स का परिचय देता है, यह सुनिश्चित करते हुए कि उन्हें कक्षा के बाहर एक्सेस नहीं किया जा सकता है।

// Private instance methods and fields (ES13)
class Person {
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  #getName() {
    return this.#name;
  }

  greet() {
    return `Hello, ${this.#getName()}!`;
  }
}

const john = new Person('John');
console.log(john.greet()); // Hello, John!
console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class

3. स्टेटिक क्लास फ़ील्ड्स और तरीके

ES13 से पहले:

ES13 से पहले, स्थिर फ़ील्ड और विधियों को आम तौर पर क्लास बॉडी के बाहर परिभाषित किया जाता था, जिससे कम सुसंगत कोड होता था।

उदाहरण:

// Static fields outside class body (Before ES13)
class MathUtilities {}

MathUtilities.PI = 3.14159;

MathUtilities.calculateCircumference = function(radius) {
  return 2 * MathUtilities.PI * radius;
};

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

ES13 फ़ीचर:

ES13 आपको सीधे क्लास बॉडी के भीतर स्थिर क्षेत्रों और विधियों को परिभाषित करने की अनुमति देता है, जिससे पठनीयता और संगठन में सुधार होता है।

// Static fields and methods inside class body (ES13)
class MathUtilities {
  static PI = 3.14159;

  static calculateCircumference(radius) {
    return 2 * MathUtilities.PI * radius;
  }
}

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

4. लॉजिकल असाइनमेंट ऑपरेटर्स

ES13 से पहले:

लॉजिकल ऑपरेटर्स (&&, ||, ??) और असाइनमेंट को अक्सर वर्बोज़ स्टेटमेंट्स में मैन्युअल रूप से जोड़ा जाता था, जिससे अधिक जटिल कोड बनता था।

उदाहरण:

// Manually combining logical operators and assignment (Before ES13)
let a = 1;
let b = 0;

a = a && 2;  // a = 2
b = b || 3;  // b = 3
let c = null;
c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

ES13 फ़ीचर:

ES13 तार्किक असाइनमेंट ऑपरेटरों का परिचय देता है, जो संक्षिप्त सिंटैक्स में असाइनमेंट के साथ तार्किक संचालन को जोड़ता है।

// Logical assignment operators (ES13)
let a = 1;
let b = 0;

a &&= 2;  // a = a && 2; // a = 2
b ||= 3;  // b = b || 3; // b = 3
let c = null;
c ??= 4; // c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

5. WeakRefs और अंतिमकरण रजिस्ट्री

ES13 से पहले:

जावास्क्रिप्ट में कमजोर संदर्भ और फाइनलाइज़र मूल रूप से समर्थित नहीं थे, जिससे कुछ मामलों में संसाधनों का प्रबंधन करना मुश्किल हो गया, खासकर बड़े पैमाने के अनुप्रयोगों के साथ जो महंगी वस्तुओं को संभालते हैं।

उदाहरण:

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

ES13 फ़ीचर:

ES13 ने WeakRef और फाइनलाइज़ेशनरजिस्ट्री की शुरुआत की, जो कचरा संग्रहण के बाद कमजोर संदर्भों और सफाई कार्यों के लिए मूल समर्थन प्रदान करता है।

// WeakRefs and FinalizationRegistry (ES13)
let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 'John'

obj = null; // obj is eligible for garbage collection

setTimeout(() => {
  console.log(weakRef.deref()?.name); // undefined (if garbage collected)
}, 1000);

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup: ${heldValue}`);
});

registry.register(obj, 'Object finalized');

6. निजी क्षेत्रों के लिए एर्गोनोमिक ब्रांड जांच

ES13 से पहले:

यह जांचना कि क्या किसी ऑब्जेक्ट में निजी फ़ील्ड है, सीधा नहीं था, क्योंकि निजी फ़ील्ड मूल रूप से समर्थित नहीं थे। डेवलपर्स को वैकल्पिक तरीकों पर निर्भर रहना पड़ता था, जैसे सार्वजनिक संपत्तियों की जांच करना या इंस्टेंसऑफ़ चेक का उपयोग करना।

उदाहरण:

// Checking for private fields using workarounds (Before ES13)
class Car {
  constructor() {
    this.engineStarted = false; // Public field
  }

  startEngine() {
    this.engineStarted = true;
  }

  static isCar(obj) {
    return obj instanceof Car; // Not reliable for truly private fields
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

ES13 फ़ीचर:

ES13 के साथ, अब आप # सिंटैक्स का उपयोग करके सीधे जांच सकते हैं कि किसी ऑब्जेक्ट में निजी फ़ील्ड है या नहीं, जिससे यह आसान और अधिक विश्वसनीय हो जाता है।

// Ergonomic brand checks for private fields (ES13)
class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
  }

  static isCar(obj) {
    return #engineStarted in obj;
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

7. Array.prototype.at()

ES13 से पहले:

एक सूचकांक के साथ ब्रैकेट नोटेशन का उपयोग करके सरणी से तत्वों तक पहुंच, और नकारात्मक सूचकांकों के लिए, आपको मैन्युअल रूप से स्थिति की गणना करनी होगी।

उदाहरण:

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

ES13 फ़ीचर:

at() विधि आपको सकारात्मक और नकारात्मक दोनों सूचकांकों का अधिक सहजता से उपयोग करके सरणी तत्वों तक पहुंचने की अनुमति देती है।

// Accessing array elements with `at()` (ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(0)); // 1 (first element)

8. Object.hasOwn()

ES13 से पहले:

यह जांचने के लिए कि क्या किसी ऑब्जेक्ट की अपनी संपत्ति है (विरासत में नहीं मिली है), डेवलपर्स आमतौर पर object.prototype.hasOwnProperty.call() या obj.hasOwnProperty() का उपयोग करते हैं।

उदाहरण:

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

ES13 फ़ीचर:

नई ऑब्जेक्ट.हैसओन() विधि इस जांच को सरल बनाती है, अधिक संक्षिप्त और पठनीय वाक्यविन्यास प्रदान करती है।

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

ES13 से पहले:

कुंजी-मूल्य जोड़े (उदाहरण के लिए, मानचित्र या सरणी से) को किसी ऑब्जेक्ट में बदलने के लिए लूपिंग और मैन्युअल निर्माण की आवश्यकता होती है।

उदाहरण:

// Creating an object from entries (Before ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = {};
entries.forEach(([key, value]) => {
  obj[key] = value;
});
console.log(obj); // { name: 'John', age: 30 }

ES13 फ़ीचर:

Object.fromEntries() कुंजी-मूल्य जोड़े से ऑब्जेक्ट के निर्माण को सरल बनाता है।

// Creating an object with `Object.fromEntries()` (ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

10. मॉड्यूल में वैश्विक यह

ES13 से पहले:

मॉड्यूल के शीर्ष स्तर में इसका मूल्य अपरिभाषित था, जिससे स्क्रिप्ट से मॉड्यूल में कोड पोर्ट करते समय भ्रम पैदा होता था।

उदाहरण:

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

ES13 फ़ीचर:

ES13 स्पष्ट करता है कि मॉड्यूल के शीर्ष स्तर पर इसका मूल्य हमेशा अपरिभाषित होता है, जो मॉड्यूल और स्क्रिप्ट के बीच स्थिरता प्रदान करता है।

// Global `this` in modules (ES13)
console.log(this); // undefined

ये ES13 सुविधाएं आपके जावास्क्रिप्ट कोड को अधिक कुशल, पठनीय और रखरखाव योग्य बनाने के लिए डिज़ाइन की गई हैं। इन्हें अपनी विकास प्रथाओं में एकीकृत करके, आप आधुनिक, निष्पादन योग्य एप्लिकेशन बनाने के लिए भाषा में नवीनतम प्रगति का लाभ उठा सकते हैं।