diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md index 46366eb342d..5657888e9d2 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md @@ -8,7 +8,88 @@ dashedName: what-is-a-module-in-javascript-and-how-can-you-import-and-export-mod # --description-- -Watch the video lecture and answer the questions below. +Watch the video or read the transcript and answer the questions below. + +# --transcript-- + +What is a module in JavaScript, and how can you import and export modules in your program? + +In JavaScript, a module is a self-contained unit of code that encapsulates related functions, classes, or variables. + +Think of a module as a building block for your application, much like a chapter in a book. Each module focuses on a specific functionality, making your code more organized, maintainable, and reusable. Modules help prevent naming conflicts and allow you to structure your application into separate, interconnected pieces. + +The concept of modules in JavaScript has evolved over time, but the most widely used and supported approach is the ES6 (ECMAScript 2015) module system. This system provides a standardized way to define and use modules across different JavaScript environments. + +To create a module, you write your JavaScript code in a separate file. Any variables, functions, or classes you want to make available to other parts of your application need to be explicitly exported. You can do this using the `export` keyword. + +For example, let's say you have a file called `math.js` with some math functions: + +```js +export function add(a, b) { + return a + b; +} + +export function subtract(a, b) { + return a - b; +} + +const PI = 3.14159; +export { PI }; +``` + +In this example, we're exporting two functions (`add` and `subtract`) and a constant (`PI`). You can export as many items as you need from a single module. + +To use these exported items in another part of your application, you need to import them. This is done using the `import` keyword. + +Let's say you want to use these math functions in a file called `app.js`: + +```js +import { add, subtract, PI } from './math.js'; + +console.log(add(5, 3)); // Outputs: 8 +console.log(subtract(10, 4)); // Outputs: 6 +console.log(PI); // Outputs: 3.14159 +``` + +Here, we're importing the specific functions and constant we need from the `math.js` module. The `'./math.js'` part tells JavaScript where to find the module file relative to the current file. + +Sometimes, you might want to import everything a module exports. You can do this using the asterisk (`*`) syntax: + +```js +import * as Math from './math.js'; + +console.log(Math.add(5, 3)); // Outputs: 8 +console.log(Math.subtract(10, 4)); // Outputs: 6 +console.log(Math.PI); // Outputs: 3.14159 +``` + +In this case, all exports from `math.js` are imported as properties of an object called `Math`. + +Another common pattern is to have a default export in a module. This is typically used when a module primarily exports a single function. You can only have one default export per module. + +Here's how it looks: + +```js +// In math.js +export default function multiply(a, b) { + return a * b; +} + +// In app.js +import multiply from './math.js'; + +console.log(multiply(4, 5)); // Outputs: 20 +``` + +Notice that when importing a default export, you don't need to use curly braces, and you can name the import whatever you want. + +It's important to note that to use ES6 modules in the browser, you need to specify the `type` as `module` in your `script` tag: + +```html + +``` + +Modules provide a powerful way to organize and structure your JavaScript code. They allow you to break your application into smaller, manageable pieces, promote code reuse, and help maintain a clean separation of concerns. As you build larger applications, you'll find that modules become an essential tool in your JavaScript development toolkit. # --questions--