الـ Default مقابل الـ Named Exports

جزء من قسم Object Oriented Programming في رحلة JavaScript على Coddy — الدرس 10 من 56.

في وحدات JavaScript، لديك طريقتان رئيسيتان لتصدير الكود الخاص بك: التصديرات المسماة (named exports) والتصديرات الافتراضية (default exports).

تسمح لك التصديرات المسماة (Named Exports) بتصدير قيم متعددة من وحدة (module):

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

عند استيراد الصادرات المسماة (named exports)، يجب عليك استخدام نفس الأسماء تماماً داخل أقواس معقوفة:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

إذا كنت بحاجة إلى إعادة تسمية استيراد مسمى (named import)، فاستخدم الكلمة المفتاحية as لإنشاء اسم مستعار:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

تسمح لك عمليات التصدير الافتراضية (Default Exports) بتصدير قيمة رئيسية واحدة من وحدة برمجية (module):

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

عند استيراد تصدير افتراضي (default export)، يمكنك استخدام أي اسم تريده بدون أقواس معقوفة:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

متى نستخدم أياً منهما؟ استخدم named exports عندما توفر الوحدة (module) أدوات مساعدة متعددة ذات صلة (على سبيل المثال، مجموعة من الدوال المساعدة). استخدم default export عندما يكون للوحدة غرض أساسي واحد أو قيمة رئيسية واحدة (على سبيل المثال، class، أو component، أو configuration object).

يمكنك الجمع بين كلا نوعي عمليات التصدير في وحدة برمجية واحدة:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

وقم باستيرادهم معاً:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

التحدي

سهل

لديك ملفان. مهمتك هي إعداد عمليات التصدير (exports) في calculator.js وعمليات الاستيراد (imports) في main.js.

في calculator.js: قم بتصدير calculate كـ default و square كـ named
في main.js: قم باستيراد كلتا الدالتين بشكل صحيح

ستتحقق الاختبارات مما يلي:

استخدام التصدير الافتراضي (Default export) لـ calculate
استخدام التصدير المسمى (Named export) لـ square
كلا الاستيرادين يعملان بشكل صحيح

ورقة مرجعية

التصديرات المسماة (Named Exports) — تصدير واستيراد قيم متعددة بالاسم الدقيق:

// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// app.js
import { add, subtract } from './math.js';
import { add as sum } from './math.js'; // اسم مستعار باستخدام "as"

التصديرات الافتراضية (Default Exports) — تصدير قيمة رئيسية واحدة؛ الاستيراد بأي اسم، بدون أقواس معقوفة:

// user.js
export default { name: 'John', age: 30 };

// app.js
import person from './user.js';

الجمع بينهما — الاستيراد الافتراضي يأتي أولاً، والتصديرات المسماة داخل أقواس معقوفة:

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

// app.js
import myCar, { wheels } from './vehicle.js';

متى تستخدم أياً منهما: استخدم التصديرات المسماة لعدة أدوات مساعدة ذات صلة؛ استخدم التصدير الافتراضي لقيمة أساسية واحدة للوحدة (فئة، مكون، إعداد).

جرّب بنفسك

// TODO: استيراد كلتا الدالتين هنا من calculator.js


// اختبار
console.log(calculate(10, 5, '+')); // يجب أن تكون النتيجة 15
console.log(square(4));             // يجب أن تكون النتيجة 16