Differences between arrow function and regular function in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2023-02-18 06:35:13

<blockquote>
<h1 id="functions-are-the-bread-and-butter-of-javascript-programming">Functions are the bread and butter of JavaScript programming.</h1>
</blockquote>
<p>JavaScript functions can be defined in many ways. One can use the right syntax for specific needs by understanding the differences.</p>
<p>One of the usual way of defining a function is by using function keyword.</p>
<pre><code><span class="hljs-comment">// Function declaration</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">double</span>(<span class="hljs-params">x</span>)</span>{
    <span class="hljs-keyword">return</span> x*<span class="hljs-number">2</span>;
}
</code></pre><pre><code><span class="hljs-comment">// Function expression</span>
<span class="hljs-keyword">const</span> <span class="hljs-keyword">double</span> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>)</span>{
    <span class="hljs-keyword">return</span> x*<span class="hljs-number">2</span>;
}
</code></pre><p>In this blog, I will refer to these types as <em>regular functions</em>.</p>
<p>A second way of defining a function, introduced in ES2015, is the <em>arrow function</em> syntax.</p>
<pre><code><span class="hljs-keyword">const</span> <span class="hljs-keyword">double</span> = (x) =&gt; x*<span class="hljs-number">2</span>
</code></pre><p>In this blog, I will discuss some main differences between regular functions and arrow functions.</p>
<h2 id="1-this-value">1. this value</h2>
<h3 id="11-regular-function">1.1 regular function</h3>
<p>Inside a regular function, this value (i.e. the context of execution) is dynamic, depends on how the function is invoked.</p>
<p>During <em>simple invocation</em>, the value of this is equal to the global object.</p>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">demo</span>(<span class="hljs-params"></span>)</span>{
   <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>)
}

demo();             <span class="hljs-comment">// logs global window object</span>
</code></pre><p>During <em>method invocation</em>, the value of this is equal to the object owning it.</p>
<pre><code><span class="hljs-keyword">const</span> myDemo = {
   greet(){
        console.log(<span class="hljs-keyword">this</span>);
   }
}

myDemo.greet();         <span class="hljs-comment">// logs myDemo Object</span>
</code></pre><p>During <em>constructor invocation</em>, the value of this refers to the newly created instance.</p>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);
}

<span class="hljs-keyword">new</span> Demo();      <span class="hljs-comment">// logs an instance of Demo</span>
</code></pre><h3 id="12-arrow-function">1.2 Arrow function</h3>
<p>The value of this in case of arrow function is considerably different from that of regular function. Arrow function doesn't define it's own context of execution.</p>
<p>The value of this inside an arrow function is the same as that of it's outer function. In other words, arrow function resolve the value of this <em>lexically</em> and this behavior is independent of how and where the function is executed. </p>
<pre><code><span class="hljs-keyword">const</span> myDemo = {
   greet(){
         console.log(<span class="hljs-keyword">this</span>);                <span class="hljs-comment">// logs myDemo Object</span>
         <span class="hljs-keyword">const</span> <span class="hljs-keyword">inner</span> = () =&gt; {
                   console.log(<span class="hljs-keyword">this</span>);              <span class="hljs-comment">// logs myDemo Object</span>
            }
         <span class="hljs-keyword">inner</span>();
      }
}

myDemo.greet();
</code></pre><p>This great feature of arrow function make sure that when you use arrow function as callbacks, it doesn't define it's own execution context.</p>
<h2 id="2-constructors">2. Constructors</h2>
<h3 id="21-regular-function">2.1 regular function</h3>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Meal</span>(<span class="hljs-params">name</span>)</span>{
    <span class="hljs-built_in">this</span>.name = name;
}

<span class="hljs-keyword">const</span> oatMeal= <span class="hljs-keyword">new</span> Meal(<span class="hljs-string">"oats"</span>);
<span class="hljs-built_in">console</span>.log(oatMeal instanceOf Meal)      <span class="hljs-comment">// logs   true</span>
</code></pre><p>Meal is a regular function, when invoked with new keyword create an instance of type Meal.</p>
<h3 id="22-arrow-function">2.2 Arrow function</h3>
<p>Arrow function cannot be used as a constructor. If you try to invoke an arrow function prefixed with new keyword, JavaScript throws an error:</p>
<pre><code><span class="hljs-keyword">const</span>  Meal = <span class="hljs-function">(<span class="hljs-params">name</span>) =&gt;</span> {
    <span class="hljs-built_in">this</span>.name = name;
}

<span class="hljs-keyword">const</span> oatMeal= <span class="hljs-keyword">new</span> Meal(<span class="hljs-string">"oats"</span>);   <span class="hljs-comment">// error : Meal is not a constructor</span>
</code></pre><p>Invoking new Meal('oats'), where Meal is an arrow function, throws TypeError: Meal is not a constructor.</p>
<h2 id="3-implicit-return">3. Implicit return</h2>
<h3 id="31-regular-function">3.1 regular function</h3>
<p>return expression statement returns the result from a function:</p>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">demo</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-number">100</span>;
}

demo();  <span class="hljs-comment">//  return 100</span>
</code></pre><p>If the return is missing or there is no statement after return, then regular function implicitly return undefined.</p>
<h3 id="32-arrow-function">3.2 Arrow function</h3>
<p>Arrow functions return values the same way as regular functions, but with one useful exception.</p>
<p>You can implicitly return an expression from the arrow function if its curly braces are omitted. These are the inline arrows function.</p>
<pre><code><span class="hljs-keyword">const</span> increment = (<span class="hljs-built_in">num</span>) =&gt; <span class="hljs-built_in">num</span> + <span class="hljs-number">1</span>;
increment(<span class="hljs-number">401</span>);        <span class="hljs-comment">//  402</span>
</code></pre><p>num + 1 is the only expression in increment() arrow. The arrow function implicitly returns this expression without the use of the return keyword.</p>
<p>Regular and arrow functions differ in important ways that allow you to choose the right syntax based on your needs.</p>
<p><em>What other differences do you know between arrow functions and regular functions ?</em></p>
</br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>