← JavaScript/Функции#55 из 383← Предыдущий Следующий →+25 XP

Полезно по теме:Гайд: как учить JavaScript Практика: JS база Практика: async и сеть Термин: Closure

Функции

В Figma кнопка "Дублировать" всегда делает одно и то же — копирует выбранный объект. В коде за этой кнопкой стоит функция: написали её один раз, вызываем сколько угодно. На Aliexpress расчёт итоговой цены (товар + доставка + скидка) вынесен в функцию, которая вызывается для каждого товара в корзине.

На основе предыдущих уроков

Функции используют переменные, работают с типами данных и могут содержать условия и циклы.

Какую проблему решают функции?

Без функций придётся копировать один и тот же код везде где он нужен. Изменился расчёт скидки — нужно найти и поправить 50 мест в коде. С функцией — правишь одно место.

Функции решают три проблемы:

1. Повторное использование — написал один раз, вызываешь многократно

2. Читаемость — calculateDiscount() лучше чем 5 строк математики

3. Тестирование — функцию легко проверить на разных входных данных

Объявление функции (Function Declaration)

function functionName(param1, param2) {
  // тело функции
  return result  // возвращаем результат
}

// Вызов
const result = functionName(value1, value2)

Параметры и return

Параметры — входные данные (как переменные внутри функции)

`return` — что функция возвращает вызывающему коду

Без return функция вернёт undefined

После return выполнение функции останавливается

Значения параметров по умолчанию

function createOrder(product, quantity = 1, discount = 0) {
  const total = product.price * quantity * (1 - discount / 100)
  return { product: product.name, quantity, total }
}

createOrder(laptop)           // quantity = 1, discount = 0
createOrder(laptop, 2)        // quantity = 2, discount = 0
createOrder(laptop, 1, 10)    // quantity = 1, discount = 10%

Чистые функции — лучшие функции

Хорошая функция:

Принимает данные через параметры

Возвращает результат через return

Не изменяет ничего снаружи (нет "побочных эффектов")

При одинаковых входных данных всегда даёт одинаковый результат

// Нечистая — меняет внешнюю переменную (плохо)
let total = 0
function addToTotal(price) { total += price }

// Чистая — принимает всё что нужно, возвращает результат (хорошо)
function calcTotal(prices) { return prices.reduce((sum, p) => sum + p, 0) }

Типичные ошибки

Ошибка 1: Забыть return

function calcDiscount(price, pct) {
  const result = price * pct / 100
  // забыли return! функция вернёт undefined
}
const discount = calcDiscount(1000, 10)
console.log(discount)  // undefined — а не 100!

Ошибка 2: Передать аргументы в неверном порядке

function divide(dividend, divisor) { return dividend / divisor }
divide(2, 10)  // 0.2 — хотели 10/2 = 5, передали наоборот

Ошибка 3: Изменять параметр-объект (мутация)

function applyDiscount(product, pct) {
  product.price = product.price * (1 - pct / 100)  // меняем оригинал!
  return product
}
// Правильно: создавай новый объект
function applyDiscount(product, pct) {
  return { ...product, price: product.price * (1 - pct / 100) }
}

В реальных проектах

Функции — основной способ организации кода. В реальных проектах каждая функция делает одно конкретное дело ("принцип единственной ответственности"). Функция длиннее 20-30 строк — сигнал разбить её на несколько меньших.

Примеры

Система расчётов для интернет-магазина

// Чистые функции для расчётов корзины

function calcSubtotal(price, quantity) {
  return price * quantity
}

function calcDiscount(subtotal, discountPct) {
  return subtotal * (discountPct / 100)
}

function calcShipping(subtotal, freeFrom = 2000) {
  return subtotal >= freeFrom ? 0 : 299
}

function calcTotal(price, quantity, discountPct = 0) {
  const subtotal = calcSubtotal(price, quantity)
  const discount = calcDiscount(subtotal, discountPct)
  const shipping = calcShipping(subtotal)
  return subtotal - discount + shipping
}

// Форматирование цены для отображения
const formatPrice = (amount) => `${amount.toLocaleString('ru-RU')} ₽`

// Проверяем на разных данных
console.log(formatPrice(calcTotal(500, 1)))         // "799 ₽" (500 + 299 доставка)
console.log(formatPrice(calcTotal(500, 5)))         // "2 500 ₽" (2500, доставка бесплатно)
console.log(formatPrice(calcTotal(500, 5, 10)))     // "2 250 ₽" (скидка 10%)
console.log(formatPrice(calcTotal(15000, 1, 15)))   // "12 750 ₽"

Функции

На основе предыдущих уроков

Функции используют переменные, работают с типами данных и могут содержать условия и циклы.

Какую проблему решают функции?

Функции решают три проблемы:

1. Повторное использование — написал один раз, вызываешь многократно

2. Читаемость — calculateDiscount() лучше чем 5 строк математики

3. Тестирование — функцию легко проверить на разных входных данных

Объявление функции (Function Declaration)

function functionName(param1, param2) {
  // тело функции
  return result  // возвращаем результат
}

// Вызов
const result = functionName(value1, value2)

Параметры и return

Параметры — входные данные (как переменные внутри функции)

`return` — что функция возвращает вызывающему коду

Без return функция вернёт undefined

После return выполнение функции останавливается

Значения параметров по умолчанию

function createOrder(product, quantity = 1, discount = 0) {
  const total = product.price * quantity * (1 - discount / 100)
  return { product: product.name, quantity, total }
}

createOrder(laptop)           // quantity = 1, discount = 0
createOrder(laptop, 2)        // quantity = 2, discount = 0
createOrder(laptop, 1, 10)    // quantity = 1, discount = 10%

Чистые функции — лучшие функции

Хорошая функция:

Принимает данные через параметры

Возвращает результат через return

Не изменяет ничего снаружи (нет "побочных эффектов")

При одинаковых входных данных всегда даёт одинаковый результат

// Нечистая — меняет внешнюю переменную (плохо)
let total = 0
function addToTotal(price) { total += price }

// Чистая — принимает всё что нужно, возвращает результат (хорошо)
function calcTotal(prices) { return prices.reduce((sum, p) => sum + p, 0) }

Типичные ошибки

Ошибка 1: Забыть return

function calcDiscount(price, pct) {
  const result = price * pct / 100
  // забыли return! функция вернёт undefined
}
const discount = calcDiscount(1000, 10)
console.log(discount)  // undefined — а не 100!

Ошибка 2: Передать аргументы в неверном порядке

function divide(dividend, divisor) { return dividend / divisor }
divide(2, 10)  // 0.2 — хотели 10/2 = 5, передали наоборот

Ошибка 3: Изменять параметр-объект (мутация)

function applyDiscount(product, pct) {
  product.price = product.price * (1 - pct / 100)  // меняем оригинал!
  return product
}
// Правильно: создавай новый объект
function applyDiscount(product, pct) {
  return { ...product, price: product.price * (1 - pct / 100) }
}

В реальных проектах

Примеры

Система расчётов для интернет-магазина

// Чистые функции для расчётов корзины

function calcSubtotal(price, quantity) {
  return price * quantity
}

function calcDiscount(subtotal, discountPct) {
  return subtotal * (discountPct / 100)
}

function calcShipping(subtotal, freeFrom = 2000) {
  return subtotal >= freeFrom ? 0 : 299
}

function calcTotal(price, quantity, discountPct = 0) {
  const subtotal = calcSubtotal(price, quantity)
  const discount = calcDiscount(subtotal, discountPct)
  const shipping = calcShipping(subtotal)
  return subtotal - discount + shipping
}

// Форматирование цены для отображения
const formatPrice = (amount) => `${amount.toLocaleString('ru-RU')} ₽`

// Проверяем на разных данных
console.log(formatPrice(calcTotal(500, 1)))         // "799 ₽" (500 + 299 доставка)
console.log(formatPrice(calcTotal(500, 5)))         // "2 500 ₽" (2500, доставка бесплатно)
console.log(formatPrice(calcTotal(500, 5, 10)))     // "2 250 ₽" (скидка 10%)
console.log(formatPrice(calcTotal(15000, 1, 15)))   // "12 750 ₽"

Задание

Ты пишешь функцию для клипа в видеоредакторе. Функция clamp(value, min, max) ограничивает число в диапазоне от min до max — используется чтобы громкость не вышла за 0-100, прозрачность не вышла за 0-1, и т.д.

Подсказка

Три случая: value < min → return min, value > max → return max, иначе → return value

Загружаем среду выполнения...

Загружаем AI-помощника...

← JavaScript/Функции#55 из 383← Предыдущий Следующий →+25 XP

Полезно по теме:Гайд: как учить JavaScript Практика: JS база Практика: async и сеть Термин: Closure

Функции

На основе предыдущих уроков

Функции используют переменные, работают с типами данных и могут содержать условия и циклы.

Какую проблему решают функции?

Функции решают три проблемы:

1. Повторное использование — написал один раз, вызываешь многократно

2. Читаемость — calculateDiscount() лучше чем 5 строк математики

3. Тестирование — функцию легко проверить на разных входных данных

Объявление функции (Function Declaration)

function functionName(param1, param2) {
  // тело функции
  return result  // возвращаем результат
}

// Вызов
const result = functionName(value1, value2)

Параметры и return

Параметры — входные данные (как переменные внутри функции)

`return` — что функция возвращает вызывающему коду

Без return функция вернёт undefined

После return выполнение функции останавливается

Значения параметров по умолчанию

function createOrder(product, quantity = 1, discount = 0) {
  const total = product.price * quantity * (1 - discount / 100)
  return { product: product.name, quantity, total }
}

createOrder(laptop)           // quantity = 1, discount = 0
createOrder(laptop, 2)        // quantity = 2, discount = 0
createOrder(laptop, 1, 10)    // quantity = 1, discount = 10%

Чистые функции — лучшие функции

Хорошая функция:

Принимает данные через параметры

Возвращает результат через return

Не изменяет ничего снаружи (нет "побочных эффектов")

При одинаковых входных данных всегда даёт одинаковый результат

// Нечистая — меняет внешнюю переменную (плохо)
let total = 0
function addToTotal(price) { total += price }

// Чистая — принимает всё что нужно, возвращает результат (хорошо)
function calcTotal(prices) { return prices.reduce((sum, p) => sum + p, 0) }

Типичные ошибки

Ошибка 1: Забыть return

function calcDiscount(price, pct) {
  const result = price * pct / 100
  // забыли return! функция вернёт undefined
}
const discount = calcDiscount(1000, 10)
console.log(discount)  // undefined — а не 100!

Ошибка 2: Передать аргументы в неверном порядке

function divide(dividend, divisor) { return dividend / divisor }
divide(2, 10)  // 0.2 — хотели 10/2 = 5, передали наоборот

Ошибка 3: Изменять параметр-объект (мутация)

function applyDiscount(product, pct) {
  product.price = product.price * (1 - pct / 100)  // меняем оригинал!
  return product
}
// Правильно: создавай новый объект
function applyDiscount(product, pct) {
  return { ...product, price: product.price * (1 - pct / 100) }
}

В реальных проектах

Примеры

Система расчётов для интернет-магазина

// Чистые функции для расчётов корзины

function calcSubtotal(price, quantity) {
  return price * quantity
}

function calcDiscount(subtotal, discountPct) {
  return subtotal * (discountPct / 100)
}

function calcShipping(subtotal, freeFrom = 2000) {
  return subtotal >= freeFrom ? 0 : 299
}

function calcTotal(price, quantity, discountPct = 0) {
  const subtotal = calcSubtotal(price, quantity)
  const discount = calcDiscount(subtotal, discountPct)
  const shipping = calcShipping(subtotal)
  return subtotal - discount + shipping
}

// Форматирование цены для отображения
const formatPrice = (amount) => `${amount.toLocaleString('ru-RU')} ₽`

// Проверяем на разных данных
console.log(formatPrice(calcTotal(500, 1)))         // "799 ₽" (500 + 299 доставка)
console.log(formatPrice(calcTotal(500, 5)))         // "2 500 ₽" (2500, доставка бесплатно)
console.log(formatPrice(calcTotal(500, 5, 10)))     // "2 250 ₽" (скидка 10%)
console.log(formatPrice(calcTotal(15000, 1, 15)))   // "12 750 ₽"

Функции

На основе предыдущих уроков

Функции используют переменные, работают с типами данных и могут содержать условия и циклы.

Какую проблему решают функции?

Функции решают три проблемы:

1. Повторное использование — написал один раз, вызываешь многократно

2. Читаемость — calculateDiscount() лучше чем 5 строк математики

3. Тестирование — функцию легко проверить на разных входных данных

Объявление функции (Function Declaration)

function functionName(param1, param2) {
  // тело функции
  return result  // возвращаем результат
}

// Вызов
const result = functionName(value1, value2)

Параметры и return

Параметры — входные данные (как переменные внутри функции)

`return` — что функция возвращает вызывающему коду

Без return функция вернёт undefined

После return выполнение функции останавливается

Значения параметров по умолчанию

function createOrder(product, quantity = 1, discount = 0) {
  const total = product.price * quantity * (1 - discount / 100)
  return { product: product.name, quantity, total }
}

createOrder(laptop)           // quantity = 1, discount = 0
createOrder(laptop, 2)        // quantity = 2, discount = 0
createOrder(laptop, 1, 10)    // quantity = 1, discount = 10%

Чистые функции — лучшие функции

Хорошая функция:

Принимает данные через параметры

Возвращает результат через return

Не изменяет ничего снаружи (нет "побочных эффектов")

При одинаковых входных данных всегда даёт одинаковый результат

// Нечистая — меняет внешнюю переменную (плохо)
let total = 0
function addToTotal(price) { total += price }

// Чистая — принимает всё что нужно, возвращает результат (хорошо)
function calcTotal(prices) { return prices.reduce((sum, p) => sum + p, 0) }

Типичные ошибки

Ошибка 1: Забыть return

function calcDiscount(price, pct) {
  const result = price * pct / 100
  // забыли return! функция вернёт undefined
}
const discount = calcDiscount(1000, 10)
console.log(discount)  // undefined — а не 100!

Ошибка 2: Передать аргументы в неверном порядке

function divide(dividend, divisor) { return dividend / divisor }
divide(2, 10)  // 0.2 — хотели 10/2 = 5, передали наоборот

Ошибка 3: Изменять параметр-объект (мутация)

function applyDiscount(product, pct) {
  product.price = product.price * (1 - pct / 100)  // меняем оригинал!
  return product
}
// Правильно: создавай новый объект
function applyDiscount(product, pct) {
  return { ...product, price: product.price * (1 - pct / 100) }
}

В реальных проектах

Примеры

Система расчётов для интернет-магазина

// Чистые функции для расчётов корзины

function calcSubtotal(price, quantity) {
  return price * quantity
}

function calcDiscount(subtotal, discountPct) {
  return subtotal * (discountPct / 100)
}

function calcShipping(subtotal, freeFrom = 2000) {
  return subtotal >= freeFrom ? 0 : 299
}

function calcTotal(price, quantity, discountPct = 0) {
  const subtotal = calcSubtotal(price, quantity)
  const discount = calcDiscount(subtotal, discountPct)
  const shipping = calcShipping(subtotal)
  return subtotal - discount + shipping
}

// Форматирование цены для отображения
const formatPrice = (amount) => `${amount.toLocaleString('ru-RU')} ₽`

// Проверяем на разных данных
console.log(formatPrice(calcTotal(500, 1)))         // "799 ₽" (500 + 299 доставка)
console.log(formatPrice(calcTotal(500, 5)))         // "2 500 ₽" (2500, доставка бесплатно)
console.log(formatPrice(calcTotal(500, 5, 10)))     // "2 250 ₽" (скидка 10%)
console.log(formatPrice(calcTotal(15000, 1, 15)))   // "12 750 ₽"

Задание

Подсказка

Три случая: value < min → return min, value > max → return max, иначе → return value

Загружаем среду выполнения...

Загружаем AI-помощника...