Функция в качестве параметра?

Question

[Alex_87]

Всем привет! Прошу помочь разобраться нюансах. Есть не понимание, что здесь происходит:

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

Пример её работы:

const sub = (a, b) => a - b;
const reverseSub = flip(sub);
sub(5, 3); // 2
reverseSub(5, 3); // -2

Реализация функции flip:

const flip(f) => (a, b) => f(b, a);

Вопрос:
Не совсем понятно, что происходит после передачи функции в параметр. Ведь мы не просто аргумент в виде числа передаём, а целую функцию. Выходит, в аргументах flip находится(если мы говорим об этом примере.
flip((a, b) => a - b) => (a, b) => f(b, a);

Как это потом всё работает? Объясните, пожалуйста!

Comments

[Сергей Соколов]

где зелёный цвет? : )
Лучше оберните код в специальный для него тег code

[Alex_87]

Сергей Соколов, У вас есть какие-то версии по моему вопросу?

[Владимир]

На это вопрос вам ответили, но я всеже порекомендую заморочиться и прочитать следующие книги
https://www.ozon.ru/context/detail/id/19677670/
После этого можно
https://github.com/getify/You-Dont-Know-JS

Спрашивая кусками вы цельной картины не получите
Вы бы сами смогли понять что тут написанно const flip(f) => (a, b) => f(b, a); если бы читали следующие главы
1) Стрелочные функции (чтобы развернуть запис в классический вид)
2) Замыкания (чтобы понять откуда функция видит a и b)
3) Функции высшего порядка и их применение (чтобы понять как можно передать параметром функцию и почему мы тоже возвращаем функцию а не ее результат)
4) Передача параметров по ссылке и по значению (чтобы в принципе понимать что происходит)
5) Отличие анонимных функций от именованных (чтобы понять почему нельзя вернуть function(a,b) а function(a,b){} - можно)

[Alex_87]

Владимир, Мне очень не понятно ваша логика. С чего вы взяли, что я не знаю, что такое стрелочная функция(я могу преобразовать её в старый синтаксис), что я не знаю замыкание(я знаю, как функция видит a и b).
3) "...и почему мы тоже возвращаем функцию а не ее результат)" - поясните, что вы имеете ввиду?
4) "Передача параметров по ссылке и по значению" - это по моему вообще никак не может помочь в данном, конкретном вопросе
5) "Отличие анонимных функций от именованных" - эта часть к этой - "чтобы понять почему нельзя вернуть function(a,b) а function(a,b){} - можно)" - не имеет никакой связки!

Мой вопрос, был в другом! Я не могу понять, что происходит здесь:

return function(a, b) {   
    return sourceFunction(b, a); // результата 
  }

1) Почему мы не можем убрать первую, анонимную функцию отсюда?
2) Почему, без неё, возникает ошибка что b не определена?
И я понял, что в анонимной функции, определяются a и b. Что действительно, во время вызова, они уже должны быть известны. Что не возможно без объявление анонимной функции, их увидеть

P.S. Но за ссылки, спасибо! Я возьму на вооружение данную книгу(первую) Вы её читали, как я понял? Она даёт прочную основу? Есть практика?

[Владимир]

Alex_87, Да, я ее читал, в ней нет ES6 но для того, чтобы понять то что вы спрашиваете он и не нужен. Я бы упустил главы про jQuery и про серверный яваскрипт, ну и для того чтобы понять тонкости рекомендую вторую книгу.

Answer 1

[twobomb]

function sub(a,b){
	return a -b;	
}
function flip(func){
		return function(){
    	return func.apply(null, Array.from(arguments).reverse());
    }
}

alert(flip(sub)(10,5));//-5

Comments

[Alex_87]

Спасибо за предложенный второй вариант решения! У меня по первому вопрос. Не понимаю, как это работает. Саму тему знаю. Решал другие задачи. Но конкретно этот момент не объясняется вообще. А я хочу понять!

[twobomb]

Alex_87,

function flip(func){//В функцию флип передается нужная функция
    return function(){ // создаем новую функцию и возращаем ее	
    	return //Возвращает результат работы функции func
			func.apply( // apply позволяет вызвать любую функцию, первый параметр это то что будет this в функции у нас это null, второе это массив аргументов функции
					null, 
					Array.from(arguments).reverse());//arguments это массив аргументов текущей функции, это a и b допустим, Array.from преобразовывает массив аргументов к обычному массиву, а функция reverse, реверсивует все элементы массива, тоесть что было в конце будет в начала и наоборот
    }
}

[twobomb]

Alex_87, может так понятнее

function sub(a,b){
	return a -b;	
}
function flip(func){
	var newFunc = function(){
  	var reverseArr= [];
  	for(var i = arguments.length-1; i >= 0;i--)
    	       reverseArr.push(arguments[i]);
  	var result = func.apply(null, reverseArr);//5 - 10 = -5
    	return result;
    };
    return newFunc;
}

alert(flip(sub)(10,5));//

P.S. Можно сделать с помощью eval, но лучше не надо

[twobomb]

Максим Ленский, Я сейчас на работе

[twobomb]

Максим Ленский, Нет, спасибо, с оплатой будут проблемы, точнее с ее передачей

[Alex_87]

twobomb, Спасибо! А по моему решению, можете прокомментировать? Вот передали sub в Функцию const flip(f) => (a, b) => f(b, a);
Что здесь происходит? Когда в функцию передаётся обычный, числовой параметр, к примеру
function (a, b){
return a + b;
}
Здесь вопросов по работе не возникает! Но что происходит, когда мы передаём в качестве аргументов функцию?

const sub = (a, b) => a - b;
const reverseSub = flip(sub);
sub(5, 3); // 2
reverseSub(5, 3); // -2

const flip(f) => (a, b) => f(b, a);

[Alex_87]

Максим Ленский, Слушай, чувак! Ты не обнаглел? Брысь отсюда с моей темы. Создай свою!

[Максим]

Alex_87, извени

[twobomb]

Alex_87, Тут ошибка const flip(f) => (a, b) => f(b, a);
нужно const flip = (f) => (a, b) => f(b, a);
Если путает не пиши сокращенно, пиши полностью. Это запись аналогична.

var flip = function(f) {
            return function(a, b) {
                 return f(b,a);
            }
         }

То есть здесь мы создали функцию, которая внутри себя создает функцию и возвращает ее. А это функция еще внутри себя вызывает функцию переданную в аргументе первой функции и возвращает ее результат, всё запутанно ну как то так...
P.S. Любая функция в JS это объект, поэтому мы можем ими так манипулировать

[Alex_87]

twobomb, Скажите пожалуйста, а почему нельзя написать таким образом:

var flip = function(f) {     
                 return f(b,a);
         }

Я убрал return function(a, b)

[twobomb]

Alex_87, Таким образом вы пытаетесь вернуть сразу результат работы функции f, но он выдаст ошибку что не найдено b и a , потому что это неизвестные переменные. Ну если бы даже они были к примеру так

var flip = function(f) {     
                 return f(10,5);
         }

То в флип просто бы вернулся результат, то есть число 5.
Раз так тогда уже пишите

var flip = function(f,a,b) {     
                 return f(b,a);
         }
var s = flip(sub,10,5);//-5

А чтобы вызывать, вам нужно вернуть именно функцию

[Alex_87]

Вариант 1 вернёт результат
return f(b,a);
Вариант 2 что возвращает? И откуда он видит a, b. Почему он не видит те же a b и если мы убираем return function(a, b) { ?

return function(a, b) {
                 return f(b,a);
            }

[twobomb]

Alex_87,

var flip = function(f) {
            return function(a, b) {
                 return f(b,a);//тут они видны, потому что они есть, она объявлены выше как аргументы функции
            }
         }

var flip = function(f) {
                 return f(b,a);//тут они не видны потому что их не существует, нам видна только f как аргмуент функции
         }

var a = 15;
var b = 5;
var flip = function(f) {
                 return f(b,a);//тут они видны потому что мы их объявили, ну опять же тут вернуться только результат, число , а не сама функция
         }

https://javascript.ru/basic/functions

[Alex_87]

twobomb, Спасибо, что объясняешь! Я обязательно сейчас прочитаю твою ссылку. Наверное, у меня возникает этот вопрос потому, что я привык, что объявление - это:
const/let/var a = что-то;
const/let/var b = что-то;
А это function(a, b) в качестве объявление, я не понимаю. Где, в какой статье, рассказано, про такое объявление?

[Alex_87]

var a = 15;
var b = 5;
var flip = function(f) {
                 return f(b,a);//тут они видны потому что мы их объявили, ну опять же тут вернуться только результат, число , а не сама функция
         }

Тут они видны по замыканию!

[twobomb]

Alex_87, Функция это то же объект.

function Person(){
	this.name = "Vasya Pupkin";
  this.sayHello = function(){
  	alert("Hello "+this.name);
  }
}
var v = new Person();
alert(v.name);//Vasya Pupkin
v.sayHello();//Hello vasya pupkin

Функцию легко передавать по ссылке. Но тут важно различать если мы вызываем функцию() со скобками,то это возвращает результат функции, тоесть оно вызывает саму функцию, заходит в нее выполняет все что там есть и возвращает то что она возвращает, если ничего не возвращает то возвращает undefined
Если же мы пишем только имя функции, это возвращает саму функцию целиком, мы ее можем поместить в переменную или куда угодно, по сути это ссылка на нее, и потом мы можем к ней обратится написав со скобками.
Это все легко увидеть выведя все в ту же консоль.
console.log( (function(a,b){ return a-b;})(10,5));//5
console.log( (function(a,b){ return a-b;}) );//сама функция

[Alex_87]

twobomb, Согласен! Вопроса только два
1) почему это считается return function(a, b) { определением a и b?
2) В чём разница, между этим: return function(a, b) {} и этим return function(a, b) кодом? Всё дело в этих скобках {} ? Второе(return function(a, b)) я понимаю! Здесь мы возвращаем результат функции. То есть, вызываем функцию и возвращаем результат. А в случае, если мы ставим скобки, что происходит?

[twobomb]

Alex_87,
Такого не бывает
(return function(a, b))
function это зарезервированное имя, и так нельзя назвать функцию!
А вот этот результат действительно возвращает результат фукнции func.
(return func(a, b))
То есть, это значит в нашей зоне видимости существует уже некая созданная функция которая либо называется func, либо это анонимная функция которая лежит в переменной с названием func, и мы к ней просто обращаемся и получаем результат.
А вот здесь не путать,
return function(a, b) {}
function это не название функции, а именно ее декларация (синтаксис такой).
Здесь мы создаем новую функцию, также как и

return (a,b)=>{};
//или
var newfunc = function(){ /*todo*/};
return newfunc;

То есть по сути мы создали функцию и сразу вернули на нее ссылку, так как стоит return. Если бы стояло var myvar = то мы бы записали ее в переменную или если бы мы написать someFunc(function(){}); мы бы передали ссылку на новую фукнцию в функцию someFunc.
А чтобы создать новую фукнцию и тут же вернуть ее результат можно написать так

return (function(){ return 2+2;})(); //аналог return 4;
//или аналог
var f = function(){return 2+2;}
return f();
или аналог
var f = function(){return 2+2;}
var v = f();
return v;

[Alex_87]

twobomb, Согласен!!! Я просто ошибся в коде. В этом пункте:
"2) В чём разница, между этим: return function(a, b) {} и этим return function(a, b) кодом? "
Правильнее было бы так:
2) В чём разница, между этим: return function(a, b) {} и этим return имя_функции(a, b) кодом?

[Alex_87]

twobomb, Понимаете, я просто ставлю, вместо sub, в уме, эту дуру (a, b) => a - b; в код, то есть в аргументы функции flip и не знаю, что происходит? Как это всё работает?

function flip((a, b) => a - b) { 
  return function(a, b) {   
    return sourceFunction(b, a); // результата 
  }
}

[twobomb]

Alex_87,
Я сам не понимаю что это такое, и оно явно работать не будет

function flip((a, b) => a - b) { 
  return function(a, b) {   
    return sourceFunction(b, a); // результата 
  }
}

Посмотрим еще немного аналогов, все это рабочий код

Создали в рядок, все функции по порядку

function sub(a,b){
	return a-b;
}
function subInverse(a,b){
	return sub(b,a);
}
function flip() { 
	return subInverse;
}
var newFunction  = flip();
alert(newFunction(10,5));//-5

Далее идет первая трансформация

function sub(a,b){
	return a-b;
}
function flip() { 
	return  function subInverse(a,b){//засунули subInverse просто внутрь, даже имя оставили
    return sub(b,a);
  };
}
var newFunction  = flip();
alert(newFunction(10,5));//-5

Следующая трансформация

function sub(a,b){
	return a-b;
}
function flip(func) { //Добавили переменную func в которую будет запоминаться наша фукнция
	return  function (a,b){//Убрали имя функции хотя можно и оставить, сделали ее не именованной
    return func(b,a);//вызываем func которая находится в зоне нашем видимости
  };
}
var newFunction  = flip(sub);//передали нужную нам функцию
alert(newFunction(10,5));//-5

Забей слишком много времени потрачено, голова забита, уже ничего не понимает, нужно обмозговать, и приступить с новыми силами. А вообще дойдет со временем, а не дойдет оно и не нужно, и без этого можно делать хорошие программы.

[Alex_87]

twobomb,
А так понятнее? Я просто ошибся и ниже не поменял и не написал вместо названия, саму функцию

function flip((a, b) => a - b)) { 
  return function(a, b) {   
    return (a, b) => a - b)(b, a); // результата 
  }
}

[twobomb]

Alex_87, Это не рабочий, не понятный код

Answer 2

[Сергей Соколов]

Функция в JS – это тоже объект. Её можно назначить переменной, передать аргументом в другую функцию, вернуть как результат работы другой функции.

// исходное определение:
const flip(f) => (a, b) => f(b, a);

// можно развернуть:
function flip(sourceFunction) {
  return function(a, b) {
    return sourceFunction(b, a);
  }
}

Функция flip() принимает аргументом функцию. И возвращает новую функцию.

Создаваемая-возвращаемая функция вызывает исходную с аргументами наоборот.

можно разжевать

function flip(f) {
  // ура, нам дали какую-то исходную функцию!
  var sourceFunction = f; // для красоты запишем её в свою переменную
  // можно и вызвать её при желании:  sourceFunction(4, 5)
  // но пока не будем. Рано. Ждём.

  // сделаем новую, хакерскую функцию
  var hackerFunc = function(a, b) {
    // тут пусть всю работу делает старая функция
    var result = sourceFunction(a, b);

    // стоп. Не то. Надо же аргументы местами поменять
    var result = sourceFunction(b, a);

    // хакерский результат
    return result;
  } // конец определения хакер-функции
  
  // вернём теперь хакер-функцию:
  return hackerFunc;
}

Вот как flip(f) возващает новую хитрую хакерскую функцию.

Comments

[Alex_87]

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

[Сергей Соколов]

Alex_87, что осталось не вполне понятным?

[Alex_87]

У меня только вопрос. А почему нельзя сделать так? Я убрал: return function(a, b)

const flip(f) => (a, b) => f(b, a);

function flip(sourceFunction) { 
    return sourceFunction(b, a);
}

[Сергей Соколов]

Alex_87, в таком варианте выполнение функции flip() возвращает не функцию, а результат работы sourceFunction(), т.е. там, число, скорее всего.

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

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