Понимание фигурных скобок в операторах импорта JavaScript

В JavaScript оператор импорта используется для импорта функций, объектов или значений из других модулей. При использовании операторов импорта вы могли заметить в некоторых случаях использование фигурных скобок ({}). В этой статье мы рассмотрим различные сценарии, в которых фигурные скобки требуются в операторах импорта, и предоставим примеры кода для каждого случая.

Методы, требующие фигурных скобок в операторах импорта:

  1. Импорт именованного экспорта.
    Когда модуль экспортирует несколько переменных, функций или объектов с помощью ключевого слова экспорта, вам необходимо использовать фигурные скобки, чтобы импортировать их по отдельности. Вот пример:
// module.js
export const name = 'John';
export const age = 25;
// main.js
import { name, age } from './module.js';
console.log(name); // Output: John
console.log(age);  // Output: 25
  1. Импорт определенного именованного экспорта:
    Если модуль экспортирует несколько переменных, но вы хотите импортировать только определенную из них, вы можете использовать фигурные скобки для импорта этого конкретного экспорта. Вот пример:
// module.js
export const name = 'John';
export const age = 25;
// main.js
import { name } from './module.js';
console.log(name); // Output: John
  1. Импорт экспорта по умолчанию с именованными экспортами:
    Если модуль имеет как экспорт по умолчанию, так и именованный экспорт, вы можете использовать фигурные скобки для импорта именованных экспортов вместе с экспортом по умолчанию. Вот пример:
// module.js
export default 'Hello';
export const name = 'John';
// main.js
import defaultExport, { name } from './module.js';
console.log(defaultExport); // Output: Hello
console.log(name);          // Output: John
  1. Импорт экспорта по умолчанию с другим именем:
    Если у модуля есть экспорт по умолчанию, но вы хотите импортировать его с другим именем, вы можете использовать фигурные скобки, чтобы присвоить новое имя. Вот пример:
// module.js
export default 'Hello';
// main.js
import { default as greeting } from './module.js';
console.log(greeting); // Output: Hello