ES6 modules, import, export, default In Hindi
वर्ष 2015 में ES6 स्क्रिप्ट में जावास्क्रिप्ट प्रोग्रामिंग में बिल्ट-इन प्रोग्राम मॉड्यूल को यूज़ करके मौजूदा प्रोग्राम सोर्स कोड को बेहतर आर्डर में स्ट्रक्चर्ड या अरेंज करने में हेल्प प्रोवाइड की है। जिससे प्रोग्रामर सॉफ्टवेयर डेवलपर्स डेटाबेस प्रोग्राम फ़ाइलों में कैपेसिटी को एक्सपोर्ट और इम्पोर्ट करके लार्ज प्रोग्राम सोर्स कोड एप्लिकेशन को सोर्स कोड के छोटे-छोटे, अधिक मैनेजबल स्माल प्रोग्राम सोर्स कोड टुकड़ों में डिवाइड कर प्रोसेस कर सकते हैं। ES6 स्क्रिप्ट में मॉड्यूल सिस्टम में दो प्राइमरी रिजर्व्ड कीवर्ड होते हैं. जो की import और export कीवर्ड के रूप में अप्लाई होते है।
So, let’s know the ES6 script import and export keywords in JavaScript programming.
Export keyword in ES6 in JavaScript.
किसी भी जावास्क्रिप्ट प्रोग्राम में export कीवर्ड को यूज़ एक प्रोग्राम मॉड्यूल से फ़ंक्शन, क्लास ऑब्जेक्ट या प्रोग्राम वैरिएबल को एक्सपोर्ट करने में किया जाता है जिससे की उन एक्सपोर्ट रेडीमेड प्रोग्राम मॉड्यूल का उपयोग अन्य प्रोग्राम मॉड्यूल में जरूरत के अनुसार किया जा सके। जावास्क्रिप्ट में एक्सपोर्ट मॉड्यूल दो प्रकार के होते हैं. जिन्हे, नेम्ड एक्सपोर्ट और डिफ़ॉल्ट एक्सपोर्ट के रूप में जाने जाते है।
Named Export Modules in JavaScript.
नेम्ड एक्सपोर्ट जावास्क्रिप्ट प्रोग्रामर को एक मॉड्यूल से कई वैल्यू को एक्सपोर्ट करने में हेल्प करता हैं। जहा प्रोग्रामर नामों के साथ प्रोग्राम वैरिएबल फ़ंक्शन या क्लास एलिमेंट ऑब्जेक्ट को अलग-अलग मैन्युअल एक्सपोर्ट कर सकते हैं।
Example of named exports in JavaScript.
// we use here file: math.js in program
export const total = (p, q) => P + q;
export const minus = (p, q) => p – q;
// with that optional we can export after below again they declaring
const product = (p, q) => p * q;
const divide = (p, q) => p / q;
export { product, divide };
यहाँ नेम्ड एक्सपोर्ट प्रोग्राम में, टोटल, माइनस, प्रोडक्ट और डिवाइड, ये सभी एलिमेंट math.js मॉड्यूल फाइल से एक्सपोर्ट किए जाएंगे।
Default export module in JavaScript.
डिफ़ॉल्ट एक्सपोर्ट में जावास्क्रिप्ट प्रोग्रामर किसी प्रोग्राम मॉड्यूल से एक वैल्यू जिसमे, कोई प्रोग्राम फ़ंक्शन, प्रोग्राम क्लास, या ऑब्जेक्ट को एक्सपोर्ट करने में हेल्प करता है। डिफ़ॉल्ट एक्सपोर्ट सामान्यता किसी प्रोग्राम मॉड्यूल में एक्सपोर्ट की जाने वाली “मैन” एलिमेंट होता है, जहा डिफ़ॉल्ट एक्सपोर्ट में ऑब्जेक्ट या एलिमेंट को इम्पोर्ट करते समय इसे किसी नाम की जरूरत नहीं होती है।
Example of default export in JavaScript.
// let use export from file: calculator.js to apply default export method
export default function(p, q) {
return p * q;
}
यहाँ इस कंडीशन में, डिफ़ॉल्ट एक्सपोर्ट एक अनाम प्रोग्राम फ़ंक्शन है. जो दो सेपरेट इन्टिजर वैल्यू को मल्टीप्लय करता है। जहा इस फ़ंक्शन को इम्पोर्ट करते समय प्रोग्रामर को कर्ली ब्रेसिज़ को अप्लाई करने की जरूरत नहीं है, इसके साथ फंक्शन को कोई भी नाम दिया जा सकता है।
Import Keyword in ES6 in JavaScript.
इम्पोर्ट कीवर्ड को जावास्क्रिप्ट प्रोग्रामिंग में अन्य प्रोग्राम मॉड्यूल फंक्शन से एक्सपोर्ट वैल्यू को इम्पोर्ट करने में किया जाता है। जिसमे नेम्ड और डिफ़ॉल्ट दो पॉपुलर एक्सपोर्ट फंक्शन को इम्पोर्ट करने के मल्टीप्ल मेथड हैं।
Method of importing named exports in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में नेम्ड एक्सपोर्ट एलिमेंट को किसी प्रोग्राम में इम्पोर्ट करने के लिए, प्रोग्रामर को कर्ली ब्रेसिज़ और एक्सपोर्ट वैल्यू के एग्जैक्ट नेम्स का यूज़ करना पड़ेगा।
Example of importing named exports in JavaScript.
// we use file: main.js to apply a importing named exports in JavaScript
import { total, minus } from ‘./math.js’;
console.log(total(1, 9)); // result is – 10
console.log(minus(30, 17)); // result is – 13
जावास्क्रिप्ट प्रोग्रामर किसी भी मौजूदा प्रोग्राम मॉड्यूल से एक या एक से अधिक नेम्ड एक्सपोर्ट फंक्शन एलिमेंट को कर्ली ब्रेसिज़ में लिस्ट कर इम्पोर्ट कर सकते हैं।
Import Method of Default Exports in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में डिफ़ॉल्ट एक्सपोर्ट इम्पोर्ट फंक्शन यूज़ करते समय प्रोग्रामर को कर्ली ब्रेसिज़ स्पेशल सिंबल की जरूरत नहीं होती है। जहा प्रोग्रामर इसमें अपनी डिजायर नाम प्रोवाइड कर सकता हैं।
Example of importing default export in JavaScript.
// we use here file: main.js to apply Default Exports method in JavaScript
import product from ‘./calculator.js’;
console.log(prduct(4, 2)); // result is – 8
यहाँ इस प्रोग्राम में, दो वैल्यू को calculator.js मॉड्यूल फंक्शन से इम्पोर्ट किया गया है, जिसे पहले डिफ़ॉल्ट फ़ंक्शन के रूप में एक्सपोर्ट किया गया था।
Importing both named and default exports in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में प्रोग्रामर एक ही मॉड्यूल से नेम्ड एक्सपोर्ट और डिफ़ॉल्ट एक्सपोर्ट दोनों को इम्पोर्ट कर सकते हैं।
Example of importing both named and default exports in JavaScript.
// use of file: main.js to importing both named and default exports in JavaScript
import product, { total, minus } from ‘./math.js’;
console.log(total(7, 2)); // result is – 9
console.log(minus(10, 4)); // result is – 6
console.log(product(7, 4)); // result is – 28
इस प्रोग्राम एक्साम्प्ल में, टोटलऔर माइनस फ़ंक्शन नेम्ड एक एक्सपोर्ट फंक्शन हैं, जो की यहाँ डिफ़ॉल्ट रूप से एक्सपोर्ट को मल्टिप्लाय के रूप में इम्पोर्ट किया गया है।
Renaming imports in JavaScript.
यदि किसी प्रोग्राम में जरूरत हो, तो आप as कीवर्ड को यूज़ करके इम्पोर्टेड मेंबर्स का नाम भी मॉडिफाई कर सकते हैं।
Example of renaming imports in JavaScript.
// we use here file: main.js to Renaming imports in JavaScript
import { total as sum, minus as diff } from ‘./math.js’;
console.log(sum(3, 4)); // result is – 7
console.log(diff(9, 3)); // result is – 6
यहाँ इस प्रोग्राम मे इम्पोर्ट मेथड के दौरान टोटल का नाम बदलकर sum और माइनस का नाम बदलकर diff कर दिया गया है।
Summary of import/export usage in JavaScript.
Named export method in JavaScript.
Export method in JavaScript.
export const test = ‘value’;
export function sample() { … }
Importing:
import { test, sample } from ‘./module.js’;
Default Exports:
Exporting:
export default function() { … }
// even yu can use or
export default class { … }
Importing:
import testFunction from ‘./module.js’; // here import module name can be anything
Importing Both:
import testFunction, { namedExportfunction1, namedExportfunction2 } from ‘./module.js’;
Practical example of export and import in JavaScript.
तो चलिए जावास्क्रिप्ट में नामित निर्यात और डिफ़ॉल्ट निर्यात को बेहतर जाने।
file: math.js
// we use here Named exports method
export const total = (p, q) => p + q;
export const minus = (p, q) => p – q;
// we use here Default export method
export default function product(p, q) {
return p * q;
}
file: main.js
// here we use Importing both named and default exports for program
import product, { total, minus } from ‘./math.js’;
console.log(total(7, 3)); // the result is – 10
console.log(minus(9, 3)); // the result is – 6
console.log(product(4, 4)); // the result is – 16
Dynamic import optional method in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में ES6 डायनामिक इम्पोर्ट को भी सपोर्ट करता है, जो प्रोग्रामर को import() मेथड को अप्लाई करके रनटाइम पर प्रोग्राम मॉड्यूल को एसिंक्रोनस आर्डर में इम्पोर्ट करने की परमिशन प्रोवाइड करता है।
Example of dynamic import in JavaScript.
// here we use the dynamic import method at program runtime
async function testModule() {
const { total } = await import(‘./math.js’);
console.log(total(8, 3)); // the result is – 11
}
testModule();
यहाँ इस प्रोग्राम में डायनामिक इम्पोर्ट एक प्रॉमिस को रिटर्न करते हैं, जो प्रोग्राम में लोड होने के बाद मॉड्यूल को एक्सपोर्ट में कन्वर्ट कर दिया जाता है।
जावास्क्रिप्ट प्रोग्राम में डायनामिक इम्पोर्ट मेथड केवल ज़रूरत पड़ने पर कोड लोड करने के लिए एसेंशियल है, जिससे शुरुआती प्रोग्राम लोड करते समय कम करके प्रोग्राम परफॉरमेंस को इम्प्रूव करने में हेल्प करता है।
Summary of export and import method in JavaScript.
- Named exports – जावास्क्रिप्ट में नेम्ड एक्सपोर्ट स्पेसिफिक नेम्स के साथ कई वैल्यू को एक्सपोर्ट करने की परमिशन प्रोवाइड करता है।
- Default exports – यह मौजूदा प्रोग्राम में सिंगल वैल्यू को एक्सपोर्ट करने हेल्प करता है। जिसे प्रोग्राम में बिना कर्ली ब्रेसिज़ के इम्पोर्ट किया जा सकता है।
- Import – जावास्क्रिप्ट प्रोग्राम में अन्य मॉड्यूल से एक्सपोर्ट लाने के लिए इम्पोर्ट मेथड को अप्लाई करें। जहा नेम्ड एक्सपोर्ट के लिए कर्ली ब्रेसिज़ की जरूरत होती है, जहा यह डिफ़ॉल्ट एक्सपोर्ट के लिए नहीं है।
- Renaming imports – जावास्क्रिप्ट प्रोग्रामर as टेक्स्ट को यूज़ करके इम्पोर्ट एलिमेंट का नाम चेंज कर सकते हैं।
- Dynamic imports – जावास्क्रिप्ट प्रोग्रामर import() मेथड के साथ मॉड्यूल को एसिंक्रोनस आर्डर में इम्पोर्ट कर सकते है।
