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

Допустим, в интернет-магазине нужно посчитать цену со скидкой для каждого товара. Можно написать одни и те же три строки в десяти местах, но если в формуле найдётся ошибка, исправлять придётся десять раз. Вместо этого код один раз оформляют в функцию, дают ей имя и просто вызывают там, где нужно.

Объявление и вызов функции

Функцию объявляют ключевым словом function, после которого идут имя, параметры в круглых скобках и тело в фигурных. Объявить — ещё не значит выполнить: функция работает, только когда её вызывают, написав скобки после имени. Значения, передаваемые при вызове, называются аргументами.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('Aysel');
greet('Murad');
greet('Leyla');

Hello, Aysel!
Hello, Murad!
Hello, Leyla!

return: возврат результата

Часто функция что-то вычисляет и возвращает результат туда, откуда её вызвали. Для этого пишут return. Возвращённое значение можно сохранить в переменную, использовать в другом вычислении или вывести. Как только выполняется return, функция сразу завершается. Если return нет, функция возвращает undefined.

function calculateArea(width, height) {
  return width * height;
}

const room = calculateArea(4, 5);
console.log('Room:', room);
console.log('Two rooms:', calculateArea(3, 3) + calculateArea(2, 1));

function addNoReturn(a, b) {
  const sum = a + b;
}
console.log(addNoReturn(2, 3));

Room: 20
Two rooms: 11
undefined

Параметру можно задать значение по умолчанию: оно используется, если аргумент не передан.

function orderTea(size = 'medium', sugar = 1) {
  return `${size} tea with ${sugar} sugar`;
}

console.log(orderTea());
console.log(orderTea('large'));
console.log(orderTea('small', 0));

medium tea with 1 sugar
large tea with 1 sugar
small tea with 0 sugar

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

Стрелочная функция (arrow function) — современный и более краткий способ записи функции: вместо слова function после параметров ставится знак =>. Если тело — одно выражение, фигурные скобки и return не пишут: значение выражения возвращается автоматически. Скобки вокруг единственного параметра тоже можно опустить.

const square = (x) => x * x;
const add = (a, b) => a + b;
const shout = text => text.toUpperCase() + '!';
const sayHi = () => 'Hi!';

const describe = (name, age) => {
  const group = age >= 18 ? 'an adult' : 'a teenager';
  return `${name} is ${group}`;
};

console.log(square(7), add(2, 3));
console.log(shout('goal'), sayHi());
console.log(describe('Elvin', 15));

49 5
GOAL! Hi!
Elvin is a teenager

const double1 = (n) => n * 2;
const double2 = (n) => { n * 2; };
const double3 = (n) => { return n * 2; };

console.log(double1(5), double2(5), double3(5));

10 undefined 10

Область видимости и функции как значения

Переменная, созданная внутри функции, локальна: она существует только внутри этой функции. А переменную, созданную снаружи, можно читать изнутри функции. Это правило изолирует функции друг от друга и предотвращает конфликты имён.

const siteName = 'Educora';

function showScope() {
  const secret = 42;
  console.log(siteName, secret);
}

showScope();
console.log(typeof secret);

Educora 42
undefined

В JavaScript функция — тоже значение: её можно сохранить в переменную и передать другой функции как аргумент. Функцию, переданную в другую функцию, называют колбэком (callback). Эта идея будет встречаться повсюду — в методах массивов и в асинхронном коде.

function repeat(times, action) {
  for (let i = 1; i <= times; i++) {
    action(i);
  }
}

repeat(3, (step) => console.log(`Step ${step}`));

Step 1
Step 2
Step 3

const toFahrenheit = (celsius) => {
  // return the temperature in Fahrenheit
};

console.log(toFahrenheit(0));
console.log(toFahrenheit(100));
console.log(toFahrenheit(-40));

32
212
-40