<?php
require_once("../includes/config.inc.php");

$page_title = "ES6 Class Syntax Overview";
$page_description = "Overview of the basics of ES6 class syntax.";
$page_author = "James Stevenson";

require_once("../includes/header.inc.php");
?>

	    <main role="main" class="container">

	    	<!-- Beginning of blog post -->
	    	<div class="blog-post">
	    		<h2 class="blog-post-title">ES6 Class Syntax</h2>
	    	  	<p class="blog-post-meta">Sept 17, 2020 by James Stevenson</p>

	    	  	<p>This blog will help you understand some of the basic syntax of ES6 classes.
                </p>
	    	  	<hr>
	    	  	<h3>Understanding the value of ES6 class syntax
                </h3>
	    	  	<p>
                    With the implementation of ES6 comes a wide variety of new syntax
                     that makes writing code in javascript considerably easier. 
                     For example, javascript does not have the ability to create classes. 
                     This means that if you were to create an application that required the 
                     creation of many objects, you would need to manually hardcode each one 
                     of them. These ES6 classes act as a template for the creation of 
                     objects, making the workload much lighter.
	    	  	</p>
	    	  
	    	  	<p>
                    Let’s take a look at the syntax for ES6 class creation.
	    	  	</p>
	    	  	<pre class="language-js"><code>    
class Student {
     constructor(name, age, studentID){
        this.name = name;
        this.age = age;
        this.studentID = studentID;
    }
}
			  	</code></pre>
	    	  	<h3>The Syntax</h3>
	    	  	<p>
                    Let’s start by talking about the "class student {}" syntax.
                     The key word class followed by a name the user chooses (in this case student)
                      and a pair of curly braces allows you to initialize a unique class.
                       This class can be used as a template to create objects without having
                        to hard code them in by storing a constructor method along with a
                         pre-determined set of variables. <br><br>Variables for the class are
                          set within the constructor method instead of at the beginning of class.
                           They are created by using the "this." keyword before the variable name.
                            "this" refers to the class it is being called in. So, when you write 
                            "this.name" it creates a variable called name within the class that
                             can hold a string. <br><br> Let’s touch on a few other ways ES6 lets
                              us create variables.
	    	  	</p>
                  <pre class="language-js"><code>
const speedOfLight = "299,792,458 m/s";
let temp = "52 Degrees F";
       temp = "78 Degrees F";
console.log(temp);
//output --> 78 Degrees F
                                    </code></pre>
                                    <p>With the implementation of ES6 we have access to the "const" keyword.
                                         This keyword allows us to create a variable that cannot be reassigned
                                          once it is used unless it is used in objects. This makes the "const"
                                           keyword more powerful than var. In the example above, the speed of light
                                            is represented as a "const" variable. If you were to change the value of
                                             speedOfLight later in your code, you would receive an error.
                                              <br><br>The "let" keyword is the opposite of "const". "let" creates
                                               a variable that can be reassigned called a mutable variable. As we
                                                can see in the example above, if we console log temp, the output
                                                 would be 78 Degrees F and not 52 Degrees F. This is because the 
                                                 variable was overwritten in its second instantiation.</p>
	    	</div>
	    	<!-- End of blog post -->

		</main>
<?php
require_once("../includes/footer.inc.php");
?>
