Modules Module #29

Question 1

How is imported module syntax represented

Answer 1

import package from ‘module-name’

Question 2

What’s the definition of a JavaScript Module?

Answer 2

A module is a JavaScript file that exports one or more values (objects, functions or variables), using the export keyword.

Question 3

What gets exported when running export default?

Answer 3

An anonymous function

Question 4

How can a module be imported into HTML?

Answer 4

Script tag with type= module as below

Note: this module import behaves like a defer script load. See efficiently load JavaScript with defer and async

It’s important to note that any script loaded with type=”module” is loaded in strict mode.

Question 5

What’s the advantage of using export default on scripts that you plan on importing into HTML?

Answer 5

Once the script is loaded you can name it whatever you like and use it in a different JS script

Question 6

How can you import a React file?

Answer 6

You can import the default export, and any non-default export by name, like in this common React import:

import React, { Component } from ‘react’

Question 7

How would you rename a module on import?

Answer 7

import { someModule, anotherModule as newlyNamed} from ‘module-name’

Question 8

How are modules exported?

Answer 8

export default functionName

example: export default str => str.toUpperCase( )

Question 9

absolute paths are supported for imports

Answer 9

import toUpperCase from ‘https://flavio-es-modules-example.glitch.me/uppercase.js’

Question 10

relative paths are also supported

Answer 10

import { toUpperCase } from ‘/uppercase.js’
import { toUpperCase } from ‘../uppercase.js’

Always begin the path with a / or ../ THATS NORMAL

Question 11

How are multiple functions exported?

Answer 11

Call their names. Example:
const a = 1
const b = 2
const c = 3

export { a, b, c }

Question 12

How does a module import multiple modules

Answer 12

Using the universal selector * as such:

import * from ‘module-name’