<center>![JavaScript functions](https://files.peakd.com/file/peakd-hive/albro/23uFuC1qr3TmehzZos1PFhpFDpB7Dc8uExM2s3Tz31L6xvwPxKR2fp19mKexct8kkXGab.png)</center>

<p>
    In this post, I want to talk about the types of functions (Self-invoking functions, Declaration functions, Expression functions, Arrow functions, etc.) and how to define them, and we will also give some points about these functions.
</p>
<h3>
    JavaScript functions
</h3>
<p>
    Functions in JavaScript are defined with the <code>function</code> keyword and have two main types:
</p>
<ul>
    <li>
        Declaration Function
    </li>
    <li>
        Expression Function&nbsp;
    </li>
</ul>
<h3 style="text-align:justify;">
    Declaration Function
</h3>
<p style="text-align:justify;">
    Functions are declared with the following structure:
</p>
<pre><code class="language-javascript">function functionName(parameters) {
  // The code you want to run in the function
}</code></pre>
<p>
    These functions are not executed automatically, but we have to call them or invoke them in a more casual way. Their nature is such that they are stored for future use. Example:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Functions&lt;/h2&gt;
&lt;p&gt;This example contains a statement that calls a function and then performs a calculation and returns a value. This function is of the first type (declarative):&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
  return a * b;
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Declaration Function](https://files.peakd.com/file/peakd-hive/albro/23tcP5UHFKspwGbcoVzhPF9ums8HPhmLpUokHy2c38CXVoMXq1KgeCEzx4ajSCVByKzzx.png)</center>

<p>
    <i><strong>Note:</strong> semicolons are used to separate executable commands in JavaScript, and since declaring is not an executable function (I said that these types of functions are not executed at the same time until they are called), there is no need to put There is no semicolon in their definition (after the closing bracket).</i>
</p>
<h3 style="text-align:justify;">
    Expression Function
</h3>
<p style="text-align:justify;">
    Another way to define JavaScript functions is to define them through expression. These types of functions are stored in a variable:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;Storing functions of the second type inside a variable:&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p style="text-align:justify;">
    After you define this type of function in a variable, you can use that variable as a function. The following example clearly shows this:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;After you define this type of function in a variable, you can use that variable as a function:
&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Expression Function](https://files.peakd.com/file/peakd-hive/albro/23tmmjqrmBBgAAjzRwRdc5wkmqGMfaa1ub27qUwi6aiAzYqffKCrYgAQpTQScY49BuhCR.png)</center>

<p style="text-align:justify;">
    The function that you see in the above example is called <i><strong>anonymous function</strong></i> because it has no name. These types of functions are always called with the desired variable name.
</p>
<p style="text-align:justify;">
    <i><strong>Note:</strong></i> If you look carefully, I have used a semicolon in the above function because it is part of an executive statement.
</p>
<h3 style="text-align:justify;">
    Function() Constructor
</h3>
<p style="text-align:justify;">
    You have seen from the previous examples that JavaScript functions are defined with the <code>function</code> keyword, but there is another way to define functions in JavaScript. We can use a constructor: <code>Function()</code>
</p>
<p style="text-align:justify;">
    Consider the following example:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;JavaScript has an built-in function constructor.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Function() Constructor](https://files.peakd.com/file/peakd-hive/albro/23uRKjMYAstAVjtHjUseiRwJ5RvKkMBH4gHKgjTRbbhBtVfYy5HBjBrsk5jSSKZP2dYRf.png)</center>

<p style="text-align:justify;">
    Do we have special functions that we need to use the constructor to define? No! This is just one of several methods of defining JavaScript functions. You can simply write the previous example as follows:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var myFunction = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = myFunction(4, 3);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 style="text-align:justify;">
    Hoisting in JavaScript functions
</h3>
<p style="text-align:justify;">
    JavaScript's default behavior is to move declarations to the top of the current scope. This is true for variables and functions, so we can call JavaScript functions before we define them:
</p>
<pre><code class="language-javascript">myFunction(5);
function myFunction(y) {
  return y * y;
}</code></pre>
<p style="text-align:justify;">
    But if we define the functions with expressions, they will no longer be hoisted and we cannot do this.
</p>
<h3 style="text-align:justify;">
    Self-invoking functions
</h3>
<p style="text-align:justify;">
    Self-invoking functions means that they call themselves and do not need to be called and called separately. You can Self-invoking them by placing parentheses in front of Function expressions.
</p>
<p style="text-align:justify;">
    Note: function declaration cannot be Self-invoking.
</p>
<p style="text-align:justify;">
    Consider the following example:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p&gt;Functions can be invoked automatically without being called:&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
(function () {
  document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Self-invoking functions](https://files.peakd.com/file/peakd-hive/albro/23u6YQcP7tszSyasjv3GMC1ei2YzvBSYavVMhht9kC2qzjdZvnnUheivAGhQ9t1i6m1yr.png)</center>

<p style="text-align:justify;">
    As you can see, in order to read the functions, you must first put the entire function in a pair of parentheses and then put another pair of parentheses in front of it!
</p>
<p style="text-align:justify;">
    It is interesting to know that the above example function is called <strong>anonymous self-invoking function</strong>.
</p>
<p style="text-align:justify;">
    Note: You can use functions as a single value:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
function myFunction(a, b) {
  return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p style="text-align:justify;">
    As you can see, I was able to use a function as a normal value and insert it into my calculations (in the example above, I multiplied the result of the function by 2).
</p>
<h3 style="text-align:justify;">
    Arrow Function
</h3>
<p style="text-align:justify;">
    This class of functions allows you to define functions more concisely:
</p>
<pre><code class="language-javascript">// Example in ES5
var x = function(x, y) {
  return x * y;
}
// Example in ES6
const x = (x, y) =&gt; x * y;</code></pre>
<p style="text-align:justify;">
    &nbsp;
</p>
<p style="text-align:justify;">
    [Hive: @albro]
</p>