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

في وحدات 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