Стрелочную или обычную функцию использовать?

Question

[Ibishka]

document.querySelector("#another").addEventListener("click", () =>
cityBox.innerHTML =  '<p class="city__title">Choose a city:</p><input type="text" class="city__input input" placeholder="Enter city" />')

vs

document.querySelector("#another") .addEventListener ("click", function () {
cityBox.innerHTML =  '<p class="city__title">Choose a city:</p><input type="text" class="city__input input" placeholder="Enter city" />'});

Comments

[Lynn «Кофеман»]

Пока ваша функция никак не использует контекст - пофиг

Answer 1

[Vladyslav Kliuiev]

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

Answer 2

[Вадим]

Раз уж пошла такая пьянка, то лучше будет так:

var cityBox = document.querySelector("#cityBox");
var anotherCity = document.querySelector("#another");
anotherCity.addEventListener("click", anotherCityHandler);

function anotherCityHandler() {
  cityBox.innerHTML = '<p class="city__title">Choose a city:</p><input type="text" class="city__input input" placeholder="Enter city" />'
}

Чем лучше:

• Сохраняете ссылку на элемент в переменную, таким образом меньше обращений к DOM (Одна из самых медлительных операций)
  
• Определеяете функцию и добавляете обработчик по ссылке. Такой подход позволяет воспользоваться методом removeEventListener, а так же переиспользовать функцию отрисовки дополнительного инпута.
  

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

Использовать стрелочную функцию или обычную, в данном случае, практически без разницы, тем не менее, предложу пользоваться обычной, так как у Вас нет необходимости в стрелочной.
Критерий "мне эта больше нравится, потому что она красивее" - плохой критерий.
И, к сожалению, без пруфов и 100% уверенности в следующих словах: обычная функция для движка будет проще.