1

const a = { x: 1, y: 2 };
const b = { ...a, y: 3 };

console.log(a.y, b.y);

2

const prices = [59, 35];
const lower =
  prices.map((p) => p - 10);

console.log(prices, lower);

3

const items =
  ['kaffe', 'bulle'];
const same = items;
same.push('te');

console.log(items.length);

Ändrar

Muterar indata (push, sort), ändrar en global variabel, skriver till localStorage.

Pratar med omvärlden

console.log, rör DOM:en, fetch.

Beror på omvärlden

Math.random(), new Date(), läser en global som kan ändras. Inte en sidoeffekt i sig, men gör funktionen oren.

Tid

10 min

Mål

Du kan avgöra om en funktion är ren, och göra en oren funktion ren genom att ta in det som ändras som parameter.

Tar emot en funktion

const isCheap = (item) => item.price < 40;

items.filter(isCheap);

Returnerar en funktion

const cheaperThan = (limit) =>
  (item) => item.price < limit;

items.filter(cheaperThan(40));

Imperativt: hur

const names = [];
for (const item of items) {
  if (item.category === 'dryck'
      && item.price < 50) {
    names.push(item.name);
  }
}
names.sort();

Deklarativt: vad

const names = items
  .filter((i) => i.category === 'dryck')
  .filter((i) => i.price < 50)
  .map((i) => i.name)
  .sort();

Koden

const makeGreeter = (greeting) => {
  return (name) =>
    `${greeting}, ${name}!`;
};

const hej = makeGreeter('Hej');
const hello = makeGreeter('Hello');

Användningen

makeGreeter har kört klart. Ändå vet hej att greeting är 'Hej'.

hej('Ada');    // 'Hej, Ada!'
hello('Ada');  // 'Hello, Ada!'

Fabriken

const createCounter = () => {
  let count = 0;
  return {
    increase: () => { count++; },
    value: () => count,
  };
};

Två räknare

const a = createCounter();
const b = createCounter();
a.increase();
a.increase();
b.increase();

a.value();  // 2
b.value();  // 1
a.count;    // undefined

Med klass

class TodoList {
  #todos = [];
  add(text) {
    this.#todos.push(text);
  }
  get all() {
    return [...this.#todos];
  }
}
const list = new TodoList();

Med closure

const createTodoList = () => {
  let todos = [];
  return {
    add: (text) => {
      todos = [...todos, text];
    },
    all: () => [...todos],
  };
};
const list = createTodoList();

Privat data

Klassen: #todos. Closuren: en vanlig variabel som bara funktionerna ser.

this

Klassens metoder tappar this om du lyfter ut dem. Closurens funktioner använder inget this, så const { add } = list fungerar.

new och instanceof

Bara klassen. Behöver du instanceof eller arv är klassen naturligare.

Smaksak, mest

För den som använder objektet är skillnaden liten. Välj det teamet läser lättast, och var konsekvent.

Koden

for (const song of songs) {
  const button =
    document.createElement('button');
  button.textContent = song;
  button.addEventListener('click',
    () => console.log(song));
  main.append(button);
}

Varför fungerar det?

Loopen har kört klart långt innan någon klickar. Varje varv har ett eget song, och varje callback minns sitt. Det är en closure.

kassa-imperativ.js (utdrag)

let total = 0;

export function checkout(code) {
  for (...) {
    if (discountCodes[code]) {
      product.price = product.price
        * (1 - discountCodes[code]);
    }
    line.sum = product.price * line.quantity;
    total = total + line.sum;
  }
  console.log(receiptText);
}

Vad är orent?

Hitta minst fyra saker innan du läser vidare i noterna.

Tid

15 min

Mål

Samma köp ger samma kvitto, hur många gånger du än kör.

receipt.js

export const lineTotal = (line, products) =>
  findProduct(products, line.productId)
    .price * line.quantity;

export const subtotal = (lines, products) =>
  lines.reduce(
    (sum, line) => sum + lineTotal(line, products),
    0,
  );

export const applyDiscount = (amount, code, codes) =>
  amount * (1 - (codes[code] || 0));

main.js

console.log(
  formatReceipt(lines, products, 'STUDENT',
    discountCodes, VAT_RATE),
);

OOP passar

Saker med eget tillstånd som lever en stund och ändras: en spelare, en kortlek, en anslutning. När du vill ha instanceof, arv eller ett tydligt API runt datan.

Funktionell stil passar

Data som omvandlas: listor som filtreras, räknas om och formateras. Logik som ska testas. Det mesta i en frontend som visar data.

Oftast båda

Rena funktioner för beräkningarna, och ett objekt eller en closure för det tillstånd som måste finnas. Kassan är ett exempel.