Borislav Hadzhiev
Last updated: Mar 28, 2022
Check out my new book
To import all exports from a file in JavaScript:
A
.B
as
import * as myObj from './another-file'
.myObj.myFunction()
in file B
.Here is an example of exporting multiple values from a file called
another-file.js
.
// 👇️ all named exports export const getEmployee = () => { return {id: 3, salary: 300}; }; export function getDeveloper() { return {name: 'James'}; } export const department = 'front-end';
Here is how we would import all of the exports into a file called index.js
.
import * as company from './another-file.js'; const emp = company.getEmployee(); console.log(emp); // 👉️ {id: 3, salary: 300} const dev = company.getDeveloper(); console.log(dev); // 👉️ {name: 'James'} console.log(company.department); // 👉️ "front-end"
This pattern is called creating a module object and is used when importing a large number of things.
The syntax grabs all of the exports from another-file.js
and makes them
available as members of an object called company
inside of the index.js
file.
another-file.js
module if you have to. The example above assumes that another-file.js
and index.js
are located in the same directory.For example, if another-file.js
was located one directory up, you'd have to
import as import * as company from '../another-file.js'
.
The import/export syntax is called JavaScript modules.
The example above uses named exports.
You could have also used named imports in index.js
and explicitly stated the
names of the imports.
// 👇️ named imports import {getEmployee, getDeveloper, department} from './another-file.js'; const emp = getEmployee(); console.log(emp); // 👉️ {id: 3, salary: 300} const dev = getDeveloper(); console.log(dev); // 👉️ {name: 'James'} console.log(department); // 👉️ "front-end"
The code snipped above achieves the same goal as importing all exports from the
file via import * as company from './another-file.js'
.
This approach is more widely used as it is more concise and direct.
The module you are importing from might also contain a default export.
If the module you are importing from has a default export, you would import it
by removing the curly braces around its name or accessing it on the namespace as
myObj.default
.
// 👇️ default export export default function sum(a, b) { return a + b; }
And here is how you would import and use the default export with the module object pattern.
import * as myObj from './another-file.js'; console.log(myObj.default(50, 50)); // 👉️ 100
Notice that the default export is a function named sum
, but we access it as
.default
with this pattern.
A more intuitive approach is to import the things you need directly.
// 👇️ all named exports export const getEmployee = () => { return {id: 3, salary: 300}; }; export function getDeveloper() { return {name: 'James'}; } export const department = 'front-end'; // 👇️ default export export default function sum(a, b) { return a + b; }
And here is how you would import the members you need.
import sum, {getEmployee, getDeveloper, department} from './another-file.js'; console.log(sum(50, 50)); // 👉️ 100 console.log(getEmployee()); // 👉️ {id: 3, salary: 300} console.log(getDeveloper()); // 👉️ {name: 'James'} console.log(department); // 👉️ 'front-end
In my experience, most real world codebases exclusively use named exports and imports because they make it easier to leverage your IDE for autocompletion and auto-imports.
You also don't have to think about which members are exported with a default or named export.