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! 🎉

Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.