# Day 38 - 17/10

Plan:&#x20;

* Learning Js: Modules, JSON, Debugging, Style guide, Best practices, Mistakes, Performance, Reserved words, ...
* Converting figma to html: [https://www.figma.com/file/xciG3uwGq4GWWHy3DuFlnM/About-us?type=design\&node-id=0%3A1\&mode=design\&t=0Pz86OGygx2PqiXA-1](https://www.figma.com/file/xciG3uwGq4GWWHy3DuFlnM/About-us?type=design\&node-id=0%3A1\&mode=design\&t=0Pz86OGygx2PqiXA-1)

Progress:&#x20;

## <mark style="color:blue;">Module</mark>

### Module

Break up code into separate files; easier to maintain a code-base.

Modules are imported from external files with the `import` statement and rely on `type="module"` in the \<script> tag.

`<script type="module">`

`import message from "./message.js";`&#x20;

`</script>`

### Export

#### Named Export

use keyword `export` in-line individually, or all at once at the bottom to create named export

`export const name = "Jesse";`



`const name = "Jesse";`

`export {name};`

#### Default Export

Can only have one default export in a file

`const message = () => {`&#x20;

`const name = "Jesse";`&#x20;

`const age = 40;`&#x20;

`return name + ' is ' + age + 'years old.';`&#x20;

`};`

`export default message;`

When a module defines a default export, you can import that without curly braces

`import message from "./massage.js";`

`massage(); //Jesse is 40 years old.`

### Import

* from named export:

`import { name } from "./person.js";`

* from default export:

`import message from "./message.js";`
