Varsayılan ve Adlandırılmış Dışa Aktarmalar

Coddy'nin JavaScript Journey'sinin Nesne Yönelimli Programlama bölümünün bir parçası — ders 10 / 56.

JavaScript modüllerinde, kodunuzu dışa aktarmak için iki ana yolunuz vardır: adlandırılmış dışa aktarmalar (named exports) ve varsayılan dışa aktarmalar (default exports).

Adlandırılmış Dışa Aktarmalar (Named Exports), bir modülden birden fazla değer dışa aktarmanıza olanak tanır:

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

Adlandırılmış dışa aktarmaları (named exports) içe aktarırken, süslü parantezler içinde tam olarak aynı adları kullanmalısınız:

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

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

Adlandırılmış bir içe aktarmayı yeniden adlandırmanız gerekirse, bir takma ad oluşturmak için as anahtar kelimesini kullanın:

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

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

Varsayılan Dışa Aktarmalar (Default Exports), bir modülden tek bir ana değeri dışa aktarmanıza olanak tanır:

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

export default user;

Bir varsayılan dışa aktarmayı (default export) içe aktarırken, süslü parantezler kullanmadan istediğiniz herhangi bir ismi kullanabilirsiniz:

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

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

Hangisi ne zaman kullanılmalı? Bir modül birden fazla ilişkili yardımcı araç (örneğin, bir yardımcı fonksiyonlar koleksiyonu) sağladığında named exports kullanın. Bir modülün tek bir birincil amacı veya ana değeri olduğunda (örneğin, bir sınıf, bir bileşen veya bir yapılandırma nesnesi) bir default export kullanın.

Her iki dışa aktarma türünü de tek bir modülde birleştirebilirsiniz:

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

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

export default car;

Ve bunları birlikte içe aktarın:

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

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

Görev

Kolay

İki dosyanız var. Göreviniz calculator.js dosyasında dışa aktarmaları (exports) ve main.js dosyasında içe aktarmaları (imports) ayarlamaktır.

calculator.js içinde: calculate fonksiyonunu default olarak ve square fonksiyonunu named (isimlendirilmiş) olarak dışa aktarın
main.js içinde: Her iki fonksiyonu da doğru şekilde içe aktarın

Testler şunları kontrol edecektir:

calculate için varsayılan (default) dışa aktarma kullanıldı mı
square için isimlendirilmiş (named) dışa aktarma kullanıldı mı
Her iki içe aktarma da doğru çalışıyor mu

Kopya kağıdı

Adlandırılmış Dışa Aktarmalar (Named Exports) — birden fazla değeri tam adıyla dışa aktarın ve içe aktarın:

// 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" ile takma ad

Varsayılan Dışa Aktarmalar (Default Exports) — tek bir ana değeri dışa aktarın; herhangi bir adla, süslü parantez kullanmadan içe aktarın:

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

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

Her İkisini Birleştirme — varsayılan içe aktarma önce gelir, adlandırılmış içe aktarmalar süslü parantez içindedir:

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

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

Hangisi ne zaman kullanılır: birden fazla ilgili yardımcı işlev için adlandırılmış dışa aktarmaları kullanın; bir modülün tek bir birincil değeri (sınıf, bileşen, yapılandırma) için varsayılan dışa aktarmayı kullanın.

Kendin dene

// YAPILACAK: Her iki fonksiyonu da buradan calculator.js dosyasından içe aktarın


// Test
console.log(calculate(10, 5, '+')); // 15 çıktısını vermeli
console.log(square(4));             // 16 çıktısını vermeli