Import aliases
Learn to rename imports with as.
Renaming with as
You can rename a named import with the as keyword. This lets the exported name and the local name differ.
import { calculate as calc } from './math.js';Here the module's calculate value is used locally as calc. This is handy when two modules export values with the same name.
Namespace import
To gather every value of a module into one object, use import * as. The resulting object is the module's namespace.
import * as utils from './utils.js';
console.log(utils.format(today));Here format and every other export become properties of the utils object. It makes clear which value you use.
Exercise Import a value with an alias
Import the formatDate value from ./utils.js as a named import renamed to format. Then log the result of format(today) with console.log.
Show example solution
Inside braces write formatDate as format, then call format(today).
Example solution:
import { formatDate as format } from './utils.js';
console.log(format(today));Test yourself
-
Which keyword renames a named import?
- from
- export
- default
- as
Show answer
as — Correct! The as keyword renames the imported value.
-
Complete the renaming syntax
import { calculate ____ calc } from './math.js';Show answer
import { calculate as calc } from './math.js'; -
Match the import styles
- { a as b }
- renames one value
- * as ns
- gathers all into an object
- as
- the renaming keyword
- from
- names the source module