ES6 in Javascript

Hello everyone! We'll be talking about ES6 Features in Javascript! This is aimed at people who knows basics of Javascript already. If you are new to Javascript, feel free to check out my Javascript Basics series, right over here!

What is ES6

So, before we head on the features, what exactly is ES6? Well, ES6 refers to the 6th version of the ECMA Script programming language. ECMA Script is the standardized name for Javascript , and the 6th version is the next version after the 5th version, which was released in 2011. ES6 was officially published on June 2015. This introduced a lot of new features, including:

• template literals
• scoped variables
• constant variables
• default function parameters
• arrow functions
• etc...

Template Literals

So, you know when we used the old fashioned way of concatenating or joining strings with the + symbol? Well, that may seem fine, but what if you need to make a sentence using 5 or more variables? That would be such a mess, and you might even be irritated on how it looks like! Let me show you why. Let's say you want to make an intro about yourself:

See how short and simple it has become? Well, this is what is called a template literal (also called templated strings). They behave exactly the same as any string, which means all string methods can be used! The only difference is that it counts every space, every ., every new line, and you can insert a variable by using this syntax: ${}. And just like that, there you have it! Everything you know about template literals! Feel free to have a go at it on your own code editor!

Scoped Variables

Before we venture into scoped variables, let's try to review what are scopes. So, scope put simply is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code. Let me show you what I mean. Let's look at the following example:

So, what do you think happens on line 8? Well, we get the following error:

ReferenceError: greeting is not defined

Now, let me explain why this happens. This is because what is called as a local scope. Basically, scopes are categorized as either a global scope and local scope. An example of a global scope would be var, because no matter where you put them, you can still access them anywhere. Now, the tricky parts are the local scope. These consists of function, let and const. So just like the example above, we have the function greeting inside the function getName and when we try to call the function greeting outside the getName function, since it has different scopes, we get the error above.

Now that we get the concept, you might be thinking, why not just use global variables like var everywhere? Isn't it easier that way? Well, it certainly IS easier, but what's good about scoped variables are they can ensure that the data can not be read where it's not supposed to be read. Meaning, you can use the same variable name in two non-related scopes and be completely safe that each others' data will not be altered or compromised! Here's an example of scoped variable usage.

There you have it! You can use the same variable i in all your loops(as long it's not nested) and you'll be fine! Just a quick tip, if you need to make a variable in the most outer scope, just use let, I personally prevent the use of global variables, and use scoped variables, unless I have to.

Constant Variables

Next up, constant variables! Constant variables are also considered scoped variables, but the only difference is that unlike let, you can't reassign a variable. I'll show you what I mean.

I believe the code above is self-explanatory, and you can see that reassignment to a constant variable is going to throw an error, just like the one on line 7. A common use case of a constant variable is data that you don't want to be altered. The only catch is that with arrays and objects, although you can't reassign the variable itself, you can still alter its contents(elements). Here's an example:

Now, what if you want to make an array fixed? What if you also want to prevent the current constant variable's elements to be altered? Well, you can use Object.freeze, here's an example:

So there you have it! Everything you need to know about constant variables! Feel free to experiment with constant variables in your own code editor! Quick challenge: see what happens when you try to apply Object.freeze on an object itself! Does it work? Tell me your answer on twitter!

Default Function Parameters

Okay, so you remember functions right? Well guess what? You can actually set default parameters! This actually means that whenever you call (also called invoke) a function without all the parameters, the function will still work as intended! Let's jump straight into examples!

So, there you have it! Default function parameters! The only catch is that if you have 2 default parameters, and you want to insert just the 2nd parameter, and let the 1st be its default, you still can't do that in Javascript. Currently, there's no support for that yet, so the only way currently is to reorganize the order of your parameters so that it achieves your intended purpose. That's it! All you need to know about default function parameters in Javascript!

Arrow Functions

Last but not least, arrow functions. So, what exactly are arrow functions? Well, an arrow function is a compact alternative to a regular function. So let me guve you a comparison between a same function, one using the regular syntax, another with arrow syntax.

So, you might think, why is the const there? Well, because what we've done functions previously is that when we use the keyword function followed by a name, we actually initialized a variable with its value as a function. Now, if you feel confused, don't worry, let's walk through this together. First of all, let's start with the same regular function:

Now, as I said earlier, all functions are also variables. Why? Well, because we can take out greeting and put it inside a variable! Here's how it would go:

Now, all I did was try to take out greeting in a way that is a little bit different than what we're used to see here. By the way, it doesn't have to be const. But since it's a function, and usually we don't want functions to accidentally be assigned into something else, let's just use const. Now, next up, let's convert the keyword function into an arrow =>. Here's how the result would look:

If you're wondering why there are no parentheses () between name that's because if you only have a single parameter, parantheses are optional. Even if you don't provide the parentheses, the code will still work. Now, we can actually simplify our code even more. Let's say all you want is to return, and nothing else, just like what we're doing in greeting you can get rid of the return keyword and the curly brackets{}. Here's how the final result would look like:

So there you have it! We converted a 3-line code into a single-line code! Feel free to experiment them yourselves and tell me what you think!

Summary

So there you have it folks! The most common ES6 features for you to add to your skillset! Be sure to tell me what you think, and if you have any questions, feel free to hit me up on Twitter or LinkedIn! Have a great day and happy coding!