Публикация

Arrow Function в JavaScript

Если вы только начинаете свое знакомство с ES6+, то тут вы узнаете, что такое Arrow Function или же стрелочные функции.

Введение

В 2009 году выходит ECMAScript 5, а спустя еще 2 года выходит обновление ECMAScript 5.1 и последующие 4 года мы не видим ничего нового! Пока в 2015 году не презентуют ECMAScript 6 (далее ES6).

Шестое издание ECMAScript приносит с собой большое количество новых как концептуальных так и синтаксических изменений и один из таких изменений были Arrow Function Expressions.

До выхода ES6 мы писали анонимные функции так:

var greet = function () {
  console.log("Welcome to bcode.dev!");
};
  
greet();

Как вы уже возможно догадались Arrow Function это те же анонимные функции но с небольшими изменениями о которых пойдет речь ниже. Выглядит стрелочная функция так:

var greet = () => {
  console.log("Welcome to bcode.dev!")
}

greet()

Основные Различия

Стрелочных функци имеют lexical scope для this контекста.

Lexical Scope - это область видимости переменных, которые расположены вне функции при условии, что функция определенна после объявления переменной, но не наоборот, переменные объявленные внутри функций не могут быть видны другим функциям.

Другими словами все стрелочные функции могут видеть переменные, которые объявлены вне функции и не могут видеть переменные объявленые внутри других функций.

Синтаксис

Прежде давайте поймем базовый синтаксис:

([params]) => [expression]

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

Если выражение простое, то мы можем написать так:

const plus = (a, b) => a + b
console.log(calc(2, 2))

> 4

Если же мы хотим реализовать более сложное выражение, тогда мы реализуем это следующим образом:

const plus = (a, b) => {
  let sum = a + b
  return sum
}

plus(10, 7)
> 17
Опубликовано: 10 ноября 2021 г.Просмотров: 34

Комментарии

Мы не даем слово анониму 😶
Войдите, пожалуйста.

Еще никто не комментировал эту публикацию 🤔