Exports par défaut vs nommés

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 10 sur 56.

Dans les modules JavaScript, vous avez deux manières principales d'exporter votre code : les exports nommés et les exports par défaut.

Les exports nommés vous permettent d'exporter plusieurs valeurs à partir d'un module :

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

Lors de l'importation d'exports nommés, vous devez utiliser exactement les mêmes noms à l'intérieur d'accolades :

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

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

Si vous avez besoin de renommer un import nommé, utilisez le mot-clé as pour créer un alias :

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

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

Les exports par défaut vous permettent d'exporter une seule valeur principale à partir d'un module :

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

export default user;

Lors de l'importation d'un export par défaut, vous pouvez utiliser n'importe quel nom sans accolades :

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

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

Quand utiliser lequel ? Utilisez les exports nommés lorsqu'un module fournit plusieurs utilitaires liés (par exemple, une collection de fonctions d'aide). Utilisez un export par défaut lorsqu'un module a un objectif principal ou une valeur principale (par exemple, une classe, un composant ou un objet de configuration).

Vous pouvez combiner les deux types d'exports dans un seul module :

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

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

export default car;

Et importez-les ensemble :

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

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

Défi

Facile

Vous avez deux fichiers. Votre tâche consiste à configurer les exports dans calculator.js et les imports dans main.js.

Dans calculator.js : Exportez calculate en tant que default et square en tant que named
Dans main.js : Importez les deux fonctions correctement

Les tests vérifieront :

L'export par défaut est utilisé pour calculate
L'export nommé est utilisé pour square
Les deux imports fonctionnent correctement

Aide-mémoire

Exports nommés — exportez et importez plusieurs valeurs par leur nom exact :

// 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'; // alias avec "as"

Exports par défaut — exportez une valeur principale ; importez avec n'importe quel nom, sans accolades :

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

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

Combiner les deux — l'importation par défaut vient en premier, les importations nommées entre accolades :

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

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

Quand utiliser lequel : utilisez les exports nommés pour plusieurs utilitaires liés ; utilisez un export par défaut pour la valeur principale unique d'un module (classe, composant, configuration).

Essayez vous-même

// À FAIRE : Importer les deux fonctions ici depuis calculator.js


// Test
console.log(calculate(10, 5, '+')); // Devrait afficher 15
console.log(square(4));             // Devrait afficher 16