Modules - export & import

The export statement is used to export functions, objects or primitives from a given file (or module).

There are two different types of export.

1. Multiple named exports

// utils.js
export const appValue = Math.PI + Math.SQRT2;

function getRandomNumber() {
    return Math.random();
}
function getSum(a, b) {
    return a + b;
}

export { getRandomNumber, getSum }

and import will be like as below

// main.js
import { appValue, getRandomNumber, getSum } from './utils';
console.log(appValue); // 4.555806215962888
console.log(getRandomNumber()); // some random number
console.log(getSum(10, 20)); // 30

We can also import the complete module:

// main.js
import * as appUtils from './utils';
console.log(appUtils.appValue); // 4.555806215962888
console.log(appUtils.getRandomNumber()); // some random number
console.log(appUtils.getSum(2, 5)); // 7

Import a single member of a module.

// main.js
import { getSum } from './utils';
console.log(getSum(2, 5)); // 7

Import a member with a more convenient alias.

// main.js
import { getSum as appSum } from './utils';
console.log(appSum(4, 6)); // 10

we can use both default export and named exports like as below:

// utils.js
function getRandomNumber() {
    return Math.random();
}
function getSum(a, b) {
    return a + b;
}
function getGreet(name:string) {
    return `Welcome ${name}`;
}
export default getGreet; // default export
export { getRandomNumber, getSum } // named exports

// main.js
import getGreet, { getRandomNumber, getSum } from './utils';
console.log(getGreet('gns'));
console.log(getRandomNumber()); // some random number
console.log(getSum(10, 20)); // 30

// main.js
import getGreet, * as appUtils from './utils';
console.log(getGreet('gns'));
console.log(appUtils.getRandomNumber()); // some random number
console.log(appUtils.getSum(10, 20)); // 30

2. Single default export

It should be only one defaul export per script.

Export a single value from the module then you can use default export.

Example 1:

// utils.js
export default function(a, b) {
    return a + b;
};

// main.js
import appSum from './utils';
console.log(appSum(4, 6)); // 10

Example 2:

// utils.js
export default function getSum(a, b) {
    return a + b;
};

// main.js
import getSum from './utils';
console.log(getSum(4, 6)); // 10

Example 3:

// utils.js
var util = {
    getRandomNumber: function() {
        return Math.random();
    },
    getSum: function(a, b) {
        return a + b;
    }
};
export default util;

// main.js
import util from './utils';
console.log(util.getRandomNumber()); // some random number
console.log(util.getSum(10, 20)); // 30