How to Rename Named Imports in JavaScript

Renaming imports in JavaScript can be particularly useful when you need to avoid naming conflicts or when you want to make your code more readable by using names that better fit your project's context.

Thankfully it's pretty easy, let's see how:

How to

For named exports, you can easily rename them during the import process.

Example Module (stringUtils.js):

export function toUpperCase(str) {
  return str.toUpperCase();
}

export function toLowerCase(str) {
  return str.toLowerCase();
}

Importing with New Names:

import { toUpperCase as makeUpperCase, toLowerCase as makeLowerCase } from './stringUtils.js';

console.log(makeUpperCase('hello')); // Output: HELLO
console.log(makeLowerCase('WORLD')); // Output: world

And that's it! Just importing as another name works! 🎉