es2015 import export explanation.md

with es2015 modules, every file can export both "named exports" and a "default export". But the "default export" is just an export with the name "default". To do a named export, you can do:

const foo = 5;
function bar() {}
class Baz {}
export { foo, bar, Baz };
// or
export const foo = 5; // uses the name of the variable declaration
export function bar() {} // uses the name of the function
export class Baz {} // uses the name of the class

To do a default export, you do:

// export default <expression>, so:
export default function bar() {} // works because it's a function expression
export default class Baz {}; // works because it's a class expression
export default const foo = 5; // doesn't work because there's no such thing as a variable declaration expression
// so for that one you have to do this instead:
const foo = 5;
export default foo;

To import a default export, it's pretty straightforward:

// file1.js
export default function wow() {}

// file2.js
import wow from "./file1.js";
wow();

You can call the default import whatever you want when you import it:

// file2.js
import incredible from "./file1.js"
incredible();

To import a named export, you use curly braces:

// file1.js
export function wow() {}

// file2.js
import { wow } from "./file1.js"; // this means, get the import with the name "wow" and import it as "wow" here
wow();

You can also rename the import when you import it:

//file2.js
import { wow as incredible } from "./file1.js"; // this means, get the import with the name "wow" and import it as "incredible" here
incredible();

You can import more than one named export at once:

// file1.js
export const ONE = 1;
export const TWO = 2;

// file2.js
import { ONE, TWO } from "./file1";
console.log(ONE); // 1
console.log(TWO); // 2

You can also import a default export and a named export at the same time:

// file1.js
export default 1;
export const TWO = 2;

// file2.js
import ONE, { TWO } from "./file1";

You can also get all the named exports from a file into an object. This is called a namespace import, or "import star":

// file1.js
export const ONE = 1;
export const TWO = 2;

// file2.js
import * as Numbers from "./file1"
console.log(Numbers); { ONE: 1, TWO: 2 };

You can do a namespace import at the same time as a default import:

// file1.js
export default function wow() {}
export const ONE = 1;
export const TWO = 2;

// file2.js
import wow, * as Numbers from "./file1";
wow();
console.log(Numbers); // { ONE: 1, TWO: 2 }

Finally, if you just wanna say "run this file" and don't care about getting anything back from it, you can do this;

// file1.js
console.log("hi");

// file2.js
import "./file1"; // hi