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

$page_title = "JavaScript Destructuring";
$page_description = "A brief overview describing JavaScript destructuring.";
$page_author = "Hunter Miller";

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


  <!-- Beginning of blog post -->
  <div class="blog-post">
    <h2 class="blog-post-title">JavaScript Destructuring</h2>
      <p class="blog-post-meta">September 17, 2020 by Hunter Miller</p>

      <p>How JavaScript destructuring works and its many uses to simplify working with objects</p>
      <hr>
      <h3>Object Destructuring</h3>
      <p>
        JavaScript Destructuring is all about making life easier when working with objects and arrays in JavaScript. Instead of having to create new variables using the var or let keywords constantly, JavaScript Destructuring allows us to create these variables 'on the fly'. Let's get right into a few examples to see it in action.
        </br>
        </br>
        Suppose we have a simple person object and would like to get the information from that object. Traditionally, you have to create new variables and utilize dot notation to grab the information from that object:
      </p>
      <pre class='language-js'><code>
var person = {
  name: 'Hunter',
  age: 23,
  occupation: 'student'
};

var name = person.name;
var age = person.age;
var occupation = person.occupation;

console.log(name); //Hunter
console.log(age); //23
console.log(occupation); //student
            </code></pre>
            <p>
              With JavaScript Destructuring, we can simplify this to get ahold of the values by creating the variables in one line simply:
            </p>
            <pre class='language-js'><code>
var person = {
  name: 'Hunter',
  age: 23,
  occupation: 'student'
};

var {name, age, occupation} = person;

console.log(name); //Hunter
console.log(age); //23
console.log(occupation); //student
            </code></pre>
            <p>
              Here you can see that we were able to create the variables "name", "age", and "occupation" all within the single line and set those variables to the value of the key/value pairs under the person object with quite a bit less work.
              </br>
              </br>
              Another great use of JavaScript Destructuring is creating default values for properties of the object. If the object does not contain the key/value pair that you specify in the variable that is created with the JavaScript Destructuring syntax, the default value will automatically be used for variable. If there is a key/value pair, however, the actual value will be used! Let's go back to the person object again to demonstrate to understand exactly what I mean here:
            </p>
            <pre class='language-js'><code>
var person = {
  name: 'Hunter',
  age: 23,
  occupation: 'student'
};

var { bestFriend = 'Caden' } = person;

console.log(bestFriend); //Caden
            </code></pre>
            <p>
              Even though the person object does not have a bestFriend key/value pair, the variable created (bestFriend) automatically returns Caden since that was specified as the default value!
              </br>
              </br>
              I mentioned that if the key/value pair was created in the object, it would show that rather than the default value specified- let's create that right now and we'll see that the actual value for the bestFriend variable will be displayed:
            </p>
            <pre class='language-js'><code>
var person = {
  name: 'Hunter',
  age: 23,
  occupation: 'student',
  bestFriend: 'Jimmy'
};

var { bestFriend = 'Caden' } = person;

console.log(bestFriend); //Jimmy
            </code></pre>
            <p>
              Pretty cool, right? Default values created utilizing JavaScript Destructuring allows us to do this with quite a bit less code than before. Before ES6 and destructuring was implemented, one would have to write the following code to create a default value if there was no value supplied in the object:
            </p>
            <pre class='language-js'><code>
var person = {
  name: 'Hunter'
}

var bestFriend = person.bestFriend === undefined ? 'Caden' : person.bestFriend;

console.log(bestFriend); //Caden
            </code></pre>
            <p>
              So, as you can see, JavaScript Destructuring allows us to work with objects and significantly reduce the amount of typing needed to work with objects and get ahold of their properties. Try it out next time you are working with objects in JavaScript!
            </p>

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

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