WPDD

WordPress Develop & Design

Modules

ES6 modules allow you to split your code into separate files and import/export them as needed.

ES6 Module Features

Named Exports:

Allow you to export multiple values/objects/functions/classes from a module. You can later import these by their specific names.

// In mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// In another file
import { add, subtract } from './mathUtils.js';

Default Exports:

Allow you to export a single value/object/function/class as the “default” export of a module. You can import it without using curly braces.

// In mathUtils.js
const multiply = (a, b) => a * b;
export default multiply;

// In another file
import multiply from './mathUtils.js';

Both approaches are part of the ES6 module system. They’re designed to help organize code by explicitly defining what parts of a module should be exposed for use in other modules.