Функции в JavaScript: параметры, return и стрелочный синтаксис

Функция — именованный (или анонимный) блок кода, который можно вызвать повторно. Так вы избегаете копипасты и тестируете куски логики отдельно.

Параметры и return

Входные данные передавайте аргументами. Результат возвращайте через return. Если функция только «что-то делает» с DOM — это side effect; такие функции тоже нужны, но отделяйте расчёты от отрисовки, когда возможно.

Стрелочные функции

Короткий синтаксис удобен для колбэков. Помните про отличия this — в курсе DOM это всплывёт в обработчиках.

Дальше

Связываем язык со страницей: урок DOM.

HTML

<label>Цена <input id="price" type="number" value="1000"></label>
<label>Скидка % <input id="sale" type="number" value="10"></label>
<button id="calc" type="button">Посчитать</button>
<p id="result"></p>

JavaScript

function priceWithSale(price, percent) {
  const safePercent = Math.min(Math.max(percent, 0), 100);
  return Math.round(price * (1 - safePercent / 100));
}

const calc = document.querySelector('#calc');
calc.addEventListener('click', () => {
  const price = Number(document.querySelector('#price').value);
  const sale = Number(document.querySelector('#sale').value);
  const total = priceWithSale(price, sale);
  document.querySelector('#result').textContent = 'Итого: ' + total + ' ₽';
});

Практическое задание

Задание: вынесите расчёт в чистую функцию и подключите к UI.

Есть функция с return (без работы с DOM внутри расчёта)
Обработчик клика только читает поля и пишет результат
Граничные значения скидки обрабатываются корректно
Нет дублирования формулы в двух местах