<?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: Uday Janardhan Singh</title>
    <description>The latest articles on DEV Community by Uday Janardhan Singh (@udaay).</description>
    <link>https://dev.to/udaay</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%2F768216%2F80daa036-13b5-4097-96dd-0e43669802ac.png</url>
      <title>DEV Community: Uday Janardhan Singh</title>
      <link>https://dev.to/udaay</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/udaay"/>
    <language>en</language>
    <item>
      <title>Node.js Export Dilemma: Decoding module.exports vs exports for Developers</title>
      <dc:creator>Uday Janardhan Singh</dc:creator>
      <pubDate>Sun, 05 Nov 2023 13:35:22 +0000</pubDate>
      <link>https://dev.to/udaay/nodejs-export-dilemma-decoding-moduleexports-vs-exports-for-developers-dk8</link>
      <guid>https://dev.to/udaay/nodejs-export-dilemma-decoding-moduleexports-vs-exports-for-developers-dk8</guid>
      <description>&lt;h3&gt;
  
  
  Introduction:
&lt;/h3&gt;

&lt;p&gt;The debate between module.exports and exports in Node.js often confuses many developers, and this is something which made me confuse when i started learning NodeJS. Both are used to export modules in Node.js, but there are differences in how they function.&lt;br&gt;
Let's look one by one with example.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Default Export Object&lt;/strong&gt;: &lt;code&gt;module.exports&lt;/code&gt; is the actual object that is returned when a module is required. It starts as an empty object and anything assigned to module.exports will be returned as the result of the require function.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example&lt;/em&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-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;REQUEST_TIMEOUT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Sending &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; to server`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;REQUEST_TIMEOUT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;REQUEST_TIMEOUT&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or we can use this below syntax by reassigning.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;REQUEST_TIMEOUT&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Alias to module.exports&lt;/strong&gt;: &lt;code&gt;exports&lt;/code&gt; is essentially a shortcut or an alias for module.exports. It allows you to add properties and methods to the module that will be available when the module is required. Provided you have not reassigned the module.exports or exports. It allows a shortcut, so that &lt;code&gt;module.exports.send = send&lt;/code&gt; can be written more succinctly as &lt;code&gt;exports.send = send&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example&lt;/em&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;REQUEST_TIMEOUT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;REQUEST_TIMEOUT&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We have seen the both the examples and their usage let's dive deep to get better understanding how these two works internally.&lt;/p&gt;

&lt;h3&gt;
  
  
  Difference in Reassignment:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q4TyUSTx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjv0mpafsviszzzhvndu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q4TyUSTx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjv0mpafsviszzzhvndu.png" alt="Module.exports object refrence" width="800" height="374"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Initially,&lt;code&gt;module.exports=exports&lt;/code&gt; , and the &lt;code&gt;require&lt;/code&gt; function returns the object &lt;code&gt;module.exports&lt;/code&gt; refers to.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When properties or methods are added to this shared object through exports, like &lt;code&gt;exports.REQUEST_TIMEOUT = 500&lt;/code&gt;, both module.exports and exports maintain reference to the same object. Thus, upon requiring this module and assigning it to a variable, that variable will have access to the added property, such as &lt;code&gt;REQUEST_TIMEOUT&lt;/code&gt; with a value of &lt;code&gt;500&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;However, when one of them is overridden or reassigned. For instance, if exports is reassigned explicitly, like &lt;code&gt;exports = function send {...}&lt;/code&gt;, a crucial change occurs: exports now refers to a new empty object, while module.exports retains its reference to the original object. Consequently, requiring this &lt;br&gt;
&lt;code&gt;send function&lt;/code&gt; from other module will not return the newly created &lt;code&gt;send function&lt;/code&gt; as the export. Instead, the original object referenced by &lt;code&gt;module.exports&lt;/code&gt; is retrieved.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Always remember &lt;code&gt;module.exports&lt;/code&gt; is Boss.
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Conclusion.
&lt;/h3&gt;

&lt;p&gt;The easiest way to think about it, is to think that this line is implicitly at the top of every module.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In essence, &lt;code&gt;exports&lt;/code&gt; and &lt;code&gt;module.exports&lt;/code&gt; are essentially the same, up until you reassign exports within your module. This action causes a separation between the two, where &lt;code&gt;exports&lt;/code&gt; points to a new object and &lt;code&gt;module.exports&lt;/code&gt; maintains reference to the original one.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>backend</category>
    </item>
  </channel>
</rss>
