I see code blocks all the time where people make it unnecessarily complicated. What is the reason for this?
Example:
const greet = function (greeting) {
return function (name) {
console.log(`${greeting} ${name}`)
}
}
const greeterHey = greet('Hey');
greeterHey('test')
instead of something like this
const greet = function (greeting, name) {
console.log(`${greeting} ${name}`)
}
const greeterHey = greet('Hey', 'test');
What is it all about? Does it have anything to do with the fact that when you edit the code block later, it's easier?
It is probably an example of function currying or higher-order function, a technique in Functional Programming Paradigm. Curryinng is IMO quite probably the single most important thing in Functional programming with Haskell for example.
The example is probably just for easy demonstration, however, the technique is quite powerful if used in correct situations.
By currying multiple-parameter function into chains of one-argument functions, you can create what I called "Niche function"
const greet = function (greeting) {
return function (name) {
console.log(`${greeting}, ${name}`)
}
}
// greetWithHello kinda retains the same logic as `greet`, but now has become more "niche"
// because you can only greet with "Hello"
const greetWithHello = greet("Hello"); //greetWithHello is a FUNCTION
greetWithHello("Ben") // "Hello, Ben"
greetWitHello("Bob") // "Hello, Bob"
const greetWithBadaboom = greet("Badaboom")
As you can imagine, instead of keep writing greet("Hello", "Ben") and greet("Hello", "Bob"), you now have a more reusable greetWithHello function.
Compared this with the un-curried version
const greet2(phrase, name) {
console.log(`${phrase}, ${name}`)
}
const greetWithHello2 = (name) => {
return greet2("Hello", name)
}
const greetWithBadaboom2 = (name) => {
return greet2("Badaboom", name)
}
As you can see, much less composable and readable than the curried version, and this is just for 2 parameters. This is why functional programming patterns can be very useful when working with functions
I only know this from college and never actually used it myself, but I guess libraries with higher-order-functions may utilize this
This is related to something called "closures" which, in short, allows to create functions that return functions, and those retain the values you provided, variables or constants alike.
In other languages, variables or constants created inside the scope/block of a function only live during the execution of such function. In JavaScript, when using this syntax, a "lexical environment" is created, and the returned function can also access values out of its own scope/environment.
As stated in the other answers, it's a very useful characteristic when used correctly in higher-order functions.
There are some examples and a more clear explanation in the MDN page about closures:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures