I want to better understand es6 arrow functions.
Given the following example:
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
// snip actual enhancer logic
return {
...store,
dispatch
}
}
}
Describing the above in words:
Our exported function (applyMiddleware) takes an array parameter with spread.
Then applyMiddleware returns a nameless function with a createStore parameter, which returns another nameless function this time with three parameters.
So without the arrows it would look like this:
export default function applyMiddleware(...middlewares) {
return function(createStore){
return function(reducer,preloadedState,enhancer){
//some logic
return{...store,dispatch}
}
}
}
My questions:
Am I correct?
What is the common use case/code paradigm we see here?
The answer to your first question is more or less (see my comment). The answer to your second question is that the pattern you are seeing is a combination of using a closure and currying. The original parameters to the exported function get gathered into an array called 'middlewares' that the returned functions close over (i.e. have access to). The function then can be called again with yet another parameter 'createStore' then another function is returned that can accept even more parameters. This allows one to partially apply the parameters. For a more trivial (and perhaps more easily comprehended) example, lets take a function called 'add' that adds two numbers:
let add = (x, y) => x + y;
Not very interesting. But lets break it up so it can take the first number and return a function that takes the second:
let add = x => y => x + y;
let add3 = add(3);
let seven = add3(4); // 7
This may not seem like a big win for our add function, but you started with a much more reasonable real-world example. Additionally, rather than currying manually it is possible (and desirable) to use a curry function that does it for you, many popular libraries (lodash, underscore, ramda) implement curry for you. An example using Ramda:
let add = R.curry((x, y) => x + y);
let add3 = add(3);
let five = add3(2);
let also5 = add(3, 2);
let still5 = add(3)(2); // all are equivalent.
This answer is for those who still have some doubts in double arrow functions. Lets dig deep into it.
const doubleArrowFunc = param1 => param2 => {
console.log('param1', param1);
console.log('param2', param2);
}
If you call this function
const executeFunc = doubleArrowFunc('Hello');
If you print executeFunc in console you'll get an output like this
ƒ (param2) {
console.log('param1', param1);
console.log('param2', param2);
}
Now this is like a half executed code. If you wanna execute it fully, you've to do it like this
executeFunc('World');
//And the output will be
param1 Hello
param2 World
If you want even more understanding. I can execute the same without arrow function
function doubleArrowFunc(param1) {
return function innerFunction(param2) {
console.log('param1', param1);
console.log('param2', param2);
}
}
Related
I'm working through question 11 on bfe.dev's JavaScript coding exercises. The question asks to chain multiple basic math functions together via composition.
Here's some sample code that passes the provided test cases.
function pipe(funcs) {
let result;
return function (arg) {
result = arg;
for (let fn of funcs) {
result = fn(result);
}
return result;
}
}
And some driver code with the intended result, according to bfe.dev
pipe([
times(2),
plus(3),
times(4)
])
// (x * 2 + 3) * 4
I'm struggling to understand the implementation on a code-level. pipe receives an array of functions, and I understand the approach is to walk through the array and compute the result of each function, store that in the result variable, similar to an array reduce.
But I cannot wrap my head around how the return function works, and what arg would actually be. I would appreciate a line-by-line walkthrough if possible.
Thanks in advance!
The example probably needs a bit more to make sense:
const doMath = pipe([
times(2),
plus(3),
times(4)
])
const finalResult = doMath(5)
console.log(finalResult);
pipe's job is to create a new function. That new function has the text:
function (arg) {
result = arg;
for (let fn of funcs) {
result = fn(result);
}
return result;
}
And that is what gets assigned to doMath in my example. Then when i call doMath(5), it's going to execute the code, with arg equal to 5. It assigns 5 to result, and then starts looping through the functions (which it still has access to because this is a closure). Each function calculates a new value, which gets assigned to result, and then eventually the final result is returned. So in this case the calculation goes 5 => 10 => 13 => 52. 52 gets returned and then logged out.
I'm studying Javascript basics, particularly higher order functions, at the moment. I have read many articles and watched as many videos where people explain the basic definition and demonstrate the most basic construction of a higher order function. However, when I encounter an actual problem, I am lost. Here is an example (this is just for my personal study, not for a grade or for work):
Write a maybe function that, given a predicate (a function that returns a boolean value) and any other function, only calls the latter if the former returns true: maybe(x => x > 100, myFn). If the predicate returns true, the value of x should be passed to myFn. If the predicate returns false, x should be returned unchanged.
I don't understand how to pass the value of x from one function to another...
I solved this by adding a number argument to maybe, in addition to the predicate function and callback function. However, only two parameters are specified in the prompt, so I guess I'm not doing it correctly. Here is what I did:
//predicate (evaluates to a boolean)
const notZero = function(x) {
//console.log('predicate runs!');
return x !== 0;
}
//callback (does something within the main function)
const plusOne = function(x) {
//console.log('callback runs!');
return x + 1;
}
//checking if my predicate works
//test(notZero(1), true); // => test passed!
//another callback
const myFn = function(x) {
return x - 100;
}
//main function
function maybe(number, predicate, callback) {
if (predicate(number) === true) {
//console.log('predicate === true');
//console.log(callback(number));
return callback(number);
} else {
return number;
}
}
test(maybe(1, notZero, plusOne), 2);
test(maybe(0, notZero, plusOne), 0);
test(maybe(101, x => x > 100, myFn), 1);
test(maybe(99, x => x > 100, myFn), 99);
EDIT: As shared below, maybe can now take only 2 parameters (the predicate and the callback) because it now returns a function whose parameter is number. That's the idea I was looking for.
function maybe(predicate, callback) {
return function (number) {
if (predicate(number) === true) {
return callback(number);
} else {
return number;
}
}
}
It's technically impossible. x is locked out of the world in predicate's scope. There's no way you may extract it out of this function.
Apart from that, as you correctly assume in your code, we logically need to communicate x to both predicate & callback. Otherwise, what's the point of maybe at all?
Since then, your solution is one of very few possible ones.
You may "decorate" it nicer with currying. The idea is precisely identical as in your code but if you'll do so, you will be able to call the final function exactly with 2 arguments.
const setMaybeBase => x => (predicate, callback) => predicate(x) ? callback(x) : x;
// use it later this way
const maybe42 = setMaybeBase(42);
maybe42(yourFn, yourFnTwo);
This is a huge overkill unless the argument you pass to setMaybeBase is for example a complex object you are going to work with.
Alternatively, you might go wild & use a function to get the x as well.
Nevertheless, always remember that the easiest solution is the best one.
Here is a real-world example of maybe function taken straight from node.js repo:
function maybeCallback(cb) {
if (typeof cb === 'function')
return cb;
throw new ERR_INVALID_CALLBACK(cb);
}
I have to write a currying function that takes a function, executes another function, then executes a second function by taking the last argument as the value to calculate with.
What I am struggling with: How can I access the first function and the value at the end at the same time?
So far I can access the first function by writing a function in the function syntax and accessing the this.
Function.prototype.foo = function(x) {
// can't make currying functions by using functions keyword
console.log(this, x);
};
(() => 10).foo(1);
When I write a currying function I can access the second (x) and third (y) function.
Function.prototype.bar = x => y => {
// but also can't access this like in function syntax
console.log(x, y);
}
// how would I access 10 in bar?
(() => 10).bar(1)(2);
The final Function would look something like that:
someFunc.then(someSecondFunc).then(someThirdFunc)(100)
Thank you so much for your help!
Not sure if it solves your problem, but you can make currying functions with the function keyword:
Function.prototype.bar = function(x) {
return function(y) {
console.log(x, y)
}
}
I wasn’t able to actually able to validate if this works:
(function() {return 10}).bar(1)(2)
In any case, ˋthisˋ would be the function, not the return value (10), since the function is not called.
By using currying functions and the function keyword, my answer looks like this:
Function.prototype.then = function(secondFct) {
const firstFct = this;
return function(value) {
return firstFct(secondFct(value));
}
}
Many thanks to buboh for the help.
I am following a tutorial on firebase authentication in ReactJS. In the code, I stumbled across such function:
const byPropKey = (propertyName, value) => () => ({
[propertyName]: value,
});
I suppose this function is used to set state of a React component. It is used like so:
<input
value={username}
onChange={event => this.setState(byPropKey('username', event.target.value))}
type="text"
placeholder="Full Name"
/>
I am a newcomer to React, JavaScript, ES6 and functional programming in general, so this confuses the hell out of me. I know that the double arrow notation indicates a curried function, which enables partial application of the function. In this case, however, I can not see how this gets used in such scenario.
Here is the tutorial I am referring to:
tutorial
I can not see how this gets used in such scenario.
The tutorial author is currying that function because setState can take either an object or a function. A function gives you access to the previous state and props. Here is a sandbox example.
In the example you provided, the tutorial author is not using the partial application, and thus not leveraging the access to previous state and props. So in this specific case, a non curried implementation (passing an object to setState) would do just fine.
However, if you were to add to this tutorial codebase, the future code might require byPropKey to access the prevState and props:
const byPropKey = (propertyName, value) => (prevState, props) => {
//... do something with prevState and props
return {
[propertyName]: value,
}
};
... which is probably why the tutorial author wrote the function curried.
byPropKey
function uses as helper to map state and returns result like:
{ "statePiceName": value }
to set your state.
Same behavior without this function:
{event => this.setState({ username: event.target.value })}
Also you can just console.log(byPropKey('key', 'customValue')) and see how its works.
You misunderstand the double arrow. This just creates a function, not necessarily a curried or partial function.
For example:
// just a function
let doSomething = () => console.log("did something")
//call it
doSomething()
You can return another function from a function (aka a higher-order function), which is what's going on in your example:
// this will return the function () => console.log("said " + something)
let saySomething = (something) => () => console.log("said " + something)
// call the above function, which returns a different function
let sayHello = saySomething("Hello")
// now call that function
sayHello()
You can make partial functions with bind:
function add(a, b) {console.log(a + b)}
let addFive = add.bind(null, 5)
addFive(3)
addFive(10)
To take it one more step, you can make a generic function to add whatever:
// just a regular function
let add = (a,b) => console.log(a + b)
// a function to create a partial of the above based on passed in argument
let addThis = (a) => add.bind(null, a)
// make an add-10 function
let addTen = addThis(10)
// call it
addTen(12)
// make an add-33 function
let add33 = addThis(33)
add33(100)
EDIT: In response to the comments
Curried functions are those the break down larger functions that take multiple arguments into smaller functions that take fewer or one argument.
For example this simple function:
let add = (a, b, c) => a + b + c
can be curried into three functions that each take a single argument like this:
let addCurried = (a) => (b) => (c) => a + b + c
You can call this with some or all the arguments to get the result or a partial:
// non curried: F(a, b, c) -> sum
// curried: F():a -> (b -> (c -> sum))
let addCurried = (a) => (b) => (c) => a + b + c
// add everything
let total = addCurried(1)(2)(3) // -> 6
// make a partial
let addTwoAndThree = addCurried(2)(3)
// call it
let total2 = addTwoAndThree(100) //-> 105
console.log(total, total2)
It's hard to see given the definition of currying how a function that accepts two arguments and returns function the accepts none is considered currying that function.
I'm getting around to learning JavaScript - really learning JavaScript. I come from a PHP background so some JavaScript concepts are still new to me, especially asynchronous programming. This question might have already been answered many times before but I have not been able to find an answer. It might be because I don't really even know how to ask the question other than by showing an example. So here it is:
When using the deferred package from npm, I see the following example:
delayedAdd(2, 3)(function (result) {
return result * result
})(function (result) {
console.log(result); // 25
});
They refer to this as chaining and it actually works as I'm currently using this code to check when a promise is resolved or is rejected. Even though they call it chaining, it reminds me of trailing closures like in Swift.
I don't really understand what type of chaining this is since we have a function invocation and then immediately after, an anonymous function enclosed in parentheses.
So I guess I have two questions.
What pattern is this?
How does it work? This may be a loaded question but I like to know how something works so when someone asks me about this I can give them a detailed explanation.
Here is the delayedAdd function:
var delayedAdd = delay(function (a, b) {
return a + b;
}, 100);
which uses the following function:
var delay = function (fn, timeout) {
return function () {
var def = deferred(), self = this, args = arguments;
setTimeout(function () {
var value;
try {
value = fn.apply(self, args));
} catch (e) {
def.reject(e);
return;
}
def.resolve(value);
}, timeout);
return def.promise;
};
};
It's actually really easy to understand. Let's look at what's going on here when the expression is evaluated:
First the delayedAdd(2, 3) function will be called. It does some stuff and then returns. The "magic" is all about its return value which is a function. To be more precise it's a function that expects at least one argument (I'll get back to that).
Now that we evaluated delayedAdd(2, 3) to a function we get to the next part of the code, which is the opening parenthesis. Opening and closing parenthesis are of course function calls. So we're going to call the function that delayedAdd(2, 3) just returned and we're going to pass it an argument, which is what gets defined next:
That argument is yet another function (as you can see in your example). This function also takes one argument (the result of the computation) and returns it multiplied by itself.
This function that was returned by the first call to delayedAdd(2, 3) returns yet another function, which we'll call again with an argument that is another function (the next part of the chain).
So to summarize we build up a chain of functions by passing our code to whatever function delayedAdd(2, 3) returned. These functions will return other functions that we can pass our functions again.
I hope this makes the way it works somewhat clear, if not feel free to ask more.
mhlz's answer is very clear. As a supplementary, here I compose a delayedAdd for your to better understand the process
function delayedAdd(a, b) {
var sum = a + b
return function(f1) {
var result1 = f1(sum)
return function(f2) {
f2(result1)
}
}
}
Where in your example code, the function you passed as f1 is:
function (result) {
return result * result
}
and f2 is:
function (result) {
console.log(result)
}
Functions are first-class citizens in JS - that means (among others), they can take the role of actual parameters and function return values. Your code fragment maps functions to functions.
The signatures of the functions in your chained call might look like this.
delayedAdd: number -> fn // returns function type a
a: fn ( number -> number) -> fn // returns function type b
b: fn ( number -> void ) -> void // returns nothing ( guessing, cannot know from your code portion )
General setting
Of course, JS is a weakly typed language, so the listed signatures are derived from the code fragment by guessing. There is no way to know whether the code actually does what is suggested above apart from inspecting the sources.
Given that this showed up in the context of 'chaining', the signatures probably rather look like this:
delayedAdd: number x number -> fn (( fn T -> void ) -> ( fn T -> void ))
Which means that delayedAdd maps two numbers to a function x, which maps functions of arbitrary signatures to functions of the same signature as itself.
So who would do anything like this ? And why ?
Imagine the following implementation of x:
//
// x
// Collects functions of unspecified (possibly implicit) signatures for later execution.
// Illustrative purpose only, do not use in production code.
//
// Assumes
function x ( fn ) {
var fn_current;
if (this.deferred === undefined) {
this.deferred = [];
}
if (fn === undefined) {
// apply functions
while ( this.deferred.length > 0 ) {
fn_current = this.deferred.shift();
this.accumulator = fn_current(this.accumulator);
}
return this.accumulator;
}
else {
this.deferred.push ( fn );
}
return this;
}
Together with a function delayedAdd that actually returns an object of the following kind ...:
function delayedAdd ( a1, a2) {
return x ( function () { a1 + a2; } );
}
... you'll effectively register a chain of functions to be executed at some later point of time (e.g. in a callback to some event).
Notes and reminders
JS functions are JS objects
The signatures of the registered functions may actually be arbitrary. Considering them to be unified just serves to keep this exposition simpler (well ...).
Caveat
I do not know whether the outlined codeis what node.js does (but it could be ... ;-))
To be fair this pattern can be either chaining or currying(or partial application). Depending how it's implemented. Note this is a theoretical answer to provide more information about the pattern and not your specific use case.
Chaining
There is nothing special here because we can just return a function that will be called again. Functions in javascript are first class citizens
function delayedAdd(x, y) {
// In here work with x and y
return function(fn) {
// In here work with x, y and fn
return function(fn2) {
//Continue returning functions so long as you want the chain to work
}
}
}
This make it unreadable in my opinion. There is a better alternative.
function delayedAdd(x, y) {
// In here work with x and y
return {
then: function(fn) {
// In here work with x, y and fn
return {
then: function(fn2) {
//Continue returning functions so long as you want the chain to work
}
}
}
}
}
This changes the way your functions are called from
delayedAdd(..)(..)(..); // 25
is transformed to
delayedAdd().then().then()
Not only is more readable when you are passing several callback functions but allows a distinction from the next pattern called currying.
Currying
The term cames after the mathematician Haskell Curry. The definition is this
In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument (partial application). It was introduced by Moses Schönfinkel and later developed by Haskell Curry.
Basically what it does is take several arguments and merge with the subsecuents and apply them to the original function passed in the first argument.
This is a generic implementation of this function taken from Stefanv's Javascript Patterns.
{Edit}
I changed my previous version of the function to one which has partial application included to make a better example. In this version you must call the function with no argument to get the value returned or you will get another partially applied function as result. This is a very basic example, a more complete one can be found on this post.
function schonfinkelize(fn) {
var slice = Array.prototype.slice,
stored_args = [],
partial = function () {
if (arguments.length === 0){
return fn.apply(null, stored_args);
} else {
stored_args = stored_args.concat(slice.call(arguments));
return partial;
}
};
return partial;
}
This are the results of the application of this function
function add(a, b, c, d, e) {
return a + b + c + d + e;
}
schonfinkelize(add)(1, 2, 3)(5, 5)(); ==> 16
Note that add (or in your case delayedAdd) can be implemented as the curying function resulting in the pattern of your example giving you this
delayedAdd(..)(..)(..); // 16
Summary
You can not reach a conclusion about the pattern just by looking at the way the functions are called. Just because you can invoke one after the other it doens't mean is chaining. It could be another pattern. That depends on the implementation of the function.
All excellent answers here, especially #mhlz and #Leo, I'd like to touch on the chaining part you've mentioned. Leo's example shows the idea of calling functions like foo()()() but only works for fixed number of callbacks. Here's an attempt to imlpement unlimited chaining:
delayedAdd = function da(a, b){
// a function was passed: call it on the result
if( typeof a == "function" ){
this.result = a( this.result )
}
else {
// the initial call with two numbers, no additional checks for clarity.
this.result = a + b;
}
// return this very function
return da;
};
Now you can chain any number of functions in () after the first call:
// define some functions:
var square = function( number ){ return number * number; }
var add10 = function( number ){ return number + 10; }
var times2 = function( number ){ return number * 2; }
var whatIs = function( number ){ console.log( number ); return number; }
// chain them all!
delayedAdd(2, 3)(square)(whatIs)(add10)(whatIs)(times2)(whatIs);
// logs 23, 35 and 70 in the console.
http://jsfiddle.net/rm9nkjt8/3/
If we expand this syntax logically we would reach something like this:
var func1 = delayedAdd(2, 3);
var func2 = function (result) {
return result * result
};
var func3 = function (result) {
console.log(result);
};
var res = func1(func2); // variable 'res' is of type 'function'
res(func3);