Currying in Javascript – Javascript weekly
Tags: showdev, webdev, tutorial, beginners
Published: 2019-07-12 17:36:59

---
title: Currying in Javascript – Javascript weekly
published: true
description: Currying in Javascript – Javascript weekly
tags: showdev,webdev,tutorial,beginners
series : javascript
canonical_url: https://cloudnweb.dev/2019/07/currying-in-javascript-javascript-weekly/
---

<!-- wp:paragraph -->
<p>In this article, we will see what is currying and why we need it. Currying in Javascript - Javascript weekly</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What is Currying in Javascript?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Currying in Javascript is nothing but changing a function with multiple arguments to a function which takes only one argument. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>you can ask me, how it's possible to do?. let's try to understand this concept with an example.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let getUser = (firstname,lastname,age) => {

   console.log("Hi, My Name is "+firstname+" "+lastname+" and Age is "+age);
}

getUser("John","Sonmez",25);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>consider the above function which takes multiple arguments and print the values in the output</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":953} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/normal_function.png" alt="" class="wp-image-953"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Instead of doing it that way, we can curry the function and takes the argument one by one.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For Example,</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function getuserCurry(firstname) {

  return function(lastname) {
    return function(age) {
      console.log("Hi, My Name is "+firstname+" "+lastname+" and Age is "+age);
    }
  }
}

getuserCurry("Curry")("Function")(22);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the above function, we take one argument at a time and return a function which takes an another argument. it goes on until there is no argument to pass.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>curry functions retains the state of the variable in it. it is called as <a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Closure</a> in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":954} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/function_curry.png" alt="" class="wp-image-954"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's cool. But, why do we need currying in Javascript if we can do that in multiple arguments.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's understand this with a real time use case.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Currying - real time use case</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's say that you fetch a data something like this</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let users = [
  {
    "id" : 1,
    "name" : "John",
    "age" : 22
  },
  {
    "id" : 2,
    "name" : "Peters",
    "age" : 23
  },
  {
    "id" : 3,
    "name" : "Smith",
    "age" : 24
  },
  {
    "id" : 4,
    "name" : "Woakes",
    "age" : 25
  }
]</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the above data, you need to fetch <strong>id</strong> from the array of objects. you can simply use <strong>map</strong> function to simply interate over it and get the id's from it</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>users = users.map(item => item.id)</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>it will return an <strong>array of ids</strong>. what happens if we need to do the same functionality again for another array of objects</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let names = [
  {
    "id" : 5,
    "name" : "dfdsfds",
    "age" : 22
  },
  {
    "id" : 6,
    "name" : "ewrwer",
    "age" : 23
  },
  {
    "id" : 7,
    "name" : "retretret",
    "age" : 24
  },
  {
    "id" : 8,
    "name" : "tyryt",
    "age" : 25
  }
]</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>you need to do the same <strong>loop</strong> and get only the <strong>ids</strong> from it. you can simplify this way by using <strong>curry</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const get = function(property) {
  return function(object) {
      return object[property];
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Define a <strong>function</strong> which takes one argument at time and return a function inside of it which takes an another argument.(which is basically a <strong>closure</strong>).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, you need to call the function get() which will return a function.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const getId = get('id');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, you need to pass the function inside the <strong>map</strong> loop which will get you all the <strong>id's</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let userids = users.map(getId);

console.log("userids",userids);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>it will print output something like this</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":963} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Screenshot-2019-07-12-at-10.20.38-PM.png" alt="" class="wp-image-963"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, you can run the following function to the second array of object. no need to rewrite again.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
const namelist = names.map(getId);

console.log("namelist",namelist);
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":964} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Screenshot-2019-07-12-at-10.22.58-PM.png" alt="" class="wp-image-964"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's one the real time use cases where you can apply the <strong>curry </strong>in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
{% replit @ganeshmani/CurryingJavascript %}
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Currying Use Cases</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Function Composition</strong> - function composition is an important concept in javascript which needs a complete post. In simple terms, it is a way to combine two or more functions to return the result. For Ex, result = a( b(x) ) where b(x) is a function which returns a result.Further, the result will be passed as a argument to a function.</li><li><strong>First-class function</strong> - you can be able to create a first class function. first class function is nothing but a function can be passed as an argument.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>currying is an important concept in Functional programming paradigms. it is used along with <strong>Partial application</strong> and <strong>Function Composition</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will see what are Partial Application and Function Composition in upcoming articles. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then, Happy Coding :-)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to learn Functional Programming for JavaScript. </p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&amp;OneJS=1&amp;Operation=GetAdHtml&amp;MarketPlace=IN&amp;source=ac&amp;ref=qf_sp_asin_til&amp;ad_type=product_link&amp;tracking_id=cloudnwebdev1-21&amp;marketplace=amazon&amp;region=IN&amp;placement=1981672346&amp;asins=1981672346&amp;linkId=4339b75d47c85a12b2922f21cab5ecfe&amp;show_border=false&amp;link_opens_in_new_window=false&amp;price_color=333333&amp;title_color=0066c0&amp;bg_color=ffffff">
    </iframe>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>you can read the Kyle Simpson Functional Programming book which is a great book . Also,</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<a target="_blank" href="https://www.amazon.in/gp/product/1449335586/ref=as_li_tl?ie=UTF8&amp;camp=3638&amp;creative=24630&amp;creativeASIN=1449335586&amp;linkCode=as2&amp;tag=cloudnwebdev1-21&amp;linkId=39bb809928ccce6bb687a1f86be88d49" rel="noopener noreferrer">You Don′t Know JS – Scope and Closures</a><img src="//ir-in.amazon-adsystem.com/e/ir?t=cloudnwebdev1-21&amp;l=am2&amp;o=31&amp;a=1449335586" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;">
<!-- /wp:html -->