Lodash is a very useful utility library that lets us work with objects and arrays easily.
However, now that the JavaScript standard library is catching up to libraries such as Lodash, we can implement many of the functions in simple ways.
In this article, we’ll look at how to implement some Lodash methods for converting functions to different forms.
bind
The Lodash bind function returns a function with a value of this that we set and with some arguments partially applied.
We can implement this by returning a function that calls the passed-in function’s bind method and return it with the arguments partially applied.
For instance, we can write the following code:
const bind = (fn, thisArg, ...partials)=> {
return (...args) => fn.apply(thisArg, [...partials, ...args])
}
In the code above, we take the fn function, thisArg for the value of this , and partials , which is an array of arguments to be called with fn .
Then we used JavaScript’s function’s apply method to call fn with thisArg as the 1st argument to set the value of this in fn and an array of arguments, which we spread with the spread operator.
We first spread partials to apply them first, then we spread the args which we take in in the returned function.
Then when we call it as follows:
function greet(greeting, punctuation) {
return `${greeting} ${this.user}${punctuation}`;
}
const object = {
'user': 'joe'
};
const bound = bind(greet, object, 'hi');
console.log(bound('!'))
We see that the console log should log ‘hi joe!’ since we set the value of this in greet to object . We then applied the partial argument of 'hi' first then we called bound with the exclamation mark.
bindKey
bindKey is similar to bind except that we can use it to apply the same operations as bind to an object’s method.
It also doesn’t let us change the value of this and keep that value as the original object that the method is in.
We can implement bindKey as follows:
const bindKey = (object, key, ...partials) => {
return (...args) => object[key].apply(object, [...partials, ...args])
}
In the code above, we take object , key , and partials as arguments. Where object is the object with the method we want to call bindKey on.
The key is the key to the method that we want to do the partial argument application on, and partials have the arguments to apply.
We can then run it as follows:
const object = {
user: 'joe',
greet(greeting, punctuation) {
return `${greeting} ${this.user} ${punctuation}`;
}
};
const bound1 = bindKey(object, 'greet', 'hi');
console.log(bound1('!'))
object.greet = function(greeting, punctuation) {
return `${greeting} ya ${this.user} ${punctuation}`;
};
const bound2 = bindKey(object, 'greet', 'hi');
console.log(bound2('!'))
In the code above, we have our object with the greet method, which returns a string that reference this.user , which should be 'joe' .
Then we call our bindKey function with the object and the arguments we want to call the returned function with, which will be set to bound1 .
At this stage, bound1 has 'hi' set as the value of greeting . Then when we callbound1 , we passed in the '!' to it, which calls the bound1 with punctuation .
Then we get 'hi joe !’ from the console log.
After that, we changed object.greet to a different function. Now when we call bindKey as we did on the 2nd last line, we get the bound2 function, which has the 'hi' string applied to the object.greet method as the value off greeting .
Then when we call bound2 , we applied the '!' as the value of punctuation . Therefore, we get the string 'hi ya joe !’ logged in the console log output.
delay
The Lodash delay method runs a function after a given wait time in milliseconds. It also takes optional arguments that we can call our function with.
We can implement our own function with the setTimeout function as follows:
const delay = (fn, wait, ...args) => {
setTimeout((...args) => fn(...args), wait, ...args)
}
In the code above, we just called setTimeout with a callback which calls fn as the first argument. The second argument has the wait time and the args are the arguments that’ll be passed into the callback, which is all the subsequent arguments.
The callback takes the args and then apply them the passed-in function fn .
Then when we call it as follows:
delay((text) => {
console.log(text);
}, 1000, 'foo');
We get that 'foo' is logged by the function we passed into delay after 1 second.
Conclusion
To implement the bind and bindKey Lodash methods, we can use the JavaScript function’s apply method to change the value of this and apply the arguments to the passed-in function.
We can create our own Lodash delay method with the setTimeout function, which takes the number of milliseconds to delay the function call and the arguments to call the callback with.
