<?php
include_once("../includes/config.inc.php");
$page_title = "Welcome to Arrow Function";
$page_description = "The basics to arrow functions";
$page_author = "Christian Bonilla";
include_once("../includes/header.inc.php")
?>
	    <main role="main" class="container">

	    	<!-- Beginning of blog post -->
	    	<div class="blog-post">
	    		<h2 class="blog-post-title">Arrow functions</h2>
	    	  	<p class="blog-post-meta">Oct 20, 2020 by Christian Bonilla</p>

	    	  	<hr>
				  <h2>What Does the Arrow function Do?</h2>
				  <br>
				  <h2>They look like this</h2>

				<pre class="language-js"><code>catMeow = () => “Meow!”;</code></pre>
	    	  	<p>
				  I know that the example above can look confusing when compared to the old conventional way of doing things, 
				  but we will get you up to speed. The new arrow function syntax was created in ES6. The arrow function was created for the sole purpose of 
				  helping developers to write less code when writing a function. The old way to create a function can still be used despite the creation of 
				  the arrow function. For any beginners just getting started with JavaScript functions below is an example of the old way of doing things.
	    	  	</p>
	    	  	<pre class="language-js"><code>catMeow = function()
 {
    return "Meow!";   
 }</code></pre>
	    	  	<p>
				The example above shows before arrow functions were introduced. Start by writing the word function followed by parentheses and a set of curly brackets.
	    	  	</p>
	    	  	

			  	</code></pre>
				  <h3>Another Section Header</h3>
				  <p>If the function has only one statement and returns a value, we can remove the brackets and the return. So, it looks like this: </p>
                    <pre class="language-js"><code>catMeow = () => “Meow!”;</code></pre>
                    <p>If you have parameters, you pass the parameter between the parentheses. </p>
                    <pre class="language-js"><code>catMeow = (val) => val + “Meow!”;</code></pre>
                    <p>If you have only one parameter you can skip the parentheses so it looks like this:</p>
                    <pre class="language-js"><code>catMeow = val => val + “Meow!”;</code></pre>

                    <p>Some browsers do not support this function. The ones that do are Chrome, Edge, Firefox, Safari, and Opera.</p>

                    <p> Arrow functions behave a little bit different because they do not have their own "this" value. </p>
                    <pre class="language-js"><code>const dog = {
    name: 'Rex',
    getName: function(){
        return this.name;
    }
};
                    </code></pre>
                    <p>The code above works fine and returns Rex. This function called "getName" returns this.name. 
                        This is referring to the object dog and in the arrow function using "this" does not work. </p>
                    <pre class="language-js"><code>const dog = {
    name: 'Rex',
    getName: () => {
        return this.name;
    }
};</code></pre>
	    	  	  <!-- <p>
	    	  		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    	  		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	    	  		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	    	  		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	    	  		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	    	  		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	    	  	</p> -->

	    	</div>
	    	<!-- End of blog post -->

	    </main>

<?php
if(!empty($sideBar)){
	require("includes/" . $sideBar);
}
require_once("../includes/footer.inc.php")
?>