Как разобраться в функциях и не запутаться?

Question

[boga-net]

Всем привет. Помогите понять функции. Я совсем запутался с return, с замыканиями, с function expression и function declaration. Весь день пробую вернуть значение из функции, перебирая разные варианты. Вроде бы знаю, как надо, в видео и гугле есть примеры, но когда подстраиваю под свои нужды - уже не работает. Я просто не до конца понимаю принципы работы функций и return.

вот есть функция и её вызов. Почему вот так не работает ?

$('#button').on('click', test);

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

test();

А вот так работает

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

var newTest = test();

$('#button').on('click', newTest);

Я просто добавил функцию test() в переменную newTest и теперь событие click вызывает newTest

И вот так работает :

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

var newTest = test();

$('#button').on('click', test());

Теперь при клике я вызываю test() со скобками (в отличие от newTest - без скобок - в предыдущем примере), но она не срабатывает сразу, а только после клика. Хотя, вроде бы, если я указываю test() на обработчик, то должна сразу вызываться..

Вот так не работает :

var test = function() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

$('#button').on('click', test);

Если вызвать её через : console.log(test()); то вернётся описание функции res() (или переменной со ссылкой на эту функцию);

А если вызвать console.log(test); - без скобок, то вернётся описание функции test(). Хорошо, здесь что-то более менее понятно, что результатом работы функции test() является функция res(). Если просто вызвать test без скобок - вернётся описание test. Если со скобками - функция выполнится, а её результатом является описание функции res(). Но куда делся console.log(sum) ?

Вот ещё пример. Здесь я не указываю скобки и всё работает. И работает click с вызовом функции test().

function test() {

  var sum = 10;
  console.log(sum);

};

$('#button').on('click', test);

Или вот так :

function test() {

  var sum = 10;
  console.log(sum);

};

var newTest = test;
$('#button').on('click', newTest);

Получается не важно, буду я вызывать при клике test или newTest ?
Правильно понимаю, что лучше использовать второй вариант ?

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

Answer 1

[Pavel Karinin]

Вы должны четко различать понятие функция и указатель на функцию.
Если очень по-простому, то когда вы пишите так:
test();
то вы выполняете данную функцию

а если так:
var newTest = test;
то вы указываете на функцию как на объект, передавая функцию как объект (а не результат ее работы) в переменную newTest

Comments

[boga-net]

Я раньше так и думал, как вы говорите, что, когда я пишу test();
то функция выполнется. Поэтому меня и поставило в тупик, что в данном примере код не выполняется, а точнее не выводится в консоль sum

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res;
};

test();

Вот как здесь. Выполняется, только когда присваиваю в переменную или test() вывожу через console.log

И по клику тоже не выполняется

$('#button').on('click', test);

[Pavel Karinin]

return res()

вы снова встали на те же грабли: вы возвращаете из тела функции не результат, а указатель на функцию res

в этом коде все верно: вы в качестве аргумента передаете указатель на функцию test:
$('#button').on('click', test);

Перепишите свой пример так:

function test() {

  var sum = 10;
  
  var res = function() {
    console.log(sum);
  }
  return res();
};

test();

обратите внимание на res()и все будет работать

[boga-net]

А как правильно/грамотней/универсальней и лучше передавать значение из функций ?
Лучше

var newTest = test;
newTest ();

или
test();

[Pavel Karinin]

boga-net, Да, JS вообще интересный язык)) но именно скобки гарантируют тот факт, что вы сообщаете интерпритатору кода о том, что вы хотите вызывать функцию, и получить ее результат, а не просто указываете на нее, как на объект. Надеюсь мой ответ вам помог.

[boga-net]

Pavel Karinin, Да, помог ) Спасибо, теперь, когда вы объяснили, я понял, что иначе res() просто не выполнится, соответсвенно и console.log() внутри неё.
Ни разу не видел ничего подобного. Обычно после return никаких скобок. Я и не знал, что так можно/нужно )
Слишком много нюансов и нет каких-то жёстких правил (писать только вот так), отчего можно легко запутаться и ломать голову, а как же будет правильней
Спасибо )

[Pavel Karinin]

Обычно после return никаких скобок

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

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

[Andrew]

boga-net, Вызывать функцию чтобы получить результат внутренней функции - такое себе занятие. Когда логика сложнее - такое допустимо и, наверное, необходимо(читайте get-ер). Но тут
лучше(?) сразу вернуть результат.

function test() {

  var sum = 10;
  return console.log(sum);
};
test(); //10

или даже так(что будет чаще встречаться)

function test() {

  var sum = 10;
 
  return sum*2; //к примеру, умножение, т.к. без действия - эта функция теряет смысл.
};
console.log(test());