You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+109-1Lines changed: 109 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -258,4 +258,112 @@ var luke = { occupation: 'jedi', father: 'anakin' }
258
258
var {occupation, father} = luke;
259
259
console.log(occupation); // 'jedi'
260
260
console.log(father); // 'anakin'
261
-
```
261
+
```
262
+
263
+
## Modules
264
+
265
+
Prior to ES6, we used libraries such as **Browserify** to create modules on the client-side, and **require** in **Node.js**. With ES6, we can now directly use modules of all types (AMD and CommonJS).
266
+
267
+
### Exporting in CommonJS
268
+
269
+
```javascript
270
+
module.exports=1
271
+
module.exports= { foo:'bar' }
272
+
module.exports= ['foo', 'bar']
273
+
module.exports=functionbar () {}
274
+
```
275
+
276
+
### Exporting in ES6
277
+
278
+
With ES6, we have various flavors of exporting. We can perform **Named Exports**:
279
+
280
+
```javascript
281
+
exportvar name ='David';
282
+
exportvar age =25;
283
+
```
284
+
285
+
As well as **exporting a list** of objects:
286
+
287
+
```javascript
288
+
functionsumTwo(a, b) {
289
+
return a + b;
290
+
}
291
+
292
+
functionsumThree(a, b) {
293
+
return a + b + c;
294
+
}
295
+
296
+
export { sumTwo, sumThree };
297
+
```
298
+
299
+
We can also export a value simply by using the **export** keyword:
300
+
301
+
```javascript
302
+
exportfunctionsumTwo(a, b) {
303
+
return a + b;
304
+
}
305
+
306
+
exportfunctionsumThree(a, b) {
307
+
return a + b + c;
308
+
}
309
+
```
310
+
311
+
And lastly, we can **export default bindings**:
312
+
313
+
```javascript
314
+
functionsumTwo(a, b) {
315
+
return a + b;
316
+
}
317
+
318
+
functionsumThree(a, b) {
319
+
return a + b + c;
320
+
}
321
+
322
+
var api = {
323
+
sumTwo : sumTwo,
324
+
sumThree: sumThree
325
+
}
326
+
327
+
exportdefaultapi
328
+
```
329
+
330
+
> **Best Practices**: Always use the **export default** method at **the end** of the module. It makes it clear what is being exported, and saves time by having to figure out what name a value was exported as. Moreso, the common practice in CommonJS modules is to export a single value or object. By sticking to this paradigm, we make our code easily readable and allows us to interpolate between CommonJS and ES6 modules.
331
+
332
+
### Importing in ES6
333
+
334
+
ES6 provides us with various flavors of importing. We can import an entire file:
335
+
336
+
```javascript
337
+
import`underscore`
338
+
```
339
+
340
+
> It is important to note that simply **importing an entire file will execute all code at the top level of that file**.
341
+
342
+
We can also use destructuring to import a list of values from a file:
343
+
344
+
```javascript
345
+
import { sumTwo, sumThree } from'math/addition'
346
+
```
347
+
348
+
Similar to Python, we have named imports:
349
+
350
+
```javascript
351
+
import {
352
+
sumTwoasaddTwoNumbers,
353
+
sumThreeassumThreeNumbers} from
354
+
} from 'math/addition'
355
+
```
356
+
357
+
And lastly, we can **import all the things**:
358
+
359
+
```javascript
360
+
import*asutilfrom'math/addition'
361
+
```
362
+
363
+
> **Note**: Values that are exported are **bindings**, not references. Therefore, changing the binding of a variable in one module will affect the value within the exported module. Avoid changing the public interface of these exported values.
0 commit comments