{"id":8977,"date":"2022-07-21T11:50:15","date_gmt":"2022-07-21T18:50:15","guid":{"rendered":"https:\/\/coderpad.io\/?p=8977"},"modified":"2023-06-07T14:09:00","modified_gmt":"2023-06-07T21:09:00","slug":"what-you-never-learned-about-javascript-functions","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/what-you-never-learned-about-javascript-functions\/","title":{"rendered":"What You Never Learned about JavaScript Functions"},"content":{"rendered":"\n<p><strong>Functions are weird<\/strong>. Consider the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sayHello<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n\nsayHello();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Seems straightforward enough, right? We&#8217;re creating a function <code>sayHello<\/code>, then immediately calling it.<\/p>\n\n\n\n<p>Now, what about the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sayHello<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n<span class=\"hljs-keyword\">const<\/span> greeting = sayHello;\ngreeting();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This \u201cintuitive\u201d code comes loaded with assumptions and processes that we regularly take for granted:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Why are we able to assign a function to a variable?<\/li>\n\n\n\n<li>What is this doing under the hood?<\/li>\n\n\n\n<li>Are we able to utilize functions in potentially unexpected ways?<\/li>\n<\/ul>\n\n\n\n<p>While you <em>could<\/em> get away with never knowing the answers to these questions, being a great developer often involves understanding how the tools we use actually work \u2013 and JavaScript functions are no exception.<\/p>\n\n\n\n<p>For example, do you know what \u201cfunction currying\u201d is and why it\u2019s useful? Or do you know how <code>[].map()<\/code> and <code>[].filter<\/code> are implemented?<\/p>\n\n\n\n<p>Fret not, dear reader, as we will now take a look at all these questions.<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\"  data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h1 class=\"wp-block-heading\">Why are we able to assign a function to a variable?<\/h1>\n\n\n\n<p>To understand why we&#8217;re able to assign a function to a variable, let&#8217;s analyze what happens when <em>anything<\/em> is assigned to a variable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How memory works<\/h2>\n\n\n\n<p>Inside of your computer, there&#8217;s something called &#8220;memory,&#8221; AKA RAM,<a href=\"https:\/\/unicorn-utterances.com\/posts\/how-computers-speak#ram\" target=\"_blank\" rel=\"noopener\">which allows your computer to store short-term memory that it can quickly reference later.<\/a><\/p>\n\n\n\n<p>When we create a variable, what we&#8217;re doing is storing values inside of this memory.<\/p>\n\n\n\n<p>For example, take the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> helloMessage = <span class=\"hljs-string\">\"HELLO\"<\/span>;\n<span class=\"hljs-keyword\">const<\/span> byeMessage = <span class=\"hljs-string\">\"SEEYA\"<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will create two sections of memory that your compiler will keep around for reference when you use those variables. Each of these sections of memory will be just big enough to store 5 characters of the string.<\/p>\n\n\n\n<p>This might be visually represented like so:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/img_62d99fe7831da.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\"><em>A big block called &#8220;memory&#8221; with two items in it. One of them has a name of &#8220;helloMessage&#8221; and is address <code>0x7de35306<\/code> and the other is &#8220;byeMessage&#8221; with an address of <code>0x7de35306<\/code>.<\/em><\/figcaption><\/figure>\n\n\n\n<p>It&#8217;s important to remember that the memory address itself doesn&#8217;t store the name,&nbsp; your compiler does. When you create blocks of memory via variables, the compiler gets back a number that it can use to look up the variable&#8217;s value inside of a &#8220;stack&#8221; of memory.<\/p>\n\n\n\n<p>You can <em>loosely<\/em> think of this memory stack as an array that the compiler looks through in order to get the data based on an index. This number can be huge because your computer likely has multiple gigabytes of RAM. Even 16GB is equivalent to 1.28e+11 bytes. Because of this, memory addresses are often colloquially shortened to <a href=\"https:\/\/unicorn-utterances.com\/posts\/non-decimal-numbers-in-tech\" target=\"_blank\" rel=\"noopener\">hexadecimal representations<\/a>.<\/p>\n\n\n\n<p>This means that our <em>0x7de35306 <\/em>memory address is associated with bit number 2112049926, or just over the 0.2GB mark.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>This explanation of memory is a very generalized explanation of how memory allocation works. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Stack-based_memory_allocation\" target=\"_blank\" rel=\"noopener\">You can read more about memory stacks here.<\/a><\/p>\n<\/blockquote>\n\n\n\n<p>When your browser compiles the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> helloMessage = <span class=\"hljs-string\">\"HELLO\"<\/span>;\n<span class=\"hljs-keyword\">const<\/span> byeMessage = <span class=\"hljs-string\">\"SEEYA\"<\/span>;\n\n<span class=\"hljs-built_in\">console<\/span>.log(helloMessage);\n<span class=\"hljs-built_in\">console<\/span>.log(byeMessage);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The browser&#8217;s compiler will replace the variable names with memory addresses:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">memoryBlocks&#91;<span class=\"hljs-number\">0x7de35306<\/span>] = <span class=\"hljs-string\">\"HELLO\"<\/span>;\nmemoryBlocks&#91;<span class=\"hljs-number\">0x7de35307<\/span>] = <span class=\"hljs-string\">\"SEEYA\"<\/span>;\n\n<span class=\"hljs-built_in\">console<\/span>.log(memoryBlocks&#91;<span class=\"hljs-number\">0x7de35306<\/span>]);\n<span class=\"hljs-built_in\">console<\/span>.log(memoryBlocks&#91;<span class=\"hljs-number\">0x7de35307<\/span>]);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>This code is simply pseudocode and will not actually run. Instead, your computer will compile down to <a href=\"https:\/\/unicorn-utterances.com\/posts\/how-computers-speak#assembly-code\" target=\"_blank\" rel=\"noopener\">&#8220;machine code&#8221; or &#8220;assembly code&#8221;<\/a>, which will in turn run on &#8220;bare metal&#8221;. What&#8217;s more, this is a drastic oversimplification of how your browser&#8217;s JIT compiler and your system&#8217;s memory management<em>actually<\/em> works under-the-hood.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How does this relate to function storage?<\/h2>\n\n\n\n<p>Remember that functions in JavaScript have two different syntaxes:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sayHello<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n\nsayHello();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Is roughly equivalent to:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> sayHello = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n\nsayHello();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As you might correctly assume, this means that both of these syntaxes allow a function to be stored in memory.&nbsp;<\/p>\n\n\n\n<p>Using our pseudocode again, this might look like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">memoryBlocks&#91;<span class=\"hljs-number\">0x9de12807<\/span>] = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n\nmemoryBlocks&#91;<span class=\"hljs-number\">0x9de12807<\/span>]();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Why does it matter that functions are stored as memory addresses?<\/h2>\n\n\n\n<p>The reason I&#8217;ve gone on to show you that functions are stored as memory addresses is to help reinforce the idea that <strong>functions are values<\/strong> and can be treated like such. For example, you can do the following with numbers in JavaScript:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-number\">1<\/span> + <span class=\"hljs-number\">2<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Without having to assign each number to a variable:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> one = <span class=\"hljs-number\">1<\/span>;\n<span class=\"hljs-keyword\">const<\/span> two = <span class=\"hljs-number\">2<\/span>;\n<span class=\"hljs-built_in\">console<\/span>.log(one + two);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Likewise, you can use functions without assigning them to a variable.<\/p>\n\n\n\n<p>This means the the following <code>sayHello<\/code> function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> sayHello = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\nsayHello();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Can be used without a variable to assign the function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>))();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is just the start of what&#8217;s possible with functions. Think of all the interactions you can have with a non-function variable like integers and strings. You can have those same interactions with functions as well.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Can you pass a function to another function?<\/h1>\n\n\n\n<p>One very popular use of&nbsp; functions is passing in values as properties. For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sayThis<\/span>(<span class=\"hljs-params\">message<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(message);\n}\n\nsayThis(<span class=\"hljs-string\">\"Hello\"<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, we&#8217;re passing a string as a property to the <code>sayThis<\/code> function.&nbsp;<\/p>\n\n\n\n<p>Just like you can pass in integers, strings, or arrays to a function, you might be surprised to know you can also pass in functions into a function:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">doThis<\/span>(<span class=\"hljs-params\">callback<\/span>) <\/span>{\n\u00a0 \u00a0 callback();\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">sayHello<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n}\n\ndoThis(sayHello);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will output the same &#8220;Hello&#8221; as our previous<code>sayThis<\/code> usage.<\/p>\n\n\n\n<p>Not only can you call these functions that are passed as parameters, but you can pass parameters to <em>those<\/em> functions as well.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">callThisFn<\/span>(<span class=\"hljs-params\">callback<\/span>) <\/span>{\n    <span class=\"hljs-comment\">\/\/ Remember, `callback` is a function we're padding<\/span>\n    <span class=\"hljs-comment\">\/\/ `console.log` specifically<\/span>\n\u00a0\u00a0\u00a0 <span class=\"hljs-keyword\">return<\/span> callback(<span class=\"hljs-string\">'Hello, world'<\/span>);\n}\n\ncallThisFn(<span class=\"hljs-built_in\">console<\/span>.log);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To walk through this step-by-step, we:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pass <code>console.log<\/code> to <code>callThisFn<\/code> through an argument<\/li>\n\n\n\n<li><code>callThisFn<\/code> assigns that property as <code>callback<\/code>, which remains a function<\/li>\n\n\n\n<li>We then call <code>callback<\/code> with a parameter of it&#8217;s own: &#8216;Hello, world&#8217;<\/li>\n<\/ul>\n\n\n\n<p>In case this isn&#8217;t clear, let&#8217;s do our previous trick of calling a function without assigning it to a variable.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">(<span class=\"hljs-function\"><span class=\"hljs-params\">callback<\/span> =&gt;<\/span> callback(<span class=\"hljs-string\">'Hello, world!'<\/span>))(<span class=\"hljs-built_in\">console<\/span>.log);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h1 class=\"wp-block-heading\">What about returning a function from another function?<\/h1>\n\n\n\n<p>As a function\u2019s input, parameters are only half of the story of any function&#8217;s capabilities \u2013 just as any function can output a regular variable, they can also output another function:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getMessage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"Hello\"<\/span>;\n}\n\n<span class=\"hljs-keyword\">const<\/span> message = getMessage();\n<span class=\"hljs-built_in\">console<\/span>.log(message);\n<span class=\"hljs-comment\">\/\/ Equivalent to<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(getMessage());<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you&#8217;ve done much coding in JavaScript, this will look familiar. We&#8217;re &#8220;calling&#8221;<code>getMessage<\/code> and storing the return value to <code>message<\/code> variable. We can then do anything else we might expect with this <code>message<\/code> variable &#8211; including passing it to other functions as a parameter.<\/p>\n\n\n\n<p>This too, is possible with a function as a return value:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getMessageFn<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Hello\"<\/span>);\n\u00a0 \u00a0 }\n}\n\n<span class=\"hljs-keyword\">const<\/span> messageFn = getMessageFn();\nmessageFn();\n<span class=\"hljs-comment\">\/\/ This can be simplified to<\/span>\ngetMessageFn()();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This code block is an extension on the &#8220;returned value&#8221; idea. Here, we&#8217;re returning<em>another<\/em> <em>function<\/em> from <code>getMessageFn<\/code>. This function is then assigned to <code>messageFn<\/code> which we can then in turn call itself.<\/p>\n\n\n\n<p>Meta, right?<\/p>\n\n\n\n<p>Funnily enough, you can even combine this with the ability to return within the inner function.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getMessageFn<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"Hello\"<\/span>;\n\u00a0 \u00a0 }\n}\n\n<span class=\"hljs-keyword\">const<\/span> messageFn = getMessageFn();\n<span class=\"hljs-keyword\">const<\/span> message = messageFn();\n<span class=\"hljs-built_in\">console<\/span>.log(message);\n<span class=\"hljs-comment\">\/\/ This can be simplified to<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(getMessageFn()());<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h1 class=\"wp-block-heading\">Let&#8217;s combine concepts by accepting and returning a function from another function<\/h1>\n\n\n\n<p>Knowing that we can both accept a function as a property and return a different function as a value, we can combine these both to create the following logic:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">passFunctionAndReturnFunction<\/span>(<span class=\"hljs-params\">callback<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 callback(<span class=\"hljs-string\">\"Hello, world\"<\/span>);\n\u00a0 \u00a0 }\n}\n\n<span class=\"hljs-keyword\">const<\/span> sayHello = passFunctionAndReturnFunction(<span class=\"hljs-built_in\">console<\/span>.log);\nsayHello(); <span class=\"hljs-comment\">\/\/ Will log \"Hello, world\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h1 class=\"wp-block-heading\">How do you pass data from one function to another? A pipe function!<\/h1>\n\n\n\n<p>The concepts we&#8217;ve spoken about today are commonly utilized when programming in a style called &#8220;functional programming.&#8221; Functional programming is a style of programming &#8211; similar to<a href=\"https:\/\/www.educative.io\/blog\/object-oriented-programming\" target=\"_blank\" rel=\"noopener\">&#8220;Object Oriented Programming&#8221; (OOP)<\/a> &#8211; that utilizes functions as a method to pass, change, and structure data.&nbsp;<\/p>\n\n\n\n<p>Functional programming relies heavily on the properties of functions that we&#8217;ve looked at today: passing functions to other functions, returning functions from functions, and more.<\/p>\n\n\n\n<p>If you spend much time looking at functional programming libraries, <a href=\"https:\/\/ramdajs.com\/\" target=\"_blank\" rel=\"noopener\">such as Ramda<\/a>, you might run into <a href=\"https:\/\/ramdajs.com\/docs\/#pipe\" target=\"_blank\" rel=\"noopener\">a function called a &#8220;Pipe&#8221;<\/a>.<\/p>\n\n\n\n<p>Traditionally, a <code>pipe<\/code> function takes a list of other functions to call them and return a final value.<\/p>\n\n\n\n<p>For example, you might run:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> finalVal = pipe(&#91;\n\u00a0 <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-number\">1<\/span>,\n\u00a0 <span class=\"hljs-comment\">\/\/ Pass `1` to `v`<\/span>\n\u00a0 v =&gt; v + <span class=\"hljs-number\">1<\/span>\n]);\n\n<span class=\"hljs-built_in\">console<\/span>.log(finalVal); <span class=\"hljs-comment\">\/\/ 2<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is useful when you need to chain a list of actions together and get the final output.<\/p>\n\n\n\n<p>Luckily, <code>pipe<\/code> is an easy function to implement:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">pipe<\/span>(<span class=\"hljs-params\">fns<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">let<\/span> val = <span class=\"hljs-literal\">undefined<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> fn <span class=\"hljs-keyword\">of<\/span> fns) {\n\u00a0 \u00a0 \u00a0 \u00a0 val = fn(val)\n\u00a0 \u00a0 }\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> val;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>So when is this useful? Let&#8217;s assume that we want to clamp the values between two numbers.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">clamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">5<\/span>}); <span class=\"hljs-comment\">\/\/ 5<\/span>\nclamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">15<\/span>}); <span class=\"hljs-comment\">\/\/ 10<\/span>\nclamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">-10<\/span>}); <span class=\"hljs-comment\">\/\/ 0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Thinking about this problem, we can break up our logic into three different parts:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Check if smaller than minimum<\/li>\n\n\n\n<li>Check if larger than maximum<\/li>\n\n\n\n<li>Return final value<\/li>\n<\/ol>\n\n\n\n<p>We can implement this using distinct functions and our new <code>pipe<\/code> method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">pipe<\/span>(<span class=\"hljs-params\">fns<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">let<\/span> val = <span class=\"hljs-literal\">undefined<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> fn <span class=\"hljs-keyword\">of<\/span> fns) {\n\u00a0 \u00a0 \u00a0 \u00a0 val = fn(val)\n\u00a0 \u00a0 }\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> val;\n}\n\n<span class=\"hljs-keyword\">const<\/span> min = <span class=\"hljs-function\">(<span class=\"hljs-params\">val, min<\/span>) =&gt;<\/span> val &lt; min ? min : val;\n<span class=\"hljs-keyword\">const<\/span> max = <span class=\"hljs-function\">(<span class=\"hljs-params\">val, max<\/span>) =&gt;<\/span> val &gt; max ? max : val;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clamp<\/span>(<span class=\"hljs-params\">props<\/span>) <\/span>{\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> pipe(&#91;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-comment\">\/\/ Step 1: Check if smaller than minimum<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> min(props.val, props.min),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-comment\">\/\/ Step 2: Check if larger than maximum<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 val =&gt; max(val, props.max)\n\u00a0 \u00a0 ])\n}\n\nclamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">5<\/span>}); <span class=\"hljs-comment\">\/\/ 5<\/span>\nclamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">15<\/span>}); <span class=\"hljs-comment\">\/\/ 10<\/span>\nclamp({<span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">-10<\/span>}); <span class=\"hljs-comment\">\/\/ 0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=222372&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>While this might seem a bit confusing at first, the benefits are that we now are able to use the <code>min<\/code> and <code>max<\/code> method independently of <code>clamp<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">min(<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">0<\/span>); <span class=\"hljs-comment\">\/\/ 10<\/span>\nmin(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">10<\/span>); <span class=\"hljs-comment\">\/\/ 10<\/span>\nmax(<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">0<\/span>); <span class=\"hljs-comment\">\/\/ 0<\/span>\nmax(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">10<\/span>); <span class=\"hljs-comment\">\/\/ 0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h1 class=\"wp-block-heading\">What are built-in functional paradigms in JavaScript?<\/h1>\n\n\n\n<p>While we&#8217;ve touched on how to build many of our own functional ideals using JavaScript, many of the core concepts are built into JavaScript itself through usage of Array methods.<\/p>\n\n\n\n<p>For example, want to run a function over each item of an array? <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach\" target=\"_blank\" rel=\"noopener\"><code>Array.forEach<\/code> to the rescue!<\/a><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>].forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">val<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(val));\n\n<span class=\"hljs-comment\">\/\/ Will output<\/span>\n<span class=\"hljs-number\">1<\/span>\n<span class=\"hljs-number\">2<\/span>\n<span class=\"hljs-number\">3<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>Array.forEach<\/code> doesn&#8217;t just pass a single value to the inner mapping function, it also passes the index of the item and the original array:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&#91;<span class=\"hljs-number\">1<\/span>,<span class=\"hljs-number\">2<\/span>,<span class=\"hljs-number\">3<\/span>].forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">val, i, arr<\/span>) =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log({val, i, <span class=\"hljs-attr\">length<\/span>: arr.length}));\n\n<span class=\"hljs-comment\">\/\/ Will output<\/span>\n{<span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">i<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">length<\/span>: <span class=\"hljs-number\">3<\/span>}\n{<span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">i<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">length<\/span>: <span class=\"hljs-number\">3<\/span>}\n{<span class=\"hljs-attr\">val<\/span>: <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-attr\">i<\/span>: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">length<\/span>: <span class=\"hljs-number\">3<\/span>}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Mapping items in an array to a new value<\/h2>\n\n\n\n<p>Don&#8217;t have a use for &#8220;<code>forEach<\/code>&#8220;? No matter! There&#8217;s also<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener\"><code>Array.map<\/code><\/a> that enables you to have a list and want to change each item in the list in some way.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> listAddedByOne = &#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>].map(<span class=\"hljs-function\"><span class=\"hljs-params\">val<\/span> =&gt;<\/span> val + <span class=\"hljs-number\">1<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Array.map accepts a function that, when you return a new value, will update that item of the list.<\/p>\n\n\n\n<p>Just like <code>Array.forEach<\/code>, <code>Array.map<\/code> passes the index of the item and the original array to the inner function as well:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-29\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> newList = &#91;<span class=\"hljs-string\">\"Eat\"<\/span>, <span class=\"hljs-string\">\"Sleep\"<\/span>, <span class=\"hljs-string\">\"Play Elden Ring\"<\/span>].map(<span class=\"hljs-function\">(<span class=\"hljs-params\">val, i, arr<\/span>) =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`<span class=\"hljs-subst\">${i + <span class=\"hljs-number\">1<\/span>}<\/span> \/ <span class=\"hljs-subst\">${arr.length}<\/span> - <span class=\"hljs-subst\">${val}<\/span>`<\/span>;\n});\n\n<span class=\"hljs-comment\">\/\/ This will return:<\/span>\n<span class=\"hljs-string\">\"1 \/ 3 - Eat\"<\/span>\n<span class=\"hljs-string\">\"2 \/ 3 - Sleep\"<\/span>\n<span class=\"hljs-string\">\"3 \/ 3 - Play Elden Ring\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-29\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Filter a list down based on a function&#8217;s return value<\/h2>\n\n\n\n<p>Say that you have a list of numbers:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-30\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> numbers = &#91;<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">50<\/span>, <span class=\"hljs-number\">60<\/span>, <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">90<\/span>];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-30\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And want to filter down this list to only include &#8220;small&#8221; numbers &#8211; aka when a number is smaller than 50. This is where we can use<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener\"><code>Array.fiter<\/code><\/a>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-31\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> smallNumbers = numbers.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">val<\/span> =&gt;<\/span> val &lt; <span class=\"hljs-number\">50<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-31\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Once again, you&#8217;re also given the option to get the index and original array in the filter method.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reduce an array down to a single value<\/h2>\n\n\n\n<p>While there are other array methods, the last one we&#8217;ll be taking a look at today enables you to reduce a list down to a single value. Let&#8217;s take a list of numbers and sum them together to a final output.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-32\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> numbers = &#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>];\n<span class=\"hljs-comment\">\/\/ This will return \"6\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> sum = numbers.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">acc, curr<\/span>) =&gt;<\/span> acc + prev, <span class=\"hljs-number\">0<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-32\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Reduce is passed two items:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The function that provides a reduced value when returned<\/li>\n\n\n\n<li>The initial value to set to <code>acc<\/code><\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\">How can we re-write built-in JavaScript functional programming methods?<\/h1>\n\n\n\n<p>While <code>forEach<\/code>, <code>map<\/code>, <code>filter<\/code>, and <code>reduce<\/code> are all built into JavaScript, the foundations of functional programming means that we can implement them ourselves. This doesn&#8217;t have any practical usecases, but allows us to understand how JavaScript works under the hood a bit better.<\/p>\n\n\n\n<p>For example, a <code>forEach<\/code> can be implemented using a basic <code>for<\/code> loop:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-33\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> forEach = (arr, callback) {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; arr.length; i++) {\n\u00a0 \u00a0 \u00a0 \u00a0 callback(arr&#91;i], i, arr);\n\u00a0 \u00a0 }\n};\n\n<span class=\"hljs-keyword\">const<\/span> cars = &#91;<span class=\"hljs-string\">\"Ford\"<\/span>, <span class=\"hljs-string\">\"Volvo\"<\/span>, <span class=\"hljs-string\">\"BMW\"<\/span>];\nforEach(cars, car =&gt; <span class=\"hljs-built_in\">console<\/span>.log(car));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-33\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Similarly, you can write your own implementation of <code>map<\/code> with an intermediary array alongside a <code>for<\/code> loop.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-34\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> map = (arr, callback) {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> returnedVal = &#91;];\n\u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; arr.length; i++) {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> newVal = callback(arr&#91;i], i, arr);\n\u00a0 \u00a0 \u00a0 \u00a0 returnedVal.push(newVal);\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> returnedVal;\n};\n\n<span class=\"hljs-keyword\">const<\/span> cars = &#91;<span class=\"hljs-string\">\"Ford\"<\/span>, <span class=\"hljs-string\">\"Volvo\"<\/span>, <span class=\"hljs-string\">\"BMW\"<\/span>];\n<span class=\"hljs-keyword\">const<\/span> carNameLengths = map(cars, car =&gt; car.length);\n<span class=\"hljs-built_in\">console<\/span>.log(carNameLengths); <span class=\"hljs-comment\">\/\/ &#91;4, 5, 3]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-34\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To implement <code>filter<\/code> is as easy as adding a single <code>if<\/code> statement to our <code>map<\/code> implementation.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-35\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> filter = (arr, callback) {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> returnedVal = &#91;];\n\u00a0 \u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; arr.length; i++) {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> exist = callback(arr&#91;i], i, arr);\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (exist) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 returnedVal.push(arr&#91;i]);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> returnedVal;\n};\n<span class=\"hljs-keyword\">const<\/span> cars = &#91;<span class=\"hljs-string\">\"Ford\"<\/span>, <span class=\"hljs-string\">\"Volvo\"<\/span>, <span class=\"hljs-string\">\"BMW\"<\/span>];\n<span class=\"hljs-keyword\">const<\/span> onlyBMW = filter(cars, car =&gt; car === <span class=\"hljs-string\">\"BMW\"<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(onlyBMW); <span class=\"hljs-comment\">\/\/ &#91;\"BMW\"]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-35\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Finally, implementing <code>reduce<\/code> is similar to our <code>map<\/code> implementation, but instead of <code>pushing<\/code> new values to an array, we simply replace the old value between loop iterations.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-36\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> reduce = <span class=\"hljs-function\">(<span class=\"hljs-params\">arr, callback, init<\/span>) =&gt;<\/span> {\n\u00a0\u00a0\u00a0 <span class=\"hljs-keyword\">let<\/span> returnedVal = init;\n\u00a0\u00a0\u00a0 <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; arr.length; i++) {\n\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0 returnedVal = callback(returnedVal, arr&#91;i], i, arr);\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 <span class=\"hljs-keyword\">return<\/span> returnedVal;\n};\n\n<span class=\"hljs-keyword\">const<\/span> numbers = &#91;<span class=\"hljs-number\">1<\/span>,<span class=\"hljs-number\">2<\/span>,<span class=\"hljs-number\">3<\/span>];\n<span class=\"hljs-keyword\">const<\/span> sum = reduce(numbers, (acc, curr) =&gt; acc + curr, <span class=\"hljs-number\">0<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(sum); <span class=\"hljs-comment\">\/\/ 6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-36\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h1 class=\"wp-block-heading\">Functional programming methods can be applied everywhere<\/h1>\n\n\n\n<p>Now that you&#8217;ve mastered the fundamentals of JavaScript functions, you can build more kinds of APIs for your applications. These APIs can help you make debugging easier, consolidate your application logic, and more.<\/p>\n\n\n\n<p><br>The functional programming paradigms we&#8217;ve touched on today are immensely popular in ecosystems like React applications and library development. In particular, <a href=\"https:\/\/coderpad.io\/blog\/development\/rules-of-reacts-useeffect\/\">React uses these concepts alongside its <code>useEffect<\/code> API.<\/a><\/p>\n\n\n\n<p>These concepts aren&#8217;t unique to JavaScript, either! Python utilizes similar ideas in its <a href=\"https:\/\/coderpad.io\/blog\/development\/python-list-comprehension-guide\/\">&#8220;list comprehension&#8221; functionality.<\/a><\/p>\n\n\n\n<p>If you find any of these techniques useful (or even confusing, we know that functional programming can be a world of its own) <a href=\"http:\/\/twitter.com\/coderPad\/\" target=\"_blank\" rel=\"noopener\">let us know on Twitter<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Functions are weird. Consider the following code: Seems straightforward enough, right? We&#8217;re creating a function sayHello, then immediately calling it. Now, what about the following code: This \u201cintuitive\u201d code comes loaded with assumptions and processes that we regularly take for granted: While you could get away with never knowing the answers to these questions, being [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8989,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[33],"keyword-cluster":[],"class_list":["post-8977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=8977"}],"version-history":[{"count":23,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8977\/revisions"}],"predecessor-version":[{"id":34595,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/8977\/revisions\/34595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/8989"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=8977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=8977"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=8977"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=8977"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=8977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}