Webbo3 Level 2 · JavaScript Development · Day 6 of 20

Modern JavaScript and Modules

Breaking one enormous file into pieces that each do one job, and the modern features you will read in every codebase you ever open.

Your Day 5 project probably lives in one file. It works, and at three hundred lines it is still findable. At eight hundred it will not be.

Every team you will ever join solved that problem the same way: many small files, each with one job, that say out loud what they hand out and what they need. Today you learn how.

1. The Problem Modules Solve

Definition

A module is a JavaScript file whose contents are private by default. Nothing inside it can be used by another file unless the module deliberately exports it, and the other file deliberately imports it.

Real-Life Example

A shared office where everyone keeps everything on one big table. Two people both have a folder called "Report", someone moves the wrong one, and nobody can work without bumping into everyone else.

Modules give everyone their own desk with a drawer. You keep your things in your drawer and hand over only what somebody asks for, by name.

The Three Problems of One Big File

1. Name clashes: two functions called render, written six weeks apart, silently overwrite each other.
2. Everything touches everything: a variable near the top is visible to code four hundred lines below that has no business changing it.
3. Nobody can work alongside you: every change by two people to the same file is a conflict.

A module fixes all three at once, because each file only shares what it chooses to.

2. export and import

Definition

export marks something in a module as available to other files. import brings it into another file, naming exactly what it needs and which file it comes from.

Real-Life Example

A restaurant kitchen and its menu. The kitchen can make many things, but only what is on the menu can be ordered. export is putting a dish on the menu; import is ordering it by name.

Types of Export

Type 1: Named Exports

Date.now() gives the number of milliseconds since 1970, which makes a quick, unique-enough id for a task created by hand.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// tasks.js: one job, the task data and the rules about it

// Available to other files
export const STORAGE_KEY = 'webbo3.tasks';

// Build a new task from the text a user typed
export function createTask(text) {
  return { id: Date.now(), text: text.trim(), done: false };
}

// Keep only the tasks that are not done
export function activeOnly(tasks) {
  return tasks.filter((task) => !task.done);
}

// NOT exported: private to this file
function secretHelper() {
  return 'nobody outside can call me';
}

1
2
3
4
5
6
7
8
9
10
11

// app.js: one job, use the task rules
import { createTask, activeOnly, STORAGE_KEY } from './tasks.js';

// Make two tasks and complete the first
const tasks = [createTask('Read Day 6'), createTask('  Refactor project  ')];
tasks[0].done = true;

// Use what tasks.js handed out
console.log(STORAGE_KEY);
console.log(activeOnly(tasks).length);
console.log(tasks[1].text);

➜ webbo3 node js/app.js
webbo3.tasks
1
Refactor project

Notice the import path: ./tasks.js. The dot and slash mean "in the same folder as this file", and the .js ending is required in the browser.

Type 2: Default Export

toLocaleString() writes a number with thousands separators, which the next example uses.

1
2
3
4
5

// format.js: one job, formatting money
// A default export: this file's one main thing
export default function formatNaira(amount) {
  return `N${amount.toLocaleString()}`;
}

1
2
3
4

// A default import can be given any name
import money from './format.js';

console.log(money(1500000));

➜ webbo3 node js/app.js
N1,500,000

Common Mistake: Importing Something That Was Never Exported

1
2
3
4
5
6
7
8
9

// createTask is exported...
export function createTask(text) {
  return { text, done: false };
}

// ...but activeOnly is not
function activeOnly(tasks) {
  return tasks.filter((task) => !task.done);
}

1
2
3
4

// Ask for both
import { createTask, activeOnly } from './tasks.js';

console.log(activeOnly([createTask('x')]));

➜ webbo3 node js/app.js
SyntaxError: The requested module './tasks.js' does not provide an export named 'activeOnly'

1
2

<!-- type="module" lets app.js use import and export -->
<script type="module" src="js/app.js"></script>

Only the entry file needs a script tag. The browser follows its imports and loads tasks.js by itself.

1
2
3
4

// The passing rule, in its own file
export function isPassing(score) {
  return score >= 50;
}

1
2
3
4
5

// Use the rule from another file
import { isPassing } from './rules.js';

console.log(isPassing(72));
console.log(isPassing(31));

➜ webbo3 node js/app.js
true
false

3. The Modern Syntax You Will Read Every Day

Definition

Since 2015, JavaScript has gained short ways to write things you already know how to do. None of them lets you do anything new; they let you say it with less noise, and every codebase you open uses them.

Real-Life Example

Abbreviations in a message: "ASAP" means the same as "as soon as possible". You need to recognise them to read other people's messages, even if you choose when to use them yourself.

Types

1. Shorthand properties: write the name once when the key and the variable match.
2. Computed keys: a property name taken from a variable.
3. Methods: functions inside an object, without the word function.
4. Rest: ... gathering several values into one.

Type 1: Shorthand Properties

1
2
3
4
5
6
7
8
9
10
11
12

// Two variables
const name = 'Chidinma';
const score = 88;

// Longhand: the key and the variable say the same thing twice
const longhand = { name: name, score: score };

// Shorthand: write each name once
const student = { name, score };

console.log(longhand);
console.log(student);

➜ webbo3 node app.js
{ name: 'Chidinma', score: 88 }
{ name: 'Chidinma', score: 88 }

Type 2: Computed Keys

1
2
3
4
5
6
7

// The property name is stored in a variable
const field = 'city';

// Square brackets use the variable's VALUE as the key
const record = { [field]: 'Lagos' };

console.log(record);

➜ webbo3 node app.js
{ city: 'Lagos' }

Type 3: Methods

A method is a function stored in an object. Inside it, this means "the object this method belongs to", so this.balance reads the object's own balance.

1
2
3
4
5
6
7
8
9
10
11
12

// An account with a method
const account = {
  balance: 5000,

  // A method: no word "function", no colon
  describe() {
    // this = the account object
    return `Balance: N${this.balance}`;
  }
};

console.log(account.describe());

➜ webbo3 node app.js
Balance: N5000

Type 4: Rest

In a parameter list, ...amounts gathers every remaining argument into one array, however many there are.

1
2
3
4
5
6
7
8
9
10

// label is the first argument; ...amounts gathers everything after it
function total(label, ...amounts) {
  const sum = amounts.reduce((running, amount) => running + amount, 0);
  return `${label}: ${sum}`;
}

// Three amounts, one amount, no amounts
console.log(total('Week 1', 1500, 2000, 750));
console.log(total('Week 2', 900));
console.log(total('Week 3'));

➜ webbo3 node app.js
Week 1: 4250
Week 2: 900
Week 3: 0

Rest also works when unpacking: take out the properties you want by name and gather the rest.

1
2
3
4
5
6
7
8

// A student record
const student = { name: 'Musa', score: 54, city: 'Kano', paid: false };

// Take name and score out; gather everything else into other
const { name, score, ...other } = student;

console.log(name, score);
console.log(other);

➜ webbo3 node app.js
Musa 54
{ city: 'Kano', paid: false }

Overall Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Build a receipt object using every shorthand from this section
function makeReceipt(customer, ...prices) {
  const total = prices.reduce((sum, price) => sum + price, 0);
  const field = 'items';

  return {
    customer,                 // shorthand property
    [field]: prices.length,   // computed key
    total,
    describe() {              // method
      return `${this.customer} bought ${this.items} items for N${this.total}`;
    }
  };
}

console.log(makeReceipt('Amaka', 1500, 700, 2300).describe());

➜ webbo3 node app.js
Amaka bought 3 items for N4500

1
2
3
4
5
6
7
8

// Gather every score into one array
function average(...scores) {
  const total = scores.reduce((sum, score) => sum + score, 0);
  return total / scores.length;
}

console.log(average(70, 80));
console.log(average(50, 60, 70, 80));

➜ webbo3 node app.js
75
65

4. Code That Reads Like Sentences

Definition

Naming is choosing names for variables, functions and files that say what they hold or what they do, so code can be understood without its author in the room.

Real-Life Example

Two freezers. One has boxes labelled "stuff", "misc" and "box 2". The other has "chicken", "fish" and "stew, Sunday". Both hold the same food. Only one lets somebody else cook dinner.

Types of Bad Name, and Their Fixes

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// The same rule, written twice
function c(s, a) {
  return s >= 50 && a >= 0.75;
}

function isEligibleForCertificate(averageScore, attendanceRate) {
  // Name each part of the rule
  const passedExams = averageScore >= 50;
  const attendedEnough = attendanceRate >= 0.75;
  return passedExams && attendedEnough;
}

// Both give the same answer
console.log(c(80, 0.9), isEligibleForCertificate(80, 0.9));

➜ webbo3 node app.js
true true

Both return true. Only one of them can be read by a colleague at 6pm on a Friday without asking you what a means.

5. One Job Per File

Definition

The test for whether a file should be split is not its length. It is this: can you describe what the file does in one sentence, without the word "and"? If you need "and", it is two files.

Real-Life Example

In a kitchen, the chef cooks and the cashier takes money. If one person does both, orders slow down and money goes missing. Each job gets its own person, and they pass things between them.

1
2
3
4
5
6
7
8
9

project/
  index.html
  css/
    style.css
  js/
    app.js       <- wires everything together, and nothing else
    tasks.js     <- what a task is, and the rules about tasks
    render.js    <- turning tasks into HTML
    storage.js   <- saving and loading (Day 11)

This is not code to run. It is the layout to aim for when you split your Day 5 project.

Checkpoint

1
2
3
4
5
6

// Gather the arguments after the first
function f(first, ...rest) {
  console.log(first, rest);
}

f(1, 2, 3);

➜ webbo3 node app.js
1 [ 2, 3 ]

1
2
3
4

// One job: how money looks
export function formatNaira(amount) {
  return `N${amount.toLocaleString()}`;
}

1
2
3
4

// One job: the rules about orders
export function orderTotal(prices) {
  return prices.reduce((sum, price) => sum + price, 0);
}

1
2
3
4
5
6

// One job: wire the pieces together
import { formatNaira } from './format.js';
import { orderTotal } from './tasks.js';

const total = orderTotal([12500, 45000, 8700]);
console.log(`Takings: ${formatNaira(total)}`);

➜ webbo3 node js/app.js
Takings: N66,200

Tomorrow, Day 7: asynchronous JavaScript. What your code does while it waits for something slow, and why that changes how it is written.