ES6 brought in a lot of path-breaking changes to JavaScript. If you're a JavaScript developer or just interested in the language, you might already know that JavaScript is at the top in most of the developer surveys for the best language to learn in 2021. TypeScript is also gaining a lot of popularity providing more control over the code before execution. But if you’re comfortable with JavaScript, it would be easy to master TypeScript as well. In this post, we'll go through some of the new additions in ES6 that have made JavaScript more versatile than ever. Let's get stuck in!
The dreaded arrow functions! No, they’re not. Love them and they’ll love you back. Arrow functions really gave a tough time to a lot of developers due to the drastic change in syntax from traditional functions. But, with time, arrow functions have grown on developers and they’ve grown so much in popularity now. Look at a conventional ES5 JavaScript function. It has the function keyword, followed by the function name and the arguments. We use curly braces ( { ) to denote the body of the function. This simply returns the string appending “Hello” to the argument that is passed to it.
function helloWorld(name) {
return "Hello " + name
}
console.log(helloWorld("John"));
The ES6 equivalent of this, is surprisingly, much more concise and readable.
const arrowFunction = (name) => {
returnHello ${name}
}
Let’s go over this one. The const and let keywords were also newly introduced with ES6. As the name suggests, const is used for storing constants, but there are small intricacies here that don’t exactly apply to it. The keyword let is used to store variables, which were stored in var earlier. We have the function argument ‘name’ followed by an arrow and the function body. Inside we return the same thing as we did before, but using template literals, which is another feature of ES6 we will discuss in a while.
That was pretty easy, wasn’t it? Now, we can rewrite this function and make it even smaller:
const arrowFunction = name => `Hello ${name}`
You see now, it has become just a single line. If there’s only one argument, we can get rid of the parenthesis around it. If it is just a single line returning something, we can also get rid of the curly braces and the return keyword itself.
Template literals is another cool addition that we already saw in the previous example. See, how in ES5, we had to append the name to the sentence using the + operator? With template literals, you can use the backtick symbol to embed expressions within the sentence itself using the ${} notation.
const sumFun = (a, b) =>
Sum of ${a} and ${b} is ${a+b}
console.log(sumFun(2,10));
You can see in the above example; how easy it is to implement arrow functions as well as using template literals to give meaningful responses. The output of the following program will be: Sum of 2 and 10 is 12
As we said before, since it has just a single line inside the function body that returns something, we can omit the curly braces as well as the return keyword. Inside the template literals, we can evaluate all sorts of expressions. This is just a simple demonstration of it.
Destructuring, in the literal sense, means to break something down to its roots. With ES6, we can do that to objects and arrays with a single line of code. Let’s take a look at how it was with ES5 and compare it with ES6.
var student1 = {
name: "John",
age: 25,
marks: 97
}
var name = student1.name
var age = student1.age
var marks = student1.marks
console.log(name + " aged " + age + " has scored " + marks + " out of 100")
This will give the output as “John aged 25 has scored 97 out of 100”. Now, let’s look at the ES6 equivalent of this.
const student1 = {
name: "John",
age: 25,
marks: 97
}
let { name, age, marks } = student1
console.log(${name} aged ${age} has scored ${marks} out of 100)
This is object destructuring where we’ve used just a single line of code to retrieve all the values inside the object into three variables. For the above code snippet, we get the same output as before. The important thing to note here is that the names of the variables should be the same as that of the object keys. If we want to use a different name, we can use the colon to alias it as shown below.
let { name: otherName, age, marks } = student1
In the same way, as we did above, we can destructure arrays as well. The only thing that needs to be changed is the curly braces that have to be replaced with square brackets ([ ]).
Classes are an integral part of object-oriented programming but JavaScript is not an object-oriented language by definition. With the new addition in ES6, it has greater support for OOP concepts, and classes are at the very top. To write a class in JavaScript is very similar to other programming languages. Let’s create a class for a student.
class Student{
constructor(name, age, marks){
this.name = name
this.age = age
this.marks = marks
}
}
const student1 = new Student("John", 25, 97)
console.log(student1)
As you can see above, we have the keyword class that is needed before specifying the class name. Inside the constructor, we can have values, and within it, you can assign them to the class fields. Note that you don’t need to explicitly define these class fields before. To create an object of a class we use the let or const keywords followed by the variable name. We then use the new keyword to create an instance of the class passing in the values we want. Imagine a case where you needed to have some default values for the fields in the class. In that case, we can use the default values option that was also introduced in ES6.
class Student{
constructor(name = "Trevor", age = 18, marks = 50){
this.name = name
this.age = age
this.marks = marks
}
}
const student1 = new Student("John", 25, 97)
const student2 = new Student();
console.log(student2)
You can see there’s a small change in the constructor's arguments now. We have the default name as Trevor, age as 18, and marks as 50. Now, we can go ahead and create an object without specifying initial values and these defaults will be taken into consideration. You can see the following output when you print it out on the console:
Student { name: 'Trevor', age: 18, marks: 50 }
That’s it for a brief introduction to the new features of ES6. This is just the tip of the iceberg because there are a lot of other nifty additions along with the ones mentioned above. We will go over a few more of these in the next part of this article. Stay tuned and happy coding!
Like what you've read or want more like this? Let us know! Email us here or DM us: Twitter, LinkedIn, Facebook, we'd love to hear from you.