Почему именно нужен return function() (не просто return)?

Question

[olya_097]

https://jsfiddle.net/69u8qzpm/

а почему если
убрать return function()
то код не работает?
https://jsfiddle.net/69u8qzpm/1/
Почему именно нужен return function()? а не просто return

Comments

[Ярослав Иванов]

Ты опять за свое ? что там у тебя работает. В первом случае все работает а во втором все НЕ работает. Где у тебя код работает.

У тебя во втором случает возвращается у функции, которая ничего не return'нет - undefined. И ты undefined пытаешься вызывать как функцию.

P.S. а править вопрос не хорошо. Изначально утверждала, что оба кода работают. Даже не можешь отличить работающий код от не работающего о чем вообще может идти речь. Еще про какие-то книжки гооворит, что читает а банальпо переменную не может создать.

[olya_097]

Ярослав Иванов, так а если вот так ? https://jsfiddle.net/69u8qzpm/3/
есть возврат сейчас
почему не работает?

[Ярослав Иванов]

olya_097, addEventListener - ВТОРЫМ аргументом принимает ФУНЦКИЮ.

element[i].addEventListener('click',  box.innerHTML);

Такая запись будет работать ?

[olya_097]

Ярослав Иванов, нет конечно

[Модератор]

Личная переписка на тостере не способствует выяснению истины.

[Ярослав Иванов]

[olya_097]

Ярослав Иванов, беги уже читай свой справочник, неадекватный мазохист

[olya_097]

Ярослав Иванов,

Answer 1

[Антон Спирин]

Задача. По нажатию на кнопки A и B добавлять буквы a и b в значение element. Варианты решения.
1. Написать для каждой кнопки свой хандлер:

function handleClickA() {
  element.innerHTML += 'a';
}

function handleClickB() {
  element.innerHTML += 'a';
}

a.addEventListener('click', hanldeClickA);
b.addEventListener('click', hanldeClickB);

Главная проблема подобных решений дублирование кода. Букв 26/33, еще цифры и спец символы.

Решение 2. Написать билдер:

function buildHandler(char) {
  return function() {
    element.innerHTML += char;
  }
}

a.addEventListener('click', buildHandler(a.innerHTML));
b.addEventListener('click', buildHandler(b.innerHTML));

С подобными билдерами очень удобно работать в цикле:

for (let key in keys) {
  key.addEventListener('click', buildHandler(key.innerHTML);
}

Почему именно нужен return function() (не просто return)?

addEventListener принимает вторым аргументом функцию, именно ее функция билдер и возвращает.

Comments

[olya_097]

ооо
огромное спасибо, подробно расписали
Вопрос: один человек мне сказал, что здесь по сути замыкание.
по сути это ж правильное утверждение, да?

[Антон Спирин]

olya_097, да. Но технически в JavaScript любая функция является замыканием.

Классический пример с замыканием(счетчик):

const buildCounter() {
  let value = 0;
  return function() {
    return value++;
  }
}

const counter1 = buildCounter();
const counter2 = buildCounter();

console.log(counter1());  // 0
console.log(counter1());  // 1
console.log(counter2());  // 0
console.log(counter1());  // 2
console.log(counter1());  // 3
console.log(counter2());  // 1

Еще есть похожий прием - каррирование:

function withPrefix(prefix) {
  return function(string) {
    return prefix + '_' + string;
  }
}

const appPrefix = withPrefix('app');
const corePrefix = withPrefix('core');

console.log(appPrefix('component'));  // app_component
console.log(corePrefix('component'));  // core_component

Для каррирования удобно использовать стрелочные функции:

const withPrefix = prefix => string => prefix + '+' + string;

[olya_097]

Антон Спирин, билдер -так общепринято называть программистами ?
P.S. Флэнеган- cправочник? нет?
Интересно ваше мнение

[Антон Спирин]

olya_097, да как удобней. Билдер от build - строить, создавать. Мы в примерах создаем хандлеры и счетчики.
По поводу Флэнагана. Неплохая книга, которую заметил его сейчас многие преподносят как must read, но я так не думаю. Да, это именно справочник, со всеми преимуществами и недостатками подобного формата. Мне больше нравится подход с изучением через разработку простеньких проектов. С рефакторингом и итерационным расширением функционала. А как справочник хорошо использовать тот же MDN.

Не буду первым если посоветую обязательно почитать Кантора . Если пока плохо понятно, можно что-нибудь полегче. Тут все индивидуально. Сам вообще начинал с HeadFirst Изучаем JavaScript. Обычно людям интересующимся веб-программированием ее советую.

Вам сейчас важно получить структурированные знания, для этого подойдет любая хорошая книга или курс хоть Фленаган, хоть Кантор, хоть что-то еще. Главное прочитать от корки до корки и параллельно практиковаться.

[Ярослав Иванов]

Антон Спирин, Ты то хотя бы непутай книгу со справочников. У него помимо теории есть и практика и описание различных задач кодом. Абстрактные примеры и т.д. Но у него отдельно есть и справочник.

[Антон Спирин]

Ярослав Иванов, да только по оглавлению видно, что JavaScript: The Definitive Guide это ни что иное как справочник. Я кроме нее других и не знаю.

У него помимо теории есть и практика и описание различных задач кодом. Абстрактные примеры и т.д.

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

[Ярослав Иванов]

Антон Спирин, там только в разделе прототипы ужасные примеры про множество чисел))) остальные норм.

[Strannyk]

Фленагана топикстартеру пока рановато читать.

[Ярослав Иванов]

Антон Спирин, Definitive Guide переводится как полное руководство)

Answer 2

[Ihor Bratukh]

Потому, что метод addEventListener принимает вторым агрументом callback функцию.
Например, почему не работает вот это:
element.addEventListener('click', 'Строка');