Skip to main content

Export and Import Modules

Modules: Export & Import

What is the purpose of export keyword in JavaScript modules?​

View Answer:
Interview Response: The export keyword in JavaScript is used to export functions, objects, or primitive values from a module so they can be used by other modules.

Code Example:

Here's a simple example. Suppose we have a module that calculates the area of a circle. We can use the export keyword to make the function available for other modules.

// circle.js
export function area(radius) {
    return Math.PI * radius * radius;
}

Here, the area function is exported from the circle.js module and can now be imported in another JavaScript file with the import statement.

What is the purpose of import keyword in JavaScript modules?​

View Answer:
Interview Response: The `import` keyword in JavaScript is used to bring in functions, objects, or values from another module into the current module, facilitating code reusability and organization.

Code Example:

Here's a simple example. Suppose you want to use the function area from the circle.js module mentioned earlier. You can use the import keyword to import that function.

// app.js
import { area } from './circle.js';

let r = 5;
console.log(`Area of the circle: ${area(r)}`);

In this app.js file, the area function is imported from the circle.js module, and then it is used to calculate the area of a circle with radius 5.

What are the two types of exports in JavaScript modules?​

View Answer:
Interview Response: The two types of exports in JavaScript modules are "named exports", which allow multiple exports per module, and "default export", which allows for one per module.

Code Example:

// mathOperations.js

// Named export
export function add(a, b) {
    return a + b;
}

// Default export
export default function multiply(a, b) {
    return a * b;
}

In this mathOperations.js module, add is a named export and multiply is a default export. You can have multiple named exports in a module, but only one default export.

Can a module have more than one default export?​

View Answer:
Interview Response: No, a module can only have one default export but it can have multiple named exports.

How can you import a default export?​

View Answer:
Interview Response: In JavaScript, a default export can be imported using `import name from "module-name"`, where "name" is the name you choose.

Code Example:

// import from 'mathOperations.js'
import multiply from './mathOperations.js';

console.log(multiply(5, 4)); // 20

In this code, the default export (the multiply function) from the mathOperations.js module is imported and used to multiply 5 and 4. The name multiply here can be anything you choose, as it's a default export.

How can you import a named export?​

View Answer:
Interview Response: In JavaScript, a named export can be imported using import { name } from "module-name", where "name" is the exported entity's name.

Code Example:

// import from 'mathOperations.js'
import { add } from './mathOperations.js';

console.log(add(5, 4)); // 9

In this code, the named export (the add function) from the mathOperations.js module is imported and used to add 5 and 4. The name add must match the exported name in the module.

Can you import all named exports at once?​

View Answer:
Interview Response: Yes, you can import all named exports at once using `import * as aliasName from "module-name"`, which groups all exports under an alias.

Code Example:

// assuming 'mathOperations.js' has multiple named exports

// import from 'mathOperations.js'
import * as mathOps from './mathOperations.js';

console.log(mathOps.add(5, 4)); // 9
console.log(mathOps.subtract(5, 4)); // 1

In this code, all named exports from mathOperations.js are imported into an object mathOps. The functions can then be accessed as properties of this object.

Is it possible to use both default and named exports in a module?​

View Answer:
Interview Response: Yes, a JavaScript module can have both default and named exports, providing flexibility in how items are exported and imported.

Can you rename imports in JavaScript?​

View Answer:
Interview Response: Yes, imports can be renamed in JavaScript using the `as` keyword, like so: `import { originalName as newName } from "module-name"`.

Code Example:

// Assuming 'mathOperations.js' has a named export 'add'

// import from 'mathOperations.js'
import { add as addition } from './mathOperations.js';

console.log(addition(5, 4)); // 9

In this code, the named export add from mathOperations.js is imported and renamed to addition. You can now use addition to refer to the add function from the mathOperations.js module.

How does the export keyword work with declarations in JavaScript?​

View Answer:
Interview Response: We can label any declaration as exported by placing export before it, a variable, function, or class.

Code Example:

// export an array
export let months = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

// export a constant
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// export a class
export class User {
  constructor(name) {
    this.name = name;
  }
}

What is the recommendation for exports before functions and class declarations?​

View Answer:
Interview Response: Export before a class or a function does not make it a function expression, and it is still a function declaration, albeit exported. Most JavaScript style guides do not recommend semicolons after function and class declarations. A semicolon does not need implementation at the end of the export class and export function.

Code Example:

export function sayHi(user) {
  console.log(`Hello, ${user}!`);
} // no ; at the end

Is there another way to export declarations instead of an explicit export?​

View Answer:
Interview Response: Yes, we can export separately using a list of exported variables or function/ class names that we choose to export.

Code Example:

// 📁 say.js
function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

function sayBye(user) {
  console.log(`Bye, ${user}!`);
}

export { sayHi, sayBye }; // a list of exported variables

If you want to import all declarations from a module, what syntax should you use?​

View Answer:
Interview Response: If there is a lot to import, we can import everything as an object using import * as ‹obj ›. In contrast, this may seem an excellent way to access everything collectively. (It is not a recommended approach).

Code Example:

// Example 1: Importing everything in say.js
// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');
---

What is the rationale for explicitly listing all module imports?​

View Answer:
Interview Response: Well, there are a few reasons. Modern build tools (webpack and others) bundle modules together and optimize them to speed up loading and remove unused stuff. Explicitly listing what to import, gives shorter names: sayHi() instead of say.sayHi(). An explicit list of imports gives a better overview of the code structure: what gets used and where. It makes code support and refactoring easier.

Code Example:

// Example 1: Importing everything in say.js
// 📁 main.js
import * as say from './say.js'; // listing everything

say.sayHi('John');
say.sayBye('John');

// Example 2: (Recommended) Only import what we need
// 📁 main.js
import { sayHi } from './say.js'; // explicit list
sayHi('John');

Is it possible to edit or abbreviate the names of our module imports?​

View Answer:
Interview Response: Yes, we can change or shorten the names of our imports. We can use the import “as” syntax to change the import name to a local variable name. You can also use this behavior for exports using the export as syntax.

Code Example:

// 📁 main.js
import { sayHi as hi, sayBye as bye } from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

Can you explain the two main kinds of modules in JavaScript?​

View Answer:
Interview Response: In practice, there are mainly two kinds of modules, modules that contain a library, a pack of functions, and modules that declare a single entity, e.g., a module user.js exports only class User.

What differentiates default and named module exports and imports?​

View Answer:
Interview Response: Named imports use the standard imports with bracket syntax, while default imports can be imported without brackets. Default exports must use the export default syntax to denote that the object is the default export. Technically, we may have both default and named exports in a single module, but people usually do not mix them in practice. A module has either named exports or the default one. Another critical difference is that default exports do not require an entity name (function, class, variable). Not giving a name is fine because there is only one export default per file, so import without curly braces knows what to import.

Code Example:

// 📁 user.js
export default class User { // just add "default" to export as default
  constructor(name) {
    this.name = name;
  }
}

// 📁 main.js - importing default User class
import User from './user.js'; // not {User}, just User

new User('John');

////////////////////////////

// No entity names - these are all perfectly valid default exports

export default class { // no class name
  constructor() { ... }
}

export default function(user) { // no function name
  console.log(`Hello, ${user}!`);
}

// export a single value, without making a variable
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Is it possible to specify the default export without explicitly utilizing it on the default entity (function, class, variable)?​

View Answer:
Interview Response: In some situations, we can use the default keyword to reference the default export. For example, to export a function separately from its definition.

Code Example:

// export a function separately from its definition
function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

// same as if we added "export default" before the function
export { sayHi as default }; // <- referencing sayHi

If there is one main default export and a few named ones in your module. How do you import both exported entities?​

View Answer:
Interview Response: To import both the default and named exports, you must use the import {default as ‹obj›, ‹otherObject›} syntax. The imports must be enclosed in brackets and separated by a comma.

Code Example:

// 📁 user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

// 📁 main.js
import { default as User, sayHi } from './user.js'; // enclosed in curly brackets

new User('John');

Are there any issues with using default exports in JavaScript? Are named exports better?​

View Answer:
Interview Response: Named exports are explicit. Named exports name what exports, so we have that information from them; that is good. Named exports force us to use exactly the right name to import. While for a default export, we always choose the name when importing. This approach is not good because some team members may use different names to import the same thing, which is not good.

Code Example:

// Named exports force us to use exactly the right name to import
import { User } from './user.js';
// import {MyUser} won't work, the name must be {User}

// Default exports we can choose the name when importing
import User from './user.js'; // works
import MyUser from './user.js'; // works too
// could be import Anything... and it'll still work

// there’s a rule that imported variables should correspond to file names
import User from './user.js';
import LoginForm from './loginForm.js';
import func from '/path/to/func.js';

What is the purpose of re-exporting a module in JavaScript?​

View Answer:
Interview Response: Re-exporting a module allows access to specific functionality without giving outsiders access to the internal structure. The idea is that outsiders, other programmers who use our package, should not meddle with its internal structure and search for files inside our package folder. We export what is necessary and keep the rest hidden from prying eyes.

Code Example:

// 📁 auth/index.js

// import login/logout and immediately export them
import { login, logout } from './helpers.js';
export { login, logout };

// import default as User and export it
import User from './user.js';
export { User };
// ...

Can you import modules conditionally or dynamically in JavaScript?​

View Answer:
Interview Response: Yes, JavaScript supports dynamic imports, allowing modules to be loaded conditionally or on demand at runtime, which can optimize performance.

What file extensions are typically associated with JavaScript modules?​

View Answer:
Interview Response: JavaScript modules are typically associated with the .js, .mjs (for ES modules), or .cjs (for CommonJS modules) file extensions.