<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: pranesh</title>
    <description>The latest articles on DEV Community by pranesh (@praneshpsg239).</description>
    <link>https://dev.to/praneshpsg239</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180276%2Fb283e698-8f3d-47ca-869f-6ff9c367b0dc.jpg</url>
      <title>DEV Community: pranesh</title>
      <link>https://dev.to/praneshpsg239</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/praneshpsg239"/>
    <language>en</language>
    <item>
      <title>noop in Javascript</title>
      <dc:creator>pranesh</dc:creator>
      <pubDate>Tue, 17 Sep 2019 17:52:47 +0000</pubDate>
      <link>https://dev.to/praneshpsg239/noop-in-javascript-478h</link>
      <guid>https://dev.to/praneshpsg239/noop-in-javascript-478h</guid>
      <description>&lt;p&gt;Let's talk about "noop" in #javascript.&lt;/p&gt;

&lt;p&gt;noop = no operation&lt;/p&gt;

&lt;p&gt;As it's abbreviation says, it wont perform any operation. confusing?  Let's see an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;noop&lt;/span&gt;&lt;span class="p"&gt;(){}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculateSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;addFunction&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;noop&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;As this example states, noop is like a default function and if "addFunction" dosen't exists, "calculateSum" takes noop. Meaning, it won't perform any operation. If "addFunction" is not defined and prevents "calculateSum()" from running undefined as function, it will run noop and returns undefined.&lt;/p&gt;

&lt;p&gt;What if we use something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculateSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;addFunction&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The above statement is absolutely fine, but by using named function such as noop, enhances readability for the user.&lt;/p&gt;

&lt;p&gt;It is mostly used as backup callback function. I found it being used in a React dropdown library (&lt;a href="https://github.com/downshift-js/downshift"&gt;downshift&lt;/a&gt;) also lodash has &lt;a href="https://lodash.com/docs/4.17.15#noop"&gt;_.noop&lt;/a&gt; and so on.&lt;/p&gt;

&lt;p&gt;TL;DR - It is a function, which performs no operation and once invoked it returns undefined . It helps improving the readability of the code and prevents application break.&lt;br&gt;
Eg:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;noop&lt;/span&gt;&lt;span class="p"&gt;(){}&lt;/span&gt;
&lt;span class="c1"&gt;// without noop:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculateSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;addFunction&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// with noop:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculateSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;addFunction&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;noop&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



</description>
      <category>webdev</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
