New Syntax Improvements in ES6

Let and Const

Previously (in older versions of ES6), var was the only way to declare a variable, but let and const were added as an improvement.
I wrote this article in my early months of learning ES6 in order to understand hoisting and destructuring better and I never quite hit publish. Today, I hit the publish button. Hope it helps someone out there.

Let's get to it.

To understand why the improvemenes in ES6 was made, let us look at the following example:

function eatFood(willeat){
   if(willeat){
      var food = "Chicken and goat meat peppersoup";
   }else{
      var drink = "Hollandia Yoghurt";
   }
}

When you run

eatFood(false)

it will give the value
javascript
Undefined

This is because of what we call Hoisting.
Hoisting is as a result of the way the browser interprets JavaScript. This means that when the code is executed, the variables food and drink will be moved to the top of their scope leaving the assignments behind.

So what Let and Const helps us to do is that the variable scope are bound to their blocks and not the function scope. Also, the const keyword was introduced to JavaScript to allow immutable words. That is, variables declared as const cannot be modified once assigned.

Destructuring

Data from arrays and objects can be broken down into distinct elements. Destructuring helps you to extract specific elemetns you want to extract from a given array or object.

Consider the code snippets below:

const names = [Joe, Mary, Matt];

const [a, b, c] = names;

console.log(a, b, c);

prints: Joe Mary Matt

In the example above, [] shows the array being destructured and a,b,c represents the variables where you want to store the values extracted from the array.
You can see that we didn't have to specify the indexes for the names before they knew exactly were to apply.

Also, place values can be ignored when destructuring arrays.
For instance, you can have

const[a, , c] = names;

Objects can also be destructured. Consider the following example:

const name{
firstname:Mary,
middlename:Josephine,
lastname:Thomas
};

const {first, middle, last} = name;

console.log(first, middle, last);

This will print: Mary Josephine Thomas

In the example above {} represents the objects to be destructured and first, middle and last represent the variables where you want to store the property of the objects.

I hope this short article helped you find what you're looking for.