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

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

Стрелочные функции - это краткая альтернатива стандартным выражениям функций JavaScript, но когда я впервые увидел синтаксис, я понятия не имел, как интерпретировать то, что делает эта строка кода… не говоря уже о том, как она была вызвана, чтобы найти ее в Google! Давайте посмотрим, когда они пригодятся, особенно когда дело доходит до this.

Синтаксис:

Вероятно, вы знакомы со стандартным выражением функции в JavaScript:

// standard function expression:
const sum = function(num1, num2) {
  return num1 + num2
}
sum(2, 3)
// 5

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

// concise body:
const sum = (num1, num2) => num1 + num2
sum(2, 3)
// 5

Наш => заменяет function, {}, ANDreturn в стандартном функциональном выражении, сокращает общее количество строк кода до одной и по-прежнему возвращает тот же результат. Синтаксис блока требует явного возврата, но при этом экономит время и строки кода:

// blocky body:
const multiply = (num1, num2) => { return num1 * num2; };
multiply(2, 3)
// 6

Когда = ›полезно:

Используйте => для однострочных функций, которым требуется неявное возвращаемое значение. Стрелочные функции и их неявный возврат особенно полезны в случаях, когда вы хотите применить функцию много раз. Например, преобразование массива элементов с помощью map - это простая задача со стрелочными функциями:

// transforming an array of elements:
const names = objects.map(object => object.name);

// often seen in fetch requests:
function fetchDogs(){
  fetch("https://dog.ceo/api/breeds/image/random")
  .then(response => response.json())
  .then(addToDom)
}

дело с `this` в том, что ...

Стрелочные функции становятся еще более мощными, когда дело доходит до this в объектно-ориентированном JavaScript. Стрелочная функция не имеет собственного значения this, но неявно связана блоком кода, в котором определена стрелочная функция, также известной как лексическая область видимости.

До ES6 и стрелочных функций перенос значения this между областями функций имел несколько обходных решений, таких как установка значения, равного переменной, такой как that = thisили использование .bind.

Стрелочные функции несут значение this, как это определено блоком, в котором функция определена. Также следует отметить, что вы не можете изменить или принудить значение this с помощью стрелочной функции, использующей .bind. Стрелочная функция всегда отменяет любые ранее привязанные значения.

Чтобы узнать, что могут делать эти мощные маленькие функции, ознакомьтесь со следующими ресурсами:

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