Lesson 0.8 · JavaScript in general

Modules and built-in tools

import/export, JSON, Math, Date, Intl, localStorage and classes in a nutshell.

Before we start: a workshop with drawers

A big project is like a workshop. If all the tools lay in one heap, you'd never find anything. So each kind has its own labelled drawer – and when you need a screwdriver, you open the "screwdrivers" drawer. In JavaScript the drawers are modules: every file keeps its things to itself and only "lends out" what it explicitly exports.

The second half of the lesson is a tour of the tools JavaScript comes with: JSON, Math, Date, Intl, localStorage and classes. You don't need to know them by heart – it's enough to know they exist and how to find them.

1. Modules: export and import

Every file is a separate module. The variables and functions in it are private until you export them. There are two kinds of export:

// math.js
export const PI = 3.14159                 // a named export (there can be many)
export function add(a, b) { return a + b }
function secret() { … }                   // without export – not reachable from outside

export default function multiply(a, b) {  // the default export (only one per file)
  return a * b
}

// app.js
import multiply, { PI, add } from './math.js'   // the default without braces, named ones in { }
import times from './math.js'                    // you can name the default whatever you like
import { add as plus } from './math.js'          // rename a named one with as
import * as math from './math.js'                // everything under one name: math.add, math.PI

	Named export	Default export
How many per file	any number	one at most
Import	`import { add } from './math'`	`import multiply from './math'`
Name when importing	must match (or as)	your choice
Typically in React	helper functions, hooks, types	the file's component (e.g. Lesson.tsx)

Where you import from

import { useState } from 'react'                  // no dot = a package from node_modules
import { products } from '../course/fakeApi.en'   // ./ and ../ = your own file, path relative to this one
import './styles.css'                             // an import for its side effect (loads the styles)

// The .js/.ts/.tsx extension is usually left out in Vite projects

Re-exporting and dynamic import

// components/index.js – one entry point for the whole folder
export { Button } from './Button'
export { Card } from './Card'
// elsewhere then: import { Button, Card } from './components'

// Dynamic import – loads the module only when it's needed (returns a Promise)
const { heavyChart } = await import('./charts.js')

2. JSON: data as text

JSON is a text notation for data that looks almost like a JavaScript object. It's used everywhere data travels: between the server and the browser, into files, into localStorage.

const user = { name: 'Anna', age: 31, tags: ['admin'] }

const text = JSON.stringify(user)
// '{"name":"Anna","age":31,"tags":["admin"]}' – one long piece of TEXT

JSON.stringify(user, null, 2)    // nicely indented – for debugging
JSON.parse(text)                 // back to an object (a new object!)

3. Math: rounding and randomness

Math.round(4.5)     // 5
Math.floor(4.9)     // 4 – down
Math.ceil(4.1)      // 5 – up
Math.trunc(-4.9)    // -4 – cut off the decimal part
Math.abs(-7)        // 7
Math.max(3, 8, 1)   // 8
Math.min(...[3, 8, 1])   // 1 – with an array via spread
Math.sqrt(16)       // 4
2 ** 8              // 256 – power (formerly Math.pow)

// A random whole number from min to max (inclusive)
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
randomInt(1, 6)     // a die

// A random item of an array
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]

// Limiting to a range
const clamp = (n, min, max) => Math.min(Math.max(n, min), max)
clamp(150, 0, 100)  // 100

4. Date: dates and times

const now = new Date()                    // now
const d = new Date(2026, 9, 4)            // October 4, 2026 – months count from 0! 😱
const iso = new Date('2026-10-04')        // from text in the ISO format (year-month-day)
const fromMs = new Date(1_700_000_000_000) // from the number of milliseconds since 1 January 1970

d.getFullYear()    // 2026
d.getMonth()       // 9  – October (January = 0)
d.getDate()        // 4  – the day of the month
d.getDay()         // 0–6 – the day of the week (Sunday = 0)
d.getHours()       // 0

Date.now()         // the current time in ms – quick measuring and unique numbers
d.getTime()        // this date in ms
d.toISOString()    // the standard text for servers – in UTC, so it can show a different day than your local time

Calculating with dates

// The difference of two dates = the difference in milliseconds
const DAY = 24 * 60 * 60 * 1000
const days = Math.round((new Date('2026-12-24') - new Date('2026-10-04')) / DAY)   // 81

// Comparison
dateA < dateB                              // works (compares ms)
dateA.getTime() === dateB.getTime()        // equality – === on two Date objects is always false!

// Adding days – setDate CHANGES the object, so make a copy first
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)   // Date handles overflowing the end of the month itself

5. Intl: numbers, currencies and dates in any language

Formatting numbers and dates by hand (thousands separators, the decimal mark, the currency symbol, month names) is unnecessary. The browser can do it in every language:

const n = 1234567.891

n.toLocaleString('en-US')    // '1,234,567.891'
n.toLocaleString('de-DE')    // '1.234.567,891'

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n)
// '$1,234,567.89'

new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 }).format(3.14159)   // '3.1'
new Intl.NumberFormat('en-US', { style: 'percent' }).format(0.256)             // '26%'

const date = new Date(2026, 9, 4)
date.toLocaleDateString('en-US')                                    // '10/4/2026'
date.toLocaleDateString('en-GB')                                    // '04/10/2026'
date.toLocaleDateString('en-US', { day: 'numeric', month: 'long' }) // 'October 4'
date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })   // '12:00 AM'

new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(-1, 'day')   // 'yesterday'
new Intl.ListFormat('en').format(['Anna', 'Peter', 'Eve'])                 // 'Anna, Peter, and Eve'

Demo

Formatting lab

What you see: Fields for a number and a date. Below them, how the built-in methods and Intl format them.

Try it:

Compare toFixed and toLocaleString('en-US'): the first gives no thousands separators, the second formats it for people.
Try a number with many decimal places – the currency rounds itself to cents.
Change the date to yesterday or tomorrow and watch the last row: RelativeTimeFormat writes "yesterday" / "tomorrow".

The takeaway: Format numbers and dates for people with Intl and toLocale… plus a locale. Building the text by hand is unnecessary and error-prone.

Loading the interactive part…

6. localStorage: the browser's memory

localStorage is a small store in the browser. Data in it survive reloading the page and even closing the browser. The course uses it to remember which challenges you've finished.

localStorage.setItem('theme', 'dark')     // store (key, value)
localStorage.getItem('theme')             // 'dark'
localStorage.getItem('doesNotExist')      // null
localStorage.removeItem('theme')          // delete

// It can only store TEXT – objects via JSON
const settings = { theme: 'dark', fontSize: 16 }
localStorage.setItem('settings', JSON.stringify(settings))
const loaded = JSON.parse(localStorage.getItem('settings') ?? 'null')

// ❌ Without JSON
localStorage.setItem('settings', settings)   // stores '[object Object]'

7. Classes in a nutshell

A class is a cake mould: it describes what every object you make with it (new) looks like and what it can do. In modern React you'll hardly meet them – components are written as functions. But they do turn up now and then (the error boundary in lesson 10, libraries, older code), so you should recognise them.

class Counter {
  count = 0                       // a property with a default value

  constructor(start) {            // called on new Counter(…)
    this.count = start ?? 0       // this = the object being made right now
  }

  increment() {                   // a method
    this.count++
    return this.count
  }
}

const a = new Counter(10)
a.increment()   // 11
a.count         // 11

class LimitedCounter extends Counter {    // inheritance: everything from Counter + something extra
  increment() {
    if (this.count >= 3) return this.count
    return super.increment()              // call the parent class's version
  }
}

Check yourself

Quiz A file has export default function Card(). How do you import it?

import { Card } from './Card'import Card from './Card'import * from './Card'

Quiz What does new Date(2026, 0, 15).getMonth() return?

10152026

Quiz localStorage.setItem('user', { name: 'Anna' }). What gets stored?

'{"name":"Anna"}''[object Object]'An objectNothing, it throws an error

Quiz What's the best way to show 1234.5 as '$1,234.50'?

#x27; + 1234.5.toFixed(2)new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.5)'

#x27; + String(1234.5)

Warm-up

Challenge

Round up and store as text

Warm-up

Two built-in functions: one from the Math object, the other from JSON.

Task (the same text is in the comment at the top of the file)

CHALLENGE: Round up and store as text

1. roundUp(4.2) should return 5 – rounding up (Math.ceil).
2. toJson({ a: 1 }) should return the text '{"a":1}' (JSON.stringify).

Loading the interactive part…

I'm done

Challenge

The toolbox drawer

Easy

Seven helper functions you'll find in almost every project: formatting a price and a date, limiting to a range, a random number, moving a date and saving to localStorage.

Task (the same text is in the comment at the top of the file)

CHALLENGE: The toolbox drawer (Intl, Math, Date, JSON, localStorage)

Write the bodies of seven helper functions that almost every app has.
The tests below run on their own and show ✅/❌.

1. formatPrice(1234.5) → '$1,234.50'
   new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(…)
2. formatDate(new Date(2026, 9, 4)) → '10/4/2026'   (careful: months in Date count from 0!)
   date.toLocaleDateString('en-US')
3. clamp(n, min, max) – return n, but not less than min and not more than max.
   clamp(15, 0, 10) → 10,  clamp(-3, 0, 10) → 0.   Math.min and Math.max.
4. randomInt(min, max) – a random WHOLE number from min to max, BOTH included.
   Math.floor(Math.random() * (max - min + 1)) + min
5. addDays(date, days) – return a NEW date moved by days days. Don't change the original date!
   const copy = new Date(date); copy.setDate(copy.getDate() + days)
6. saveJSON(key, value) – store any value in localStorage (JSON.stringify).
7. loadJSON(key, fallback) – load a value from localStorage (JSON.parse). When there's nothing there
   (getItem returns null) or the stored text is invalid JSON, return fallback (try/catch).

Loading the interactive part…

I'm done

Summary

Modules: import named exports in { }, the default without them. A path with ./ is your own file, without it a package.
JSON turns data into text and back. It can't do functions, undefined or Date. Wrap parse in try/catch.
Math: round/floor/ceil, a random whole number Math.floor(Math.random() * (max - min + 1)) + min.
Date: months from zero, it counts in milliseconds, setDate changes the object.
Intl and toLocale… with a locale format numbers, currencies and dates for any language.
localStorage stores only text – objects via JSON, reading with a default value.
Classes are moulds for objects (new, this, extends). In modern React you'll rarely meet them.

Loading lesson…

💬 Found a mistake, something unclear, or have an idea? Let me know.