diff --git a/blog_posts/javascript-module-cheatsheet.md b/blog_posts/javascript-module-cheatsheet.md new file mode 100644 index 000000000..45982956d --- /dev/null +++ b/blog_posts/javascript-module-cheatsheet.md @@ -0,0 +1,140 @@ +--- +title: javascript-module-cheatsheet +type: cheatsheet +tags: javascript,cheatsheet +authors: chalarangelo +cover: blog_images/javascript-swap-two-variables.jpg +excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet. +--- + +**Named exports** + +```js +/* environment.js */ +export const key = 'this-is-a-secret'; + +/* index.js */ +import { key } from 'environment'; +``` + +- Named exports use a name. +- A module can have any number of named exports. +- Import and export name should be the same. +- Importing requires `{}`. + +**Default exports** + +```js +/* environment.js */ +const environment = { + key: 'this-is-a-secret', + port: 8000 +}; + +export default environment; +/* index.js */ +import environment from 'environment'; + +const { key, port } = environment; +``` + +- Default exports expose a default value, use the `default` keyword. +- A module can only have one default export. +- Import name can be anything. +- Importing does not require `{}`. + +**Default + named** + +```js +/* environment.js */ +export const envType = 'DEV'; + +const environment = { + key: 'this-is-a-secret', + port: 8000 +}; + +export default environment; + +/* index.js */ +import { envType }, environment from 'environment'; + +const { key, port } = environment; +``` + +- Default and named exports can be mixed. +- Rules about number of exports and naming conventions apply as before. +- Import rules apply as before, can be mixed if necessary. + +**Export list** + +```js +/* environment.js */ +const key = 'this-is-a-secret'; +const port = 8000; + +export { + key, + port +}; + +/* index.js */ +import { key, port } from 'environment'; +``` + +- An export list is a compact way to write multiple named exports. +- Rules about number of exports, naming conventions and import rules are the same as those of named exports. +- Export lists are not objects. + +**Rename export** + +```js +/* environment.js */ +const key = 'this-is-a-secret'; + +export { key as authKey }; + +/* index.js */ +import { authKey } from 'environment'; +``` + +- Named exports can make use of the `as` keyword to rename an export. +- Import name should be the same as the renamed export. + +**Rename import** + +```js +/* environment.js */ +export const key = 'this-is-a-secret'; + +/* index.js */ +import { key as authKey } from 'environment'; +``` + +- Named imports can make use of the `as` keyword to rename an import. +- Import name (before the `as` keyword) should be the same as the export. + +**Import all** + +```js +/* environment.js */ +export const envType = 'DEV'; + +const environment = { + key: 'this-is-a-secret', + port: 8000 +}; + +export default environment; + +/* index.js */ +import * as env from 'environment'; + +const { default: { key, port}, envType } = environment; +``` + +- Use `*` to import everything a module exports. +- Named exports will be available by their names on the imported object. +- Default export will be available as the `default` key on the imported object. + +**Image credit:** [roman manukyan](https://unsplash.com/@romanukyan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)