Understanding JavaScript Currying

Currying is a technique of working with functions. Learn what currying in JavaScript is, how it works and how to use it in your code.

Currying is one of the more advanced techniques of working with functions. What it does is it allows you to transform functions, and the way your work with them. This tutorial will help you understand what currying in JavaScript is, how it works and how to use it in your code.

What is currying

First of all, currying exists in multiple languages, not just JavaScript. There are probably multiple ways to explain what currying is. Some simple? Let’s start with this. Currying is a process. It is a process of transforming functions with specific number of arguments into a sequence of nested functions.

Each of these functions in the sequence is being returned and each is passed only one of the arguments. Only the last function in the sequence takes all arguments spread through the sequence, does some operation, and returns a value, or values. This is the first transformation.

// Curried function example:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Normal function:
function fn(a, b, c) {
  return a + b + c
}

The second transformation is how you call, or invoke, curried function. Usually, you would pass all required arguments inside the one set of parentheses. Not with curried functions. When you work with curried functions, you pass each argument into a separate set of parentheses.

// Calling curried function declared above:
curriedFn(11)(22)(33)
// Output:
// 66

// Calling normal function:
fn(11, 22, 33)

How currying works

Currying can look as something unusual especially for beginners. Let’s take a look at how currying in JavaScript works, and why it can even work.

The thing about values, arguments, and closures

How easy or difficult it is to understand currying in JavaScript might well depend on how familiar are you with the concept of closures. It is thanks to closures currying works. Here is how these two work together. As you can see on the example, Each function in the sequence works only with a single argument.

It would make sense that when each function is called, the value passed into it as an argument is lost as well. This is not the case. The value still exists in the scope of the function that was called. What’s more important is that any function inside this scope can access this scoped value as well.

All these values exist, and are accessible, as long as the execution of the sequence is going. When it terminates with the last function and the value it returns, these existing values are gone as well. This is also why the last, innermost, function can operate with all previously seen arguments.

In case of this last function in the sequence, the innermost, all these values still exist. This is also why it can work with them.

function curriedFn(a) {
  // Argument "a" exists here
  return function(b) {
    // Argument "a" and "b" exist here
    return function(c) {
      // Argument "a", "b" and "c" exist here
      return a + b + c
    }
  }
}

The thing about parentheses

So, the innermost function can return all previously seen values because they are kept alive thanks to closure. What about those additional parentheses? These parentheses serve two main purposes. First, they allow to pass specific argument to specific function.

This is determined by the order in which arguments are defined in the curried function. The second thing is more important and interesting. Each of these additional parentheses is actually a new function call. This means that when you see curried function with three pairs of parentheses, you are looking at three function calls.

Each of these calls invokes one of the functions in the sequence, while also providing required argument for that function.

// Create curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Calling curried function:
curriedFn(11)(22)(33)

// can be visualized as:
outermostFn(11) // curriedFn(a) { ... }
middleFn(22) // function(b) { ... }
innermostFn(33) // function(c) { ... }

This is also why currying allows you to call each function “manually”. Each call returns a function. What you can do is to take each function call and sequentially assign its returned value to a variable. Each of these steps will result in variable assigned a function, except the last one.

The last variable will be assigned the value returned by the last function. This last value is what you get when you call curried function with all required argument, and pair of parentheses. The only difference are those extra lines and assigned variables.

// Create curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// This:
curriedFn(11)(22)(33)

// is the same as (except those extra lines):
const firstCall = curriedFn(11)
const secondCall = firstCall(22)
const lastCall = secondCall(33)

console.log(firstCall)
// Output:
// ƒ ()
// That is:
// function(b) {
//   return function(c) {
//     return a + b + c
//   }
// }

console.log(secondCall)
// Output:
// ƒ ()
// That is:
// function(c) {
//   return a + b + c
// }

console.log(lastCall)
// Output:
// 66
// That is:
// a + b + c

Curried functions without arguments

Currying is usually used for functions that are defined with some parameters. However, this is not a rule. You can just as well create curried function that doesn’t take any arguments. In this case, you still have to provide correct number of parentheses, just empty.

// Create curried function:
function curriedFn() {
  return function() {
    return function() {
      return function() {
        return function() {
          return '??'
        }
      }
    }
  }
}

// Call curriedFn():
curriedFn()()()()()
// Output:
// '??'

Currying arrow functions

Just as you can curry regular functions, you can also curry arrow functions. This can help you reduce the amount of code you would otherwise have to use. The principles and way to use it is still the same. Only the syntax is different, due to the nature of arrow functions.

// Regular curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Arrow function alternative:
const curriedFn = (a) => (b) => (c) => a + b + c

// Calling the curried function:
curriedFn(11)(33)(55)
// Output:
// 99

Partial application functions

When we talk about currying in JavaScript, it is also useful to mention technique called partial application. The reason is that these two are very similar, so similar that it can be confusing. However, there is one key difference that will help you distinguish between them.

This difference is in the number of parameters. When you curry a function, each function in the sequence accepts only one parameter. This is not the case with partial application. In case of partial application, the rule is that the newly returned functions must accept fewer parameters.

This means that there might still be arguments spread across multiple pairs of parentheses. However, some of these pairs of parentheses will contain more than just one argument. When you see something like this, you are looking at partial application function, not curried function.

// Curried function example:
function myCurriedFn(x) {
  return function(y) {
    return function(z) {
      return function(w) {
        return x * y * z * w
      }
    }
  }
}

myCurriedFn(3)(6)(3)(9)
// Output:
// 486


// Partial application function example:
function myPartApplicationFn(x) {
  return function(y, z) {// Passing two arguments instead of one
    return function(w) {
      return x * y * z * w
    }
  }
}

myPartApplicationFn(3)(6, 3)(9)
// Output:
// 486

Conclusion: Introduction to currying in JavaScript

The concept of currying can be confusing and difficult to grasp. Just the word itself can sound weird. The syntax also isn’t much helpful. I hope that this tutorial was helpful in shading some light on this topic, helping you understand how, and why, currying in JavaScript and how to use it.

Original article source at https://blog.alexdevero.com

#javascript 

What is GEEK

Buddha Community

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Understanding Currying Function in JavaScript

Currying is an advanced technique that you should know when facing function in JavaScript. In normal conditions, JavaScript arrow functions are written like this.

const multiply = (a,b) => a*b

From the code above, we can understand that the function is used for multiplying two variable a and b and display the result. But let we move into one condition when currying is used. I have the console program like this

console.log(multiply(5)(6))

By using the function above, the program will be error, because the (6) variable is not a function. To make the program work, we need the currying function to do his job. So the program is written like this

const multiply = (a) => (b) => a * b

If we run the code again, the output will print the correct answer. Do you know why it works?

Simple, currying is the technique of converting a function that takes multiple arguments into a sequence of function that each take a single argument. This function can helping us to removing repetition. Here is the example that I got from simonschwartz.

#javascript #currying #javascript-tips

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company