Функции: една работа, малко параметри, без скрити странични ефекти

Код на:JavaC#PythonJavaScript

Накратко: Добрата функция върши една работа на едно ниво на абстракция, има малко параметри и без булеви флагове и не сменя тихо състояние, което името ѝ не обещава.

Проблем

Функцията, която прави всичко

Имената от миналия урок вече са на място. Константите на магазина:

const FREE_DELIVERY_FROM = 50;
const STANDARD_DELIVERY_FEE = 4.99;
const EXPRESS_SURCHARGE = 7;
const SPRING_COUPON = "SPRING10";
const SPRING_DISCOUNT = 0.1;

const orders = [];

А това е функцията, през която минава всяка поръчка:

function processOrder(email, prices, coupon, express) {
  let amount = 0;
  for (const price of prices) {
    amount += price;
  }
  if (coupon === SPRING_COUPON) {
    amount = amount * (1 - SPRING_DISCOUNT);
  }
  let delivery = amount >= FREE_DELIVERY_FROM ? 0 : STANDARD_DELIVERY_FEE;
  if (express) {
    delivery += EXPRESS_SURCHARGE;
  }
  const total = amount + delivery;
  orders.push(total);
  console.log(`До ${email}: поръчката е приета, ${total.toFixed(2)} €`);
  console.log(`[log] поръчка №${orders.length} за ${total.toFixed(2)} €`);
}

processOrder("maria@example.com", [24.5, 18], "SPRING10", true);
processOrder("ivan@example.com", [64], "", false);

Изход

До maria@example.com: поръчката е приета, 50.24 €
[log] поръчка №1 за 50.24 €
До ivan@example.com: поръчката е приета, 64.00 €
[log] поръчка №2 за 64.00 €

Работи. Сега маркетингът иска купонът да не важи за доставката. Счетоводството иска таксата да се показва отделно в количката. Тестерът иска да провери доставката под и над 50 €, а за всяка проверка трябва да направи поръчка, тоест да я запише и да прати имейл. Всички пипат една и съща функция. А какво значи true в края на извикването, пак не се вижда.

Идеята

Една работа и едно ниво

Опитай да кажеш какво прави processOrder: „събира цените, и прилага купона, и смята доставката, и записва, и праща имейл, и пише в лога“. Всяко „и“ е отделна работа. Всяка от тях се сменя по своя причина и от различен човек.

Правилото е една работа на функция. Функцията с една работа е малка, има име, което казва цялата работа, и малко параметри. Как разбираш, че работата е една:

• описваш я с едно изречение без „и“;
• от нея не може да се извади парче с име, което не е просто преразказ на кода.

Второто правило е едно ниво на абстракция. Горната функция се чете като съдържание на книга: смятай сумата, запиши, потвърди, запиши в лога. Как точно се събират цените (циклите, сравненията, форматът на низа) е едно ниво по-долу, в малките функции. Когато в един и същ метод са „запиши поръчката“ и amount += price, читателят прескача между двете нива на всеки ред.

Виж го

Същата поръчка, разделена

Отгоре е съдържанието:

function placeOrder(email, prices, coupon, express) {
  const total = orderTotal(prices, coupon, express);
  orders.push(total);
  sendConfirmation(email, total);
  logOrder(orders.length, total);
}

function sendConfirmation(email, total) {
  console.log(`До ${email}: поръчката е приета, ${total.toFixed(2)} €`);
}

function logOrder(number, total) {
  console.log(`[log] поръчка №${number} за ${total.toFixed(2)} €`);
}

Под него е сметката, всяка работа в своя функция:

function subtotal(prices) {
  let amount = 0;
  for (const price of prices) {
    amount += price;
  }
  return amount;
}

function applyCoupon(amount, coupon) {
  if (coupon === SPRING_COUPON) {
    return amount * (1 - SPRING_DISCOUNT);
  }
  return amount;
}

function deliveryFee(amount, express) {
  let fee = amount >= FREE_DELIVERY_FROM ? 0 : STANDARD_DELIVERY_FEE;
  if (express) {
    fee += EXPRESS_SURCHARGE;
  }
  return fee;
}

function orderTotal(prices, coupon, express) {
  const amount = subtotal(prices);
  const discounted = applyCoupon(amount, coupon);
  return discounted + deliveryFee(discounted, express);
}

placeOrder("maria@example.com", [24.5, 18], "SPRING10", true);
placeOrder("ivan@example.com", [64], "", false);

Изход

До maria@example.com: поръчката е приета, 50.24 €
[log] поръчка №1 за 50.24 €
До ivan@example.com: поръчката е приета, 64.00 €
[log] поръчка №2 за 64.00 €

Изходът е същият. Сега купонът е в една функция от три реда, доставката в друга, и всяка се сменя, без да се пипа имейлът. Кодът е повече на брой редове, но всяко парче се чете, сменя и проверява отделно.

По-точно, за любопитните

Колко малка? Няма число. Функция от 30 реда, която прави едно нещо (например дълъг, но равен switch с еднакви клонове), е наред. Функция от 8 реда с три нива на влагане и два флага не е. Мерилото е описанието с едно изречение, не броят на редовете. Разделянето на дълга функция на стъпки, така че програмата да работи след всяка, е Extract Method в шестия урок от модула.

Пробвай

Подреди редовете

Подреди orderTotal така, че купонът да се приложи преди доставката. Защо редът има значение: отстъпката може да свали поръчката под 50 € и тогава доставката вече не е безплатна.

1. const amount = subtotal(prices);↑↓
2. function orderTotal(prices, coupon, express) {↑↓
3. }↑↓
4. const discounted = applyCoupon(amount, coupon);↑↓
5. return discounted + deliveryFee(discounted, express);↑↓

Провери

Идеята

Малко параметри и без флагове

Всеки параметър е нещо, което читателят трябва да държи в главата си, и нещо, което всяко извикване трябва да подаде в правилния ред. Нула, един и два параметъра се четат лесно. Три вече е много. Четири и повече обикновено значат, че параметрите са едно нещо, разпиляно на части: имейлът, цените, купонът и доставката заедно са поръчка. Тогава те стават един обект. Това е refactoring-ът Introduce Parameter Object от шестия урок.

Най-лошият параметър е флагът: булева стойност, която избира какво да прави функцията.

function printSlip(prices, forCourier) {
  if (forCourier) {
    console.log(`Пратка: ${prices.length} бр.`);
  } else {
    for (const price of prices) {
      console.log(`${price.toFixed(2)} €`);
    }
  }
}

const cart = [24.5, 18];
printSlip(cart, true);
printSlip(cart, false);

Изход

Пратка: 2 бр.
24.50 €
18.00 €

При извикването true не казва нищо. А вътре функцията има два отделни пътя, тоест две работи. Поправката е две функции с имена:

function printCourierSlip(prices) {
  console.log(`Пратка: ${prices.length} бр.`);
}

function printReceipt(prices) {
  for (const price of prices) {
    console.log(`${price.toFixed(2)} €`);
  }
}

const cart = [24.5, 18];
printCourierSlip(cart);
printReceipt(cart);

Изход

Пратка: 2 бр.
24.50 €
18.00 €

Понякога булевата стойност наистина е данни, а не избор на поведение: експресната доставка е част от поръчката. Тогава поне извикването трябва да казва какво значи:

JavaScript няма именувани аргументи, затова се подава обект с опции, а функцията го разпакова в параметрите си:

function deliveryFee(amount, { express = false } = {}) {
  let fee = amount >= FREE_DELIVERY_FROM ? 0 : STANDARD_DELIVERY_FEE;
  if (express) {
    fee += EXPRESS_SURCHARGE;
  }
  return fee;
}

console.log(`${deliveryFee(38.25, { express: true }).toFixed(2)} €`);

Изход

11.99 €

Идеята

Страничен ефект

Всичко, което функцията сменя извън себе си, е страничен ефект: поле на обект, списък, който е получила, глобална променлива, файл, база, имейл, ред на екрана.

Страничните ефекти не са лоши сами по себе си. Поръчката трябва да се запише някъде, а имейлът трябва да тръгне. Лошо е, когато ефектът е скрит: името казва „питам“, а функцията и прави. Който я вика, не очаква нищо да се смени и я вика спокойно два пъти.

Виж го

Въпросът, който сменя отговора

Складът казва дали има лампи. Някой е решил, че щом има, е удобно веднага да ги запази:

class Warehouse {
  constructor(stock) {
    this.stock = stock;
  }

  isInStock(quantity) {
    if (this.stock >= quantity) {
      this.stock -= quantity;
      return true;
    }
    return false;
  }
}

Количката пита, за да покаже „има“. После плащането пита същото:

const lamps = new Warehouse(3);
console.log("Количка: " + (lamps.isInStock(2) ? "има" : "няма"));
console.log("Плащане: " + (lamps.isInStock(2) ? "има" : "няма"));
console.log("На склад: " + lamps.stock);

Изход

Количка: има
Плащане: няма
На склад: 1

class Warehouse {
  constructor(stock) {
    this.stock = stock;
  }

  isInStock(quantity) {
    if (this.stock >= quantity) {
      this.stock -= quantity;
      return true;
    }
    return false;
  }
}

const lamps = new Warehouse(3);
console.log("Количка: " + (lamps.isInStock(2) ? "има" : "няма"));
console.log("Плащане: " + (lamps.isInStock(2) ? "има" : "няма"));
console.log("На склад: " + lamps.stock);

Стъпка по стъпка, с думи

1. Складът има 3 лампи на рафта.
2. Количката иска само да покаже дали има 2. Тя пита isInStock(2): въпрос, съдейки по името.
3. 3 >= 2: има достатъчно.
4. Но въпросът и взима лампите: this.stock става 1 от 3. Никой нищо не е купил, а количката не знае, че това е станало.
5. Количката получава true и показва „има“.
6. Клиентът отива към плащане. Плащането пита същото: isInStock(2).
7. 1 >= 2 е false. Същият въпрос получава друг отговор, а клиентът вижда „няма“.
8. На склад: 1. Отговорът се смени, защото първият въпрос имаше скрит страничен ефект.

Никой нищо не е купил, а две лампи липсват, и клиентът не може да плати. В истински магазин това е поръчка, загубена заради страница, която пита за наличност. А грешката е трудна за намиране, защото всеки ред поотделно изглежда наред.

По-точно, за любопитните

Още по-коварно е в getter (get stock()): lamps.stock изглежда като четене на поле, а е функция. Конзолата на браузъра и дебъгерът изчисляват getter-ите, когато ги разгънеш, и така могат да сменят състоянието.

Пробвай

Предвиди изхода

Складът с isInStock, който и запазва, вече има 5 лампи. Един и същ въпрос се задава три пъти. Какво печата програмата?

const lamps = new Warehouse(5);
console.log(lamps.isInStock(2));
console.log(lamps.isInStock(2));
console.log(lamps.isInStock(2));

Отговор

true / true / true

true / false / false

true / true / false

Провери

Идеята

Команда или въпрос, не и двете

Правилото се казва разделяне на команда и въпрос (command–query separation): функцията или отговаря на въпрос и не сменя нищо, или прави нещо и не се преструва на въпрос. Складът става така:

class Warehouse {
  constructor(stock) {
    this.stock = stock;
  }

  isInStock(quantity) {
    return this.stock >= quantity;
  }

  reserve(quantity) {
    if (!this.isInStock(quantity)) {
      throw new Error("Няма достатъчно наличност");
    }
    this.stock -= quantity;
  }
}

const lamps = new Warehouse(3);
console.log("Количка: " + (lamps.isInStock(2) ? "има" : "няма"));
console.log("Плащане: " + (lamps.isInStock(2) ? "има" : "няма"));
lamps.reserve(2);
console.log("На склад: " + lamps.stock);

Изход

Количка: има
Плащане: има
На склад: 1

Количката и плащането питат колкото искат. Лампите се запазват на един ред, който казва точно това: reserve(2).

По-точно, за любопитните

Има известни изключения, и името ги издава: items.pop() маха елемента и го връща, iterator.next() мести напред и връща. Това са глаголи, не въпроси, затова никой не ги вика „просто да провери“. Правилото не е „командата никога не връща нищо“, а „въпросът никога не сменя нищо“.

Идеята

Чистата функция

deliveryFee от разделената поръчка отговаря само по параметрите си и не сменя нищо. Такава функция се казва чиста: при едни и същи параметри винаги връща едно и също, колкото и пъти и в какъвто и ред да я викаш.

console.log(`${deliveryFee(38.25, false).toFixed(2)} €`);
console.log(`${deliveryFee(38.25, true).toFixed(2)} €`);
console.log(`${deliveryFee(64, false).toFixed(2)} €`);
console.log(`${deliveryFee(38.25, true).toFixed(2)} €`);

Изход

4.99 €
11.99 €
0.00 €
11.99 €

Проверката на доставката под и над прага е четири реда. Няма склад, който да се напълни, няма имейл, който да тръгне, няма база. При processOrder за същото трябваше да направиш поръчка. Затова сметките се пазят чисти, а страничните ефекти се събират в няколко ясно кръстени команди отгоре. Как такива проверки стават тестове, които пазят кода при всяка промяна, е темата на петия урок от модула.

Пробвай

Намери грешката

Бутонът „Махни последното“ трябва да маха продукта, който клиентът е добавил последен. Клиентът добавя мляко, ябълки и хляб. Преди това магазинът печата бележка, подредена по азбучен ред:

function printReceipt(items) {
  items.sort();
  for (const item of items) {
    console.log("  " + item);
  }
}

const cart = ["мляко", "ябълки", "хляб"];
printReceipt(cart);
console.log("Последно добавено: " + cart[cart.length - 1]);

Изход

  мляко
  хляб
  ябълки
Последно добавено: ябълки

Последен е добавен хлябът, а програмата казва ябълки. На кой ред е грешката?

Избери реда с грешката.

1function printReceipt(items) {2 items.sort();3 for (const item of items) {4 console.log(" " + item);5 }6}

Провери

Упражнение

Известието за изпратена поръчка

Реши задачата в редактора си.

Известието. Тази функция смята текста, избира канала с флаг, печата и брои изпратените:

let sent = 0;

function notifyShipped(name, orderId, sms) {
  sent++;
  const text = `Здравей, ${name}! Поръчка ${orderId} е изпратена.`;
  if (sms) {
    console.log("SMS: " + text);
  } else {
    console.log("Имейл: " + text);
  }
}

notifyShipped("Мария", 1042, false);
notifyShipped("Иван", 1043, true);
console.log("Изпратени: " + sent);

Изход

Имейл: Здравей, Мария! Поръчка 1042 е изпратена.
SMS: Здравей, Иван! Поръчка 1043 е изпратена.
Изпратени: 2

Раздели я на три функции: чиста, която само прави текста, и две команди, едната праща по имейл, другата по SMS, и всяка брои изпратеното. Флагът изчезва. Изходът трябва да остане същият:

Изход

Имейл: Здравей, Мария! Поръчка 1042 е изпратена.
SMS: Здравей, Иван! Поръчка 1043 е изпратена.
Изпратени: 2

Още задачи

• Параметър обект. placeOrder има четири параметъра. Събери ги в обект order и виж как изглежда извикването.
• Купонът не важи за доставката. Маркетингът сменя правилото. Коя функция пипаш и колко други остават непокътнати?
• Опашката. Напиши peekNext() и takeNext() за опашка от поръчки за куриера. Кое е въпрос и кое е команда?

Тест

Провери се

1. Как разбираш, че processOrder прави повече от една работа?

По броя на редоветеОписанието ѝ има много „и“: събира и прилага купона и смята доставката и записва и праща имейлПо това, че има цикъл

2. printSlip(cart, true). Какво не е наред?

НищоФлагът казва, че функцията прави две различни неща. По-ясно е printCourierSlip(cart) и printReceipt(cart)Параметрите трябва да са повече

3. isInStock(2) намалява наличността, ако има достатъчно. Количката пита веднъж, плащането още веднъж. Какво става при 3 лампи?

И двете получават „има“Количката получава „има“, плащането „няма“, а на склад остава 1Програмата спира с грешка

4. Коя от тези функции е чиста?

deliveryFee(amount, express): смята таксата от двата параметъраprintReceipt(items): подрежда списъка, който получава, и го печатаplaceOrder(…): записва поръчката и праща имейл

5. Какво казва разделянето на команда и въпрос?

Всяка функция трябва да връща стойностКомандите трябва да са в отделен класФункцията или прави нещо, или отговаря на въпрос, но не и двете

Провери

Започни урока отначало

Свързани уроци

• Нужно отпреди: Изключения · Хвърляне и свои изключения · Масиви: push, splice и sort · Имена в кода
• Продължава в: Коментари, които лъжат, и такива, които помагат · Миризмите: дълъг метод, голям клас, дублиране, примитиви вместо типове, дълга верига if · Тестовете като предпазна мрежа · Refactoring на малки стъпки
• Задачи по темата: Чист код и refactoring