Importing and exporting between files In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में ECMAScript 2015 में लांच स्क्रिप्ट प्रोग्रामिंग में एक पॉवरफुल स्पेशल ऐट्रिब्यूट्स फीचर्स है, जो जावास्क्रिप्ट प्रोग्रामर को किसी प्रोग्राम सोर्स कोड को अलग-अलग फ़ाइलों में डिवाइड कर और उन्हें स्माल प्रोग्राम सोर्स कोड मॉड्यूल के रूप में उपयोग कर उन्हें पर्टिकुलर आर्डर में अरेंज कर अप्लाई करने में हेल्प करता है। जहा मॉड्यूलर प्रोग्रामिंग एप्रोच या ओवरव्यू प्रोग्रामर को एक फ़ाइल से प्रोग्राम सोर्स कोड को एक्सपोर्ट करने और उसे दूसरी फ़ाइल में इम्पोर्ट करने में हेल्प करता है. जिससे प्रोग्रामर प्रोग्राम सोर्स कोडबेस को मेन्टेन करना और लार्ज प्रोग्राम को क्रिएट हैंडल करना आसान हो जाता है।
So, let’s get to know more about file import and export features in JavaScript programming.
Setting up your custom project structure in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में प्रोग्रामर के पास एक प्रोजेक्ट है, जिसमे प्रोजेक्ट में उपयोग होने वाली जरूरी फाइल में मुख्य फ़ाइलें हैं. जैसे,
/project-directory
│
├── /math.js // इस फाइल में एक्सपोर्ट किए जाने वाले मॉड्यूल फ़ंक्शन होते हैं
├── /main.js // यहाँ math.js फाइल में से मॉड्यूल फ़ंक्शन इम्पोर्ट और यूज़ करता है
└── index.html // यह मौजूदा प्रोग्राम में प्रोजेक्ट को रन करने के लिए मुख्य HTML फ़ाइल है.
Exporting from a Module (File) in JavaScript.
यहाँ प्रोग्राम में math.js फ़ाइल में प्रोग्रामर कुछ यूजर डिफाइन फ़ंक्शन डिफाइन करता है, और उन्हें पॉपुलर एक्सपोर्ट में नेम्ड एक्सपोर्ट या डिफ़ॉल्ट एक्सपोर्ट मेथड को अप्लाई करके मॉड्यूल फंक्शन को एक्सपोर्ट करता है।
Named export features in JavaScript.
तो चलिए जावास्क्रिप्ट प्रोग्राम में एक नेम्ड एक्सपोर्ट मेथड के प्रोग्राम को बेहतर जाने।
// math.js
export const total = (p, q) => p + q;
export const minus = (p, q) => p – q;
export const product = (p, q) => p * q;
export const division = (p, q) => p / q;
यहाँ इस प्रोग्राम में, प्रोग्रामर ने कई फ़ंक्शन अप्लाई किए है, जिसमे टोटल, माइनस , प्रोडक्ट, डिवीज़न, हैं, और इन्हे जरूरत पड़ने पर अलग-अलग एक्सपोर्ट किया गया है।
Default export features in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में किसी सिंगल वैल्यू जैसे, किसी फ़ंक्शन या क्लास ऑब्जेक्ट को डिफ़ॉल्ट एक्सपोर्ट आर्डर में भी एक्सपोर्ट कर सकते हैं। जैसे,
// math.js
export default function product(p, q) {
return p * q;
}
इस प्रोग्राम में प्रोडक्ट वेरिएबल को डिफ़ॉल्ट एक्सपोर्ट आर्डर में एक्सपोर्ट किया गया है, इस वजह से किसी अन्य फ़ाइल में किसी भी नाम को अप्लाई करके इसे इम्पोर्ट किया जा सकता है।
Importing a file in another file in JavaScript.
यहाँ, जावास्क्रिप्ट प्रोग्रामर प्रोग्राम में math.js से main.js में प्रोग्राम फ़ंक्शन मॉड्यूल को इम्पोर्ट करता है।
Importing named exports in JavaScript.
यदि जावास्क्रिप्ट प्रोग्रामर के पास एक से ज़्यादा नेम्ड एक्सपोर्ट मॉड्यूल एक्सपोर्ट फंक्शन हैं, तो प्रोग्रामर उन्हें कर्ली ब्रेसिज़ सिंबल में व्रैप करते हुए एग्जैक्ट नेम्ड को यूज़ करके इम्पोर्ट कर सकते हैं।
// main.js
import { total, minus, product, division } from ‘./math.js’;
console.log(total(4, 4)); // Result – 8
console.log(minus(10, 7)); // Result – 3
console.log(product(4, 4)); // Result – 16
console.log(division(30, 3)); // Result – 10
यहाँ इस प्रोग्राम में नेम्ड फ़ंक्शन में total, minus, product, और division को math.js से इम्पोर्ट करता है।
Importing default exports in JavaScript.
जावास्क्रिप्ट प्रोग्राम में डिफ़ॉल्ट एक्सपोर्ट इम्पोर्ट करते समय, प्रोग्रामर कर्ली ब्रेसिज़ सिंबल को अप्लाई नहीं करते हैं, जहा प्रोग्रामर इसे कोई भी नाम दे सकता हैं।
/ main.js
import product from ‘./math.js’; // default import
console.log(product(24, 2)); // Result – 12
इस प्रोग्राम में, प्रोडक्ट वैल्यू को अप्लाई करना math.js से डिफ़ॉल्ट एक्सपोर्ट का एक्साम्प्ल है, और इसे बिना कर्ली ब्रेसिज़ ऑपरेटर के प्रोग्राम में इम्पोर्ट किया जा सकता है। यहाँ प्रोग्रामर इम्पोर्टेड वैल्यू के लिए कोई भी नाम सलेक्ट कर सकते हैं।
Combining example of default and named imports in JavaScript.
जावास्क्रिप्ट प्रोग्रामर एक ही प्रोग्राम फंक्शन मॉड्यूल में नेम्ड एक्सपोर्ट और डिफ़ॉल्ट एक्सपोर्ट दोनों एक्सपोर्ट मेथड को एक ही प्रोग्राम फंक्शन स्टेटमेंट में इम्पोर्ट कर सकते हैं।
// main.js
import product, { total, minus } from ‘./math.js’;
console.log(total(1, 2)); // Result is – 3
console.log(minus(7, 3)); // Result is – 4
console.log(product(3, 3)); // Result is – 9
यहाँ इस प्रोग्राम उदाहरण में, प्रोग्रामर total और minus नेम्ड एक्सपोर्ट और product डिफ़ॉल्ट एक्सपोर्ट को math.js से इम्पोर्ट कर करते हैं।
Renaming imports in JavaScript.
जावास्क्रिप्ट प्रोग्रामर as कीवर्ड को अप्लाई करके नेम्ड इम्पोर्ट का नाम भी प्रोग्राम में चेंज कर सकते हैं।
// main.js
import { total as sum, minus as diff } from ‘./math.js’;
console.log(sum(4, 11)); // Result is – 15
console.log(diff(9, 4)); // Result is – 5
यहाँ इस प्रोग्राम में प्रोग्रामर इम्पोर्ट प्रोसेस के दौरान total का नाम को चेंज करके sum और subtract का नाम चेंज करके diff प्रोग्राम वेरिएबल के रूप में नाम चेंज या रिप्लेस कर देते हैं।
Example of named exports, default exports, all together in a JavaScript program.
जावास्क्रिप्ट प्रोग्रामर, किसी प्रोग्राम में नेम्ड एक्सपोर्ट और डिफ़ॉल्ट एक्सपोर्ट सभी एक साथ कैसे काम करता है। यहाँ प्रोग्रामर दो फ़ाइलें को बनाता है. जिसमे, math.js फाइल फंक्शन एक्सपोर्ट के लिए और main.js फाइल इम्पोर्ट के लिए है।
JavaScript math.js (export module).
// Example of Named Exports
export const total = (p, q) => p + q;
export const minus = (p, q) => p – q;
// Example of Default Export
export default function product(p, q) {
return p * q;
}
// JavaScript Default Export
main.js (Module with Imports):
// here we use Importing both named and default exports in same program
import product, { total, minus } from ‘./math.js’;
console.log(total(4, 4)); // Result is – 8
console.log(minus(9, 2)); // Result is – 7
console.log(product(2, 2)); // Result is – 4
Summary of import and export between files in JavaScript programming.
- Named export features in JavaScript – जावास्क्रिप्ट प्रोग्रामर export कीवर्ड का यूज़ करके कई नाम से कई वैल्यू को एक्सपोर्ट कर सकते हैं।
- export const total = (p, q) => p + q;
- Default export features in JavaScript – जावास्क्रिप्ट प्रोग्रामर एक वैल्यू को डिफ़ॉल्ट एक्सपोर्ट के रूप में एक्सपोर्ट कर सकते हैं।
- export default function product(p, q) { return p * q; }
- Importing named exports in JavaScript – जावास्क्रिप्ट प्रोग्रामर नेम्ड एक्सपोर्ट को इम्पोर्ट करने के लिए कर्ली ब्रेसिज़ को अप्लाई कर सकते है।
- import { total, minus } from ‘./math.js’;
- Importing default exports in JavaScript – इसमें जावास्क्रिप्ट प्रोग्रामर कर्ली ब्रेसिज़ के बिना डिफ़ॉल्ट एक्सपोर्ट इम्पोर्ट कर सकता है।
- import multiply from ‘./math.js’;
- Combining both imports in JavaScript – जावास्क्रिप्ट प्रोग्रामर एक कस्टेटमेंट में डिफ़ॉल्ट और नेम्ड दोनों एक्सपोर्ट को इम्पोर्ट कर सकते हैं।
- import multiply, { total, minus } from ‘./math.js’;
- Renaming imports in JavaScript – जावास्क्रिप्ट प्रोग्रामर as कीवर्ड को अप्लाई करके नेम्ड इम्पोर्ट का नाम चेंज कर सकते हैं।
- import { total as sum } from ‘./math.js’;
- Dynamic imports in JavaScript – जावास्क्रिप्ट प्रोग्रामर प्रोग्राम में import() फ़ंक्शन को यूज़ करके जरूरत के अनुसार मॉड्यूल को एसिंक्रोनस रूप में इम्पोर्ट कर सकते है।
