JavaScript | Стрелочная функция с одним параметром

Есть массив:

var massiv = ["молоко", "сметана", "творог"]

Мы хотим преобразовать все элементы массива при помощи метода map() и стрелочной функции с одним параметром. Мы хотим оборачивать элементы массива в абзацы — HTML-элементы на каждом вызове стрелочной функции.

Стрелочная функция с одним параметром будет выглядеть так:

i=>`<p>${i}</p>`

Выражение с массивом и методом будет выглядеть так:

massiv.map(i=>`<p>${i}</p>`)

Мы передаём в функцию обратного вызова только элемент массива на каждой итерации метода map().

Стрелочная функция с одним параметром - JavaScript — Стрелочная функция с одним параметром — JavaScript

Теперь мы подготовили элементы массива к генерации HTML-разметки.

Немного про нашу стрелочную функцию без параметров

Стрелочные функции состоят из трёх элементов:

Первым элементом идут Параметры Стрелки (ArrowParameters)
Вторым элементом является сама стрелка — =>
Третьим элементом является Лаконичное Тело (ConciseBody)

Объявление стрелочной функции начинается с Параметров Стрелки (ArrowParameters), которые можно разделить на две составляющие:

объявление начинается с Идентификатора Привязки (BindingIdentifier)
объявление начинается с Обложки Списка Параметров Выражений и Стрелок в Скобках (CoverParenthesizedExpressionAndArrowParameterList)

Мы выбрали первый вариант определения Параметров Стрелки (ArrowParameters) т. к. у нас есть Идентификатор Привязки (BindingIdentifier).

BindingIdentifier - ECMAScript — BindingIdentifier — ECMAScript

Мы передаём ОДИН идентификатор, поэтому его можно не оборачивать в круглые скобки. Его можно записать как есть до стрелки.

Потом мы записали саму стрелку =>

ArrowFunction - ECMAScript — ArrowFunction — ECMAScript

Затем в Лаконичное Тело (ConciseBody) мы поместили строку `${i}`. Мы не использовали стандартных фигурных скобок {} как для Функционального Тела (FunctionBody), а воспользовались «свободным» написанием Выражения Тела (ExpressionBody) без фигурных скобок. В нашем случае `${i}` является результатом выполнения стрелочной функции без параметров.

ConciseBody - ECMAScript — ConciseBody — ECMAScript

То же самое с использованием оператора function

Этот пример можно записать так:

massiv.map(function(i){return `<p>${i}</p>`})

Обычная анонимная функция в этом случае выглядит так:

function(i){return `<p>${i}</p>`}

Пример вызова выражения:

Стрелочная и обычнаяя функции с одним параметром - JavaScript — Стрелочная и обычнаяя функции с одним параметром — JavaScript

Информационные ссылки

Стрелочная функция без параметров

JavaScript | Функции (Function)

Оператор return

Стандарт ECMAScript — Раздел «15.3 Arrow Function Definitions» — https://tc39.es/ecma262/#sec-arrow-function-definitions