Brief Javascript ES6 Tutorial For Beginners Part II

Hello Friends. Today we will be looking at part 2 of the JavaScript ES6 Tutorial. Last week we talked about ES6 and the amelioration brought to it as compared to the previous JavaScript version. And I also mentioned I got the knowledge used for the this tutorial from Udacity’s ES6 Course. Thanks to the Google Africa Challenge scholarship. The previous tutorial is here.

As I mentioned in the previous post, ES7 is out and has more features available to improve JavaScript. But we will still cover ES6 in this blog post for the same reasons I mentioned in my previous post. Enough talking. Let’s dive into another brief intro to the awesome features brought to us with ES6.

What we will be doing in this ES6 tutorial

ES6 Functions

Functions

There are several new features added to functions in JavaScript. These features are very useful in the sense that it makes functions easier to write and code easier to understand.

The Arrow Functions

Calling functions is done in a real functional programming fashion. You precise the function’s argument and use an arrow before the function’ s body. Just as what is shown in this example.

/// Normal functions in javascript
const upperizedNames = ['Lina', 'John', 'Jannet'].map(function(name) { 
  return name.toUpperCase();
});

//Arrow Functions
const upperizedNames = ['Lina', 'John', 'Jannet'].map(
  name => name.toUpperCase()
);

/// Normal functions in javascript

const upperizedNames = ['Lina', 'John', 'Jannet'].map(function(name) {

return name.toUpperCase();

});

//Arrow Functions

const upperizedNames = ['Lina', 'John', 'Jannet'].map(

name => name.toUpperCase()

);

To better understand, the code above can be written like this;

//Instead of emidiately returning, you add a body to the function.
const upperizedNames = ['Lina', 'John', 'Jannet'].map(
  name => {return name.toUpperCase()}
);

//Instead of emidiately returning, you add a body to the function.

const upperizedNames = ['Lina', 'John', 'Jannet'].map(

name => {return name.toUpperCase()}

);

Default Function Parameters

With ES6, it is now possible to create functions which can optionally have arguments passed to them. This is done by setting default values to the function’s parameters. This is easy as shown below.

//Let us define Add function with optional parameters
function Add(x = 1, y = 1) {
  return x + y;
}

//Let's call Add with and without parameters
//Without arguements
console.log(Add());  //output = 2

//with arguements
console.log(Add(0,3)); //output = 3

//Let us define Add function with optional parameters

function Add(x = 1, y = 1) {

return x + y;

}

//Let's call Add with and without parameters

//Without arguements

console.log(Add()); //output = 2

//with arguements

console.log(Add(0,3)); //output = 3

You can also use this feature when your functions have arrays or objects as parameters. Here is a demo.

//Default parameter as array
function rectangleArea([width = 5, height = 5] = []) {
  let area = width * height;
  return `Area of reactangle ${width} x ${height} = ${area}`;
}

//HEre are the ways you can call this function
/*
rectangleArea([]);
"Area of reactangle 5 x 5 = 25"
rectangleArea([10]);
"Area of reactangle 10 x 5 = 50"
rectangleArea(); //Returns  "Area of reactangle 10 x 5 = 50" 3
//This would have caused an error if the parameter wasn't = [] in the end.
*/

//THe same applies to Objects as default parameters.
function combineNames({name1 = 'John', name2 = 'Doe'}={})
{
    return `Your name is ${name1} ${name2}.`;
}

//Default parameter as array

function rectangleArea([width = 5, height = 5] = []) {

let area = width * height;

return `Area of reactangle ${width} x ${height} = ${area}`;

}

//HEre are the ways you can call this function

rectangleArea([]);

"Area of reactangle 5 x 5 = 25"

rectangleArea([10]);

"Area of reactangle 10 x 5 = 50"

rectangleArea(); //Returns "Area of reactangle 10 x 5 = 50" 3

//This would have caused an error if the parameter wasn't = [] in the end.

//THe same applies to Objects as default parameters.

function combineNames({name1 = 'John', name2 = 'Doe'}={})

{

return `Your name is ${name1} ${name2}.`;

}

The new Classes

Classes in ES6 are better than in previous JavaScript versions, but it is still an illusion. Thanks to the constructor brought in ES6, creating classes is a lot easier. Here are the basics about objects.

class Man{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  presentYourSelf() {
    console.log(`My name is ${this.name} and I'm ${this.age} years old.`);
  }
}

//Define a new Man object
let man = new Man('John', '21');

man.presentYourSelf();
// Output : My name is John and I'm 21 years old.

class Man{

constructor(name, age) {

this.name = name;

this.age = age;

}

presentYourSelf() {

console.log(`My name is ${this.name} and I'm ${this.age} years old.`);

}

//Define a new Man object

let man = new Man('John', '21');

man.presentYourSelf();

// Output : My name is John and I'm 21 years old.

You can make classes inherit from other classes. You do this with the extend keyword. Inheritance here works as you will expect from other languages just that there are no private or public functions or properties.

class Woman extends Man{
    constructor(name, age){
        super(name, age)
}
}

let woman = new Woman('Jully', 22);

woman.presentYourSelf();
//Prints : My name is Jully and I'm 22 years old.

class Woman extends Man{

constructor(name, age){

super(name, age)

}

let woman = new Woman('Jully', 22);

woman.presentYourSelf();

//Prints : My name is Jully and I'm 22 years old.

office 365 16% reduction on signup.

Special Offer

Save 16% on your Microsoft Office 365 subscription Learn More >>

Conclusion

With these features explained briefly, fully understanding ES6 will be easy after reading through this post. And for any beginner, this brief introduction should be in my opinion easy to understand and quick to go through.

If you liked this post, or it was useful to you, please ? like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.

Read about 10 tips about challenges which Xamarin.Forms beginners may face with app development.

Follow me on social media and stay updated