Рубрики
Без рубрики

Постоянная путаница: почему я все еще использую операторы функции JavaScript

Вернувшись в конце 90-х – когда я узнал JavaScript – нас научили написать функцию «Hello World» с использованием оператора функции. Как этот … функция helloworld () {return ‘Hello World!’; } В наши дни кажется, что все крутые дети пишут функцию «Hello World», как это … const helloworld = () => ‘hello

Автор оригинала: FreeCodeCamp Community Member.

Вернувшись в конце 90-х – когда я узнал JavaScript – нас научили написать функцию «Hello World», используя Функция Операция Отказ Как это…

function helloWorld() {
  return 'Hello World!';
}

В наши дни кажется, что все крутые дети пишут функцию «Hello World», как это …

const helloWorld = () => 'Hello World!';

Это Функция выражение В es2015 JavaScript и это сексуально, как ад. Это прекрасно смотреть. Это все одна строка. Так раздел. Так мило.

Он использует функцию стрелки, которая является одним из Самые популярные функции ES2015 Отказ

Когда я впервые увидел это, я был как:

Итак, после почти 20 лет JavaScript и после использования ES2015 на ряд проектов, вот как я бы написал функцию «Hello World» сегодня:

function helloWorld() {
  return 'Hello World!';
}

Теперь, когда я показал вам новый путь, я уверен, что вы едва можете посмотреть на старый школьный код выше.

Три целых строки только для простой маленькой функции! Все эти дополнительные персонажи!

Я знаю, что ты думаешь …

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

Эта цитата «Дядя Боб» Мартин объясняет почему:

Заявления функций имеют два четких преимущества по поводу выражений функций:

Преимущество № 1: ясность намерения

При сканировании тысяч строк кода в день полезно иметь возможность выяснить намерение программиста как можно быстрее и легко.

Взгляните на это:

const maxNumberOfItemsInCart = ...;

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

const maxNumberOfItemsInCart = 100;

… Или это может быть так же легко быть:

const maxNumberOfItemsInCart = (statusPoints) => statusPoints * 10;

Если вы используете функцию оператора, нет такой двусмысленности.

Смотреть на:

const maxNumberOfItemsInCart = 100;

…против:

function maxNumberOfItemsInCart(statusPoints) {
  return statusPoints * 10;
}

Намерение кристально чистое справа от начала линии.

Но, возможно, вы используете редактор кода, который имеет некоторые подсказки для кодирования цвета. Может быть, вы скоростной читатель. Может быть, вы просто не думаете, что это большая сделка.

Я слышу тебя. Терризность все еще выглядит довольно сексуально.

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

Но это не Моя единственная причина …

Преимущество № 2: Порядок декларации исполнения

В идеале я хочу объявить мой код более или менее в том порядке, что я ожидаю, что он будет выполнен.

Это ShowStopper для меня: любое значение, объявленное с использованием ключевого слова const, это недоступный пока казни не достигнет этого.

Справедливое предупреждение: Я собираюсь пойти все: «Профессор JavaScript» на вас. Единственное, что вы должны понимать во всем жаргон ниже, в том, что Вы не можете использовать Const, пока вы не объявили его Отказ

Следующий код бросит ошибку:

sayHelloTo('Bill');

const sayHelloTo = (name) => `Hello ${name}`;

Это потому, что, когда JavaScript двигатель читает код, он будет привязывать «Сайхеллото», но это не будет Инициализировать Это.

Все объявления в JavaScript связаны рано, но они инициализируются по-разному.

Другими словами, JavaScript Персональный Декларация «Сайхеллото» – сначала читает это и создает пространство в памяти на Держите его значение – Но это не Установить “Сайхеллото” ни к чему до сих пор не достигнет этого во время исполнение Отказ

Время между «Seheleloto», будучи связанным и «Sayhelloto» инициализированным, называется Временная мертвая зона (TDZ).

Если вы используете ES2015 непосредственно в браузере (в отличие от того, чтобы трансилинг до ES5 с чем-то вроде Babel), следующий код тоже на самом деле бросает ошибку:

if(thing) { 
  console.log(thing);
}
const thing = 'awesome thing';

Код выше, написанный с помощью «VAR» вместо «const», будет не бросить ошибку, потому что варис инициализируется как undefined Когда они связаны, тогда как Consts не инициализируются во время привязки. Но я отвлечет …

Функциональные операторы не страдают от этой проблемы TDZ. Ниже приведен в порядке:

sayHelloTo('Bill');

function sayHelloTo(name) {
  return `Hello ${name}`;
}

Это связано с тем, что операторы функции получают инициализируются, как только они связаны – до Любой код выполнен.

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

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

Мой мозг этого не работает. Я хочу контекст перед деталями.

Большинство кодов написано людьми. Поэтому имеет смысл, что порядок большинства людей понимания примерно следит за тем самым порядком исполнения кода.

На самом деле, не было бы неплохо, если бы мы могли обеспечить небольшое резюме нашего API в верхней части нашего кода? С функциональными операторами мы полностью можем.

Ознакомьтесь с этим (несколько надуманный) модуль покупок …

export {
          createCart,
       addItemToCart,
  removeItemFromCart,
        cartSubTotal,
           cartTotal,
            saveCart,
           clearCart,
}

function createCart(customerId) {...}

function isValidCustomer(customerId) {...}

function addItemToCart(item, cart) {...}

function isValidCart(cart) {...}

function isValidItem(item) {...}

...

С функционными выражениями она будет выглядеть что-то вроде …

...

const _isValidCustomer = (customerId) => ...

const _isValidCart = (cart) => ...

const _isValidItem = (item) => ...

const createCart = (customerId) => ...

const addItemToCart = (item, cart) => ...

...
export {
          createCart,
       addItemToCart,
  removeItemFromCart,
        cartSubTotal,
           cartTotal,
            saveCart,
           clearCart,
}

Представьте это как больший модуль со многими небольшими внутренними функциями. Что бы вы предпочли?

Есть те, кто будет утверждать, что используя что-то, прежде чем вы объявили, это неестественно, и могут иметь непреднамеренные последствия. Есть даже чрезвычайно умные люди, которые сказали такие вещи.

Это определенно мнение – не факт – что один путь лучше другого.

Но если вы спросите меня: Код – это связь. Хороший код рассказывает историю.

Я позволю компиляторам и транспортам, министрам и уродям, иметь дело с оптимизирующим кодом для машин.

Я хочу оптимизировать мой код для Человеческое понимание Отказ

А как насчет этих функций стрелки?

Да. Все еще сексуально и все еще потрясающе.

Обычно я использую функции стрелки для передачи небольшой функции в качестве значения для функции более высокого порядка. Я использую стрелку функции с обещаниями, с картой, с фильтром, с уменьшением. Это колени пчел, мои друзья!

Несколько примеров:

const goodSingers = singers.filter((singer) => singer.name !== 'Justin Bieber');

function tonyMontana() {
  return getTheMoney()
           .then((money) => money.getThePower())
           .then((power) => power.getTheWomen());
}

Я использовал несколько других новых функций JavaScript в этой статье. Если вы хотите узнать больше о последнем стандарте JavaScript (ES2015), и все классные функции могут предложить, Вы должны Получите мой краткий руководстве на бесплатное Отказ

Моя цель – всегда помогать как можно больше разработчиков, если вы нашли эту статью полезную, нажмите кнопку ❤ (рекомендую), чтобы другие его увидели. Спасибо!

Читайте ещё по теме: