Функции

01 Что такое функция. Function Declaration

Представьте, что вам нужно трижды в разных местах программы поприветствовать пользователя. Без функций код выглядит так:

console.log("Ассалому алейкум!");
console.log("Добро пожаловать в MakeFirstStep");

// ... какой-то другой код ...

console.log("Ассалому алейкум!");
console.log("Добро пожаловать в MakeFirstStep");

// ... и ещё раз ...

console.log("Ассалому алейкум!");
console.log("Добро пожаловать в MakeFirstStep");

Работает, но представьте, что текст нужно поменять. Придётся искать и исправлять его везде — и где-нибудь обязательно забудете. Функция решает эту проблему: мы один раз описываем действие и даём ему имя, а потом просто вызываем его по имени.

function greet() {
  console.log("Ассалому алейкум!");
  console.log("Добро пожаловать в MakeFirstStep");
}

greet();
greet();
greet();

Из чего состоит функция

Способ, который мы только что использовали, называется Function Declaration — «объявление функции». Разберём его по частям:

function

Ключевое слово. Говорит JavaScript: «сейчас будет функция».

Имя

Как мы будем обращаться к функции. Обычно это глагол на английском: greet, showMenu, calcTotal.

Параметры

В круглых скобках. Это «входные данные» функции. Скобки пишутся всегда, даже если они пустые.

Тело

Код в фигурных скобках { }. Выполняется каждый раз, когда функцию вызывают.

Вызов

Имя функции и круглые скобки: greet(). Именно скобки заставляют функцию сработать.

Что происходит при вызове — по шагам

function welcome(name) {
  console.log("Хуш омадед, " + name + "!");
}

welcome("Мадина");   // → Хуш омадед, Мадина!
welcome("Фарход");   // → Хуш омадед, Фарход!

1. JavaScript видит объявление и запоминает: есть функция welcome. Код внутри пока не выполняется — рецепт записан, но готовить ещё не начали.
2. Встречает вызов welcome("Мадина") и «прыгает» внутрь функции.
3. Кладёт значение в параметр: name становится равен "Мадина".
4. Выполняет тело — выводит строку в консоль.
5. Возвращается туда, откуда функцию вызвали, и идёт дальше — к следующему вызову, где name уже будет "Фарход".

Как называть функции

• Имя описывает действие: showPrice, checkPassword, sendMessage.
• Пишем в стиле camelCase: первое слово с маленькой буквы, каждое следующее — с большой.
• Только латиница. Кириллица технически работает, но в реальных проектах так не пишут.
• Одна функция — одно действие. Если в имени хочется написать «и» (checkAndSendAndSave), значит, это должно быть несколько функций.

function greet() {
  console.log("Салом!");
}

greet;               // ничего не произойдёт — функцию не вызвали
console.log(greet);  // → ƒ greet() — выводится сама функция, а не результат
greet();             // → Салом!

// объявите функцию sayHello здесь


// вызовите её 3 раза

Ассалому алейкум, MakeFirstStep!
Ассалому алейкум, MakeFirstStep!
Ассалому алейкум, MakeFirstStep!

// функция showSchedule выводит три строки расписания

Понедельник — HTML и CSS
Среда — JavaScript
Пятница — Практика с ИИ

// function welcomeStudent(name) { ... }

Хуш омадед, Зарина! Рады видеть вас в группе.
Хуш омадед, Рустам! Рады видеть вас в группе.
Хуш омадед, Нилуфар! Рады видеть вас в группе.

02 Function Expression

В JavaScript функция — это такое же значение, как число или строка. А любое значение можно положить в переменную. Этот способ называется Function Expression — «функциональное выражение».

// Declaration — объявление
function sayHi() {
  console.log("Салом!");
}

// Expression — функция кладётся в переменную
const sayBye = function () {
  console.log("Хайр, то пагох!");
};

sayHi();   // → Салом!
sayBye();  // → Хайр, то пагох!

Посмотрите внимательно на второй вариант:

• после слова function нет имени — такая функция называется анонимной. Её имя — это имя переменной sayBye;
• мы используем const, чтобы случайно не перезаписать функцию;
• в конце стоит точка с запятой ; — потому что это обычное присваивание, как const x = 5;.

Функция как значение

Раз функция — значение, её можно передать в другую переменную. Обратите внимание: без скобок мы передаём саму функцию, а не вызываем её.

const greet = function (name) {
  console.log(`Салом, ${name}!`);
};

const hello = greet;   // теперь у одной функции два имени
hello("Шахром");       // → Салом, Шахром!
greet("Шахром");       // → Салом, Шахром!

Именно эта идея — «функцию можно передать как значение» — станет главной на следующем уроке, когда мы будем передавать функции в методы массивов map и filter.

Главное отличие: hoisting («поднятие»)

Перед тем как выполнять код, JavaScript быстро просматривает файл и заранее запоминает все функции, объявленные через Declaration. Поэтому их можно вызывать даже выше того места, где они написаны. Это называется hoisting — «поднятие».

showMenu(); // → Меню: самбуса, курутоб, чой — работает, хотя функция ниже!

function showMenu() {
  console.log("Меню: самбуса, курутоб, чой");
}

С Expression так не получится: переменная const появляется только в той строке, где её объявили. До этой строки её просто нет.

showPrices(); // ✖ ошибка: обращаемся к переменной раньше, чем она создана

const showPrices = function () {
  console.log("Самбуса — 5 сомони");
};

function showAddress() {
  console.log("MakeFirstStep — Душанбе, проспект Рудаки");
}
showAddress();

// ваша Function Expression с именем showAddress
showAddress();

MakeFirstStep — Душанбе, проспект Рудаки

hello();
function hello() {
  console.log("Declaration сработал!");
}

hi();
const hi = function () {
  console.log("Expression сработал!");
};

Declaration сработал!
Expression сработал!

// const showPrice = ...

// Самбуса — 5, Курутоб — 35, Шакароб — 15

Самбуса — 5 сомони
Курутоб — 35 сомони
Шакароб — 15 сомони

03 Параметры, аргументы и значения по умолчанию

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

Параметр

Имя в скобках при объявлении функции: function orderTaxi(from, to). Внутри функции это обычная переменная.

Аргумент

Конкретное значение при вызове: orderTaxi("Сино", "Корвон").

function orderTaxi(from, to) {
  console.log(`Такси: ${from} → ${to}`);
}

orderTaxi("Сино", "Корвон");        // → Такси: Сино → Корвон
orderTaxi("Аэропорт", "Ботсад");    // → Такси: Аэропорт → Ботсад

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

Аргументы попадают в параметры строго по порядку: первый — в первый, второй — во второй. Имена переменных при вызове роли не играют.

function orderTaxi(from, to) {
  console.log(`Такси: ${from} → ${to}`);
}

orderTaxi("Корвон", "Сино");   // → Такси: Корвон → Сино — поменяли местами, поехали в обратную сторону!

Если аргументов меньше или больше

JavaScript не ругается, если аргументов передали не столько, сколько параметров:

• не хватает аргумента — параметр получает значение undefined («не определено»);
• лишние аргументы — просто игнорируются.

function orderTaxi(from, to) {
  console.log(`Такси: ${from} → ${to}`);
}

orderTaxi("Сино");                          // → Такси: Сино → undefined
orderTaxi("Сино", "Корвон", "с кондиционером"); // → Такси: Сино → Корвон

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

Чтобы вместо undefined было что-то осмысленное, параметру можно задать значение по умолчанию прямо в скобках, через знак =. Оно сработает, только если аргумент не передали.

function greet(name = "гость") {
  console.log(`Салом, ${name}!`);
}

greet("Далер");  // → Салом, Далер!
greet();         // → Салом, гость!

function makeTea(sort = "зелёный", sugar = 0) {
  console.log(`Чой: ${sort}, сахара: ${sugar} ложки`);
}

makeTea();                 // → Чой: зелёный, сахара: 0 ложки
makeTea("чёрный");         // → Чой: чёрный, сахара: 0 ложки
makeTea("чёрный", 2);      // → Чой: чёрный, сахара: 2 ложки
makeTea(undefined, 2);     // → Чой: зелёный, сахара: 2 ложки

Обратите внимание на последнюю строку. Чтобы «пропустить» первый аргумент и задать второй, передают undefined — тогда сработает значение по умолчанию.

function setVolume(level = 50) {
  console.log("Громкость:", level);
}

setVolume();          // → Громкость: 50
setVolume(0);         // → Громкость: 0   — ноль это настоящее значение
setVolume(undefined); // → Громкость: 50

// showRoute(8, "Зелёный базар", "Испечак")
// showRoute(22, "Шохмансур", "92-й мкр")

Маршрутка №8: Зелёный базар → Испечак
Маршрутка №22: Шохмансур → 92-й мкр
Маршрутка №5: undefined → undefined

// function enterRoom(...) { ... }

enterRoom("Сабрина", 204);
enterRoom("Абдулло");
enterRoom();

Сабрина, проходите в аудиторию 204
Абдулло, проходите в аудиторию 101
гость, проходите в аудиторию 101

// function bookTicket(...) { ... }

Билет: Душанбе → Худжанд, место: у окна, класс: эконом
Билет: Душанбе → Бохтар, место: у прохода, класс: эконом
Билет: Душанбе → Куляб, место: у окна, класс: купе

04 return — функция возвращает результат

До сих пор наши функции только показывали что-то в консоли. Но чаще функция должна посчитать результат и отдать его нам, чтобы мы могли дальше с ним работать: сложить, сравнить, показать на странице. Для этого есть слово return — «вернуть».

function sum(a, b) {
  return a + b;
}

const result = sum(10, 5);
console.log(result);          // → 15
console.log(sum(2, 3) * 10);  // → 50

Когда функция встречает return, она отдаёт значение туда, где её вызвали. Можно представить, что вызов sum(10, 5) как бы заменяется результатом — числом 15. Поэтому вызов функции можно положить в переменную, подставить в выражение или передать в другую функцию.

console.log и return — не одно и то же

Это самая частая путаница у начинающих. Сравните:

function getChange(paid, price) {
  console.log(paid - price);
}

const change = getChange(100, 70);
// → 30 (вывела сама функция)
console.log("Сдача:", change);
// → Сдача: undefined 😕

function getChange(paid, price) {
  return paid - price;
}

const change = getChange(100, 70);
console.log("Сдача:", change);
// → Сдача: 30 ✓

Правило: если функция что-то считает — пусть возвращает результат через return. А решать, выводить его в консоль или на страницу, будет код, который эту функцию вызвал.

Без return функция возвращает undefined

function doNothing() {
  const x = 5;
}

console.log(doNothing()); // → undefined

return сразу завершает функцию

После return функция прекращает работу. Код ниже него уже не выполнится.

function test() {
  console.log("Шаг 1");
  return "готово";
  console.log("Шаг 2"); // эта строка никогда не выполнится
}

console.log(test());
// → Шаг 1
// → готово

Этим часто пользуются, чтобы выйти из функции пораньше, если что-то не так. Такой приём называют «ранний выход» (guard).

function canEnroll(age) {
  if (age < 14) {
    return "Пока рано: на курс принимают с 14 лет";
  }
  return "Добро пожаловать на курс!";
}

console.log(canEnroll(12)); // → Пока рано: на курс принимают с 14 лет
console.log(canEnroll(17)); // → Добро пожаловать на курс!

Заметьте: else здесь не нужен. Если первое условие сработало, функция уже вышла на первом return и до второго не дойдёт.

Функция может вернуть true или false

Функции-проверки обычно возвращают логическое значение. Их принято называть с is, has или can в начале:

function isAdult(age) {
  return age >= 18;
}

console.log(isAdult(20)); // → true
console.log(isAdult(15)); // → false

if (isAdult(19)) {
  console.log("Можно получить водительские права");
}

Функции работают вместе

Результат одной функции можно сразу передать в другую. Так из маленьких простых функций собирают большие программы.

function getTotal(price, count) {
  return price * count;
}

function addDelivery(total) {
  return total + 10;
}

const order = addDelivery(getTotal(35, 3)); // 3 курутоба по 35 + доставка 10
console.log(`К оплате: ${order} сомони`);  // → К оплате: 115 сомони

function getCity() {
  return
    "Душанбе";
}

console.log(getCity()); // → undefined — значение «потерялось»

// function sum(a, b) { ... }

// const total = ...
// console.log(...)

Итого: 41 сомони

// function getDiscountPrice(price, percent) { ... }

console.log("Куртка:", getDiscountPrice(400, 25));
console.log("Кроссовки:", getDiscountPrice(350, 10));

Куртка: 300
Кроссовки: 315

// function checkPassport(age) { ... }

console.log(checkPassport(18));
console.log(checkPassport(16));
console.log(checkPassport(13));

Можно получить паспорт
Можно получить паспорт
Рано: осталось лет — 3

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

Стрелочная функция (arrow function) — это короткая запись Function Expression. Своё название она получила из-за знака =>, похожего на стрелку. В современном коде, в React и в коде, который пишет ИИ, вы будете встречать её постоянно.

Превращаем обычную функцию в стрелочную — по шагам

1. Исходная функция — Expression
   JavaScript

   const double = function (n) {
     return n * 2;
   };

2. Убираем слово function, после скобок ставим стрелку =>
   JavaScript

   const double = (n) => {
     return n * 2;
   };

3. Если в теле только return — убираем фигурные скобки и само слово return. Значение вернётся автоматически.
   JavaScript

   const double = (n) => n * 2;

4. Если параметр ровно один — можно убрать и круглые скобки
   JavaScript

   const double = n => n * 2;

Все четыре варианта делают одно и то же. Проверьте:

const double = n => n * 2;

console.log(double(5));   // → 10
console.log(double(21));  // → 42

Правила записи

const sayHi = () => "Салом!";
const sum = (a, b) => a + b;
const isEven = n => n % 2 === 0;

// несколько строк — нужны фигурные скобки и return
const getBill = (price, people) => {
  const tip = price * 0.1;
  return (price + tip) / people;
};

console.log(sayHi());          // → Салом!
console.log(sum(7, 8));        // → 15
console.log(isEven(10));       // → true
console.log(getBill(200, 4));  // → 55

const triple = n => { n * 3 };
console.log(triple(4)); // → undefined

const triple = n => n * 3;
console.log(triple(4)); // → 12

Когда какую функцию использовать

• Стрелочная — для коротких функций и особенно когда функцию передают в другую функцию. На следующем уроке вы увидите, как красиво они смотрятся в методах массивов: prices.map(p => p * 2).
• Declaration — для крупных, «главных» функций программы, у которых важное имя.
• У стрелочных функций есть одна особенность, связанная со словом this. Её мы разберём на уроке про объекты, а пока просто запомните, что она существует.

function square(n) {
  return n * n;
}
function greet(name) {
  return `Салом, ${name}!`;
}
function getRandomDice() {
  return 4; // честно выбрано броском кубика 🎲
}

// ваши три стрелочные функции: square, greet, getRandomDice

console.log(square(9));
console.log(greet("Манижа"));
console.log(getRandomDice());

81
Салом, Манижа!
4

const RATE = 11;

// const toSomoni = ...
// const toUsd = ...

console.log(toSomoni(100));
console.log(toUsd(550));
console.log(toUsd(toSomoni(25)));

1100
50
25

// const travelTime = ...
// const tripInfo = ...

console.log(travelTime(120));
console.log(tripInfo("Хорог", 525));
console.log(tripInfo("Худжанд", 340, 85));

2
Душанбе → Хорог: 525 км, примерно 8.75 ч
Душанбе → Худжанд: 340 км, примерно 4 ч

06 Область видимости

Область видимости (scope) отвечает на вопрос: в каком месте кода переменная «видна» и её можно использовать. От этого зависит, почему иногда код выдаёт ошибку is not defined, хотя переменная «вот же она, написана».

1. Глобальная область

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

const academy = "MakeFirstStep";

function showAcademy() {
  console.log(`Учимся в ${academy}`); // функция видит глобальную переменную
}

showAcademy();         // → Учимся в MakeFirstStep
console.log(academy);  // → MakeFirstStep

2. Область функции (локальная)

Переменные, объявленные внутри функции, существуют только внутри неё. Параметры функции — тоже локальные переменные. Снаружи их не видно.

function makeOrder() {
  const dish = "оши палав";
  console.log(`Заказ: ${dish}`);
}

makeOrder();       // → Заказ: оши палав
console.log(dish); // ✖ ReferenceError: dish is not defined

Это не баг, а очень полезное свойство. Каждая функция — как отдельная квартира: можно спокойно называть переменные внутри, не боясь, что они «перепутаются» с переменными в другой функции.

function morning() {
  const message = "Субх ба хайр!";
  console.log(message);
}

function evening() {
  const message = "Шаб ба хайр!"; // такое же имя — никакого конфликта
  console.log(message);
}

morning(); // → Субх ба хайр!
evening(); // → Шаб ба хайр!

3. Блочная область

Любые фигурные скобки { } — в if, for, while — тоже создают свою область. Переменные let и const, объявленные в блоке, видны только внутри этого блока.

const score = 92;

if (score >= 86) {
  const grade = 5;
  console.log("Оценка внутри блока:", grade); // → Оценка внутри блока: 5
}

console.log(typeof grade); // → undefined — снаружи блока grade не существует

Затенение: одинаковые имена

Если внутри функции объявить переменную с тем же именем, что и снаружи, внутренняя закроет («затенит») внешнюю. Внешняя при этом не меняется.

const weather = "солнечно";

function showMountainWeather() {
  const weather = "снег"; // своя, локальная переменная
  console.log("В Варзобе:", weather);
}

showMountainWeather();             // → В Варзобе: снег
console.log("В Душанбе:", weather); // → В Душанбе: солнечно

JavaScript ищет переменную изнутри наружу: сначала в текущей области, потом в той, что снаружи, и так до глобальной. Берёт первую найденную. Если не нашёл нигде — ошибка is not defined.

Как достать значение из функции наружу

Правильный способ — return. Функция возвращает значение, а мы сохраняем его в переменную снаружи.

function getDish() {
  const dish = "оши палав";
  return dish;
}

const myDish = getDish();
console.log(myDish); // → оши палав

if (true) {
  var oldStyle = "я протёк наружу";
  let newStyle = "я остался внутри";
}

console.log(oldStyle);        // → я протёк наружу
console.log(typeof newStyle); // → undefined

const name = "MakeFirstStep";

function first() {
  const name = "Фарход";
  console.log("1:", name);
}

function second() {
  console.log("2:", name);
}

first();
second();
console.log("3:", name);

Сначала ваш прогноз — потом кнопка «Запустить»

function calcCart(price, count) {
  const total = price * count;
}

calcCart(15, 4);
console.log(`Сумма корзины: ${total} сомони`);

Сумма корзины: 60 сомони

// где объявить счётчик?

// function addVisitor(name) { ... }

addVisitor("Сабрина");
addVisitor("Далер");
addVisitor("Манижа");

Добро пожаловать, Сабрина! Посетителей сегодня: 1
Добро пожаловать, Далер! Посетителей сегодня: 2
Добро пожаловать, Манижа! Посетителей сегодня: 3

07 Итоговая практика

Теперь соберём всё вместе. В этих задачах пригодятся все темы урока: объявление функций, параметры по умолчанию, return, стрелочные функции и область видимости. Решайте по порядку — каждая следующая чуть сложнее.

// function splitBill(...) { ... }

console.log(splitBill(360, 4));
console.log(splitBill(250, 3, 15));
console.log(splitBill(500, 5, 0));

99
96
100

// const toFahrenheit = ...
// function describeWeather(c) { ... }

console.log(describeWeather(38));
console.log(describeWeather(22));
console.log(describeWeather(5));

38°C (100.4°F) — жарко
22°C (71.6°F) — тепло
5°C (41°F) — прохладно

// function getGrade(score) { ... }
// const isPassed = ...
// function report(name, score) { ... }

console.log(report("Рустам", 87));
console.log(report("Зарина", 72));
console.log(report("Шахром", 56));
console.log(report("Далер", 50));

Рустам: 87 баллов, оценка 5 — сдал
Зарина: 72 баллов, оценка 4 — сдал
Шахром: 56 баллов, оценка 3 — сдал
Далер: 50 баллов, оценка 2 — пересдача