Обязательна ил функция в js?

Question

[ArutaGerman]

Добрый день!
Нужно ли button.forEach() тоже обрамлять в функцию или по стандартам (ES6 и т.п.) допускается такое написание как у меня?
Структура кода:

let button = document.querySelectorAll('masterSelector');
let subMenuAll = document.querySelectorAll('slaveSelector');

const dnoneStyle = () => {	
//несколько строк кода
}

button.forEach((e) => {
//несколько строк кода
}

//...... еще куча кода

Comments

[Даша Циклаури]

1) какая цель оборачивать в еще одну функцию?
2) почему button, subMenuAll объявляются через let?

[Aetae]

Работает - можно, не работает - нельзя.

А вот нужно ли - другой вопрос, который приходит с опытом и чтением книжек.
Например вот так

const dnoneStyle = () => {	
//несколько строк кода
}

вместо

function dnoneStyle() {	
//несколько строк кода
}

делать надо только если вам нужна именно стрелочная функции с её отношением к this. Иначе это использование языковых конструкция не по назначению, лишнее усложнение кода и место возможных ошибок.

[Алексей Уколов]

Aetae, ошибки с контекстом намного более вероятны как раз при использовании «старого» варианта. Для этого стрелочные функции и добавили. Так что я бы сказал ровно наоборот.

[Aetae]

Алексей Уколов, если контекст используется вообще.
В основном я вижу только хипстеров фигачащих подобный говнокод просто так. Стрелочные функции в 99% вообще не должны быть именными, они должны юзаться как лямбды по месту необходимости.
Случаи когда действительно нужна именовная стрелочная функция - редки и требуют понимания происходящего.

[WbICHA]

Aetae,

если контекст используется вообще.

Вот именно, тогда на каком основании вы называете использование именнованных стрелочных функций "говнокодом"?
И чем же фанкшены лучше стрелочных, если не используется контекст? Читабельность? Нет, никакой разницы. Функционалом? Идентичный.
Так что хотелось бы, чтобы вы аргументировали своём мнение.

[Aetae]

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

[WbICHA]

Aetae,

Иначе это использование языковых конструкция не по назначению

Открываем документацию: https://developer.mozilla.org/ru/docs/Web/JavaScri...
Ищем, где написано, что использование именованных стрелочных функций ─ это использование их не по назначению. Ой, а там такого нет, зато есть это:

var func = x => x * x;                  // краткий синтаксис, 
                                        // неявно возвращает результат
var func = (x, y) => { return x + y; }; // блочный синтаксис, 
                                        // явно возвращает результат

Я всё же поверю официальной документации.

усложнение кода

Каким образом стрелочные функции "усложняют код"? Можно поподробнее?

место возможных ошибок.

Очень интересно, можно привести пример?

Answer 1

[bqio]

Если я правильно понял Ваш вопрос, то зависит от цели. Стрелочные функции используют для сохранения контекста (this), или (если он не важен) для более читабельного кода. Если Вы будете использовать function, то контекст сохранен не будет.

Comments

[ArutaGerman]

Спасибо, за разъяснение.
А если не делать стрелочной функцией, а сделать по типу: "elements.forEach(function(name) {...} )", то оборачивать тоже не важно?

[WbICHA]

ArutaGerman, а с какой целью вы хотите обернуть? Для чего? Что вы хотите получить от обёртывания?

[ArutaGerman]

WbICHA, я не хочу.
Меня интересует только стандарт и эстетика:)
А то мало ли я такой красавец пишу и работает, а потом мидл посмотрит и кровь из глаз:)

[WbICHA]

ArutaGerman, в таком случае стоит начать с использования const ВСЕГДА, кроме тех случаев, когда это без let не обойтись никак.
Давать нормальные названия переменным:

// это массив, как по названию это можно понять?
// должно быть buttons
let button = document.querySelectorAll('masterSelector');

// что это за "е"? Если 1-2 строки кода, можно использовать первую букву названия массива,
// если оно понятное, в данном случае это "b"
// если же больше, то уже стоит использовать полное название,
// в данном случае buttons → button (именно поэтому названия массивов и должны быть во множественном числе)
button.forEach((e) => {
//несколько строк кода
}

[ArutaGerman]

WbICHA, т.е. все массивы объявлять тоже через const, а не let, если массив не будет меняться?
И перед forEach тоже добавить?

[WbICHA]

ArutaGerman, массивы ─ только. Элементы в массиве (как и в объекте) можно будет менять в любом случае, но объявление через конст не позволит записать ссылку на другой массив в данную переменную.
И да, переменные, которым присваиваются массивы или объекты, хранят в себе ТОЛЬКО ссылку на массив / объект. То есть таким образом:

const a1 = { b: 1, c: 1 };
const a2 = a1;

Будет передан не объект, а ссылка на него. Что такое ссылки в программировании можно загуглить.)

И перед forEach тоже добавить?

Это вызов метода же, зачем там конст?

[WbICHA]

ArutaGerman, а вообще, поставь prettier и eslint (к примеру, airbnb настройки) и это уже не даст тебе особо разгуляться (то есть сложнее будет говнокодить).

[ArutaGerman]

WbICHA, да мне хотя бы понять как в js кодить:)
Пишу код для фильтров товаров - до этого написал на jQuery его и решил переписать на нативный js.
Столько нюансов в нативке оказалось, которые мне кажутся костылями:)