JavaScript ES6 Modules

What are ES6 modules?

ES6 modules are a feature in JavaScript that allows you to divide your code into reusable components, each in its own file. This modular approach improves code organization and maintainability.

How do you create an ES6 module?

You can create an ES6 module by using the export keyword to export functions, objects, or variables from a module file.


// module.js
export const PI = 3.14;
export function calculateArea(radius) {
  return PI * radius * radius;
}

How do you import an ES6 module?

You can import functions, objects, or variables from an ES6 module using the import keyword.


// main.js
import { PI, calculateArea } from './module.js';

console.log(PI); // 3.14
console.log(calculateArea(5)); // 78.5

What is the difference between named exports and default exports?

Named exports allow you to export multiple values from a module, while default exports allow you to export a single value from a module. You can import named exports using curly braces, while default exports can be imported without them.


// Named export
export const name = 'Alice';

// Default export
export default function greet() {
  console.log('Hello!');
}

// Importing named and default exports
import greet, { name } from './module.js';

Can you provide an example of default export?


// module.js
export default function greet() {
  console.log('Hello, world!');
}

// main.js
import greet from './module.js';
greet(); // Outputs: Hello, world!

How do you re-export modules?

You can re-export modules using the export keyword in combination with import to forward the imported bindings.


// moduleA.js
export const valueA = 42;

// moduleB.js
export { valueA } from './moduleA.js';

What is the purpose of `import.meta`?

import.meta is an object that contains metadata about the module, such as its URL. This can be useful for dynamic imports and module-specific information.


console.log(import.meta.url); // Outputs the URL of the current module

What is a module script in HTML?

A module script in HTML allows you to use ES6 modules directly in your HTML by specifying type="module" in the <script> tag. This enables module features in the browser.

How do ES6 modules handle scope?

ES6 modules have their own scope, meaning variables and functions defined in a module are not added to the global scope. This helps prevent naming conflicts between different modules.


// module.js
const privateVar = 'I am private';

export function getPrivateVar() {
  return privateVar;
}

// main.js
import { getPrivateVar } from './module.js';
console.log(getPrivateVar()); // Outputs: I am private
// console.log(privateVar); // ReferenceError: privateVar is not defined

Can you use conditional imports in ES6 modules?

Yes, you can conditionally import modules using dynamic import syntax, which returns a promise. This is useful for lazy loading modules.


const condition = true;

if (condition) {
  import('./module.js')
    .then(module => {
      module.greet();
    });
}

Ads

‹ JavaScript Interview