Mastering Conditional Imports in JavaScript Modules

Conditional Imports:

Write a JavaScript program that imports a specific module conditionally based on a runtime value.

Solution-1: Using import() with an if Condition

JavaScript Code:

File: mathOperations.js

// mathOperations.js
// Exporting functions from mathOperations.js
export const add = (a, b) => a + b; // Adds two numbers
export const multiply = (a, b) => a * b; // Multiplies two numbers

File: main.js

//main.js
// Function to conditionally import a module and use its functions
async function calculate(a, b, operation) {
  if (operation === 'add') {
    // Conditionally importing the module for addition
    const { add } = await import('./mathOperations.js');
    console.log(add(a, b)); // Logs the sum
  } else if (operation === 'multiply') {
    // Conditionally importing the module for multiplication
    const { multiply } = await import('./mathOperations.js');
    console.log(multiply(a, b)); // Logs the product
  } else {
    console.log('Invalid operation'); // Handles invalid input
  }
}

// Calling the function
calculate(2, 3, 'add'); // Logs 5
calculate(2, 3, 'multiply'); // Logs 6

Output:

5
6

Explanation:

• mathOperations.js exports add and multiply functions.
• In main.js, the calculate function takes parameters a, b, and operation.
• The if condition checks the value of operation.
• Based on the condition, the appropriate function (add or multiply) is dynamically imported and executed.

Solution-2: Using switch Case for Conditional Imports

JavaScript Code:

File: stringOperations.js

// stringOperations.js
// Exporting functions from stringOperations.js
export const toUpperCase = (str) => str.toUpperCase(); // Converts a string to uppercase
export const toLowerCase = (str) => str.toLowerCase(); // Converts a string to lowercase

File: main.js

//main.js
// Function to conditionally import a module for string operations
async function stringOperation(str, operation) {
  switch (operation) {
    case 'uppercase': {
      // Importing the module for converting to uppercase
      const { toUpperCase } = await import('./stringOperations.js');
      console.log(toUpperCase(str)); // Logs the uppercase version
      break;
    }
    case 'lowercase': {
      // Importing the module for converting to lowercase
      const { toLowerCase } = await import('./stringOperations.js');
      console.log(toLowerCase(str)); // Logs the lowercase version
      break;
    }
    default:
      console.log('Invalid operation'); // Handles invalid input
  }
}

// Calling the function
stringOperation('Hello', 'uppercase'); // Logs 'HELLO'
stringOperation('Hello', 'lowercase'); // Logs 'hello'

Output:

HELLO
hello

Explanation:

• stringOperations.js exports toUpperCase and toLowerCase functions.
• In main.js, the stringOperation function accepts str and operation as inputs.
• The switch statement is used to determine which function to import based on the operation value.
• The appropriate function is dynamically imported and executed.

Improve this sample solution and post your code through Disqus

Previous: Dynamic Imports in JavaScript Modules.
Next: Constants Export and Import in JavaScript Modules.