Brief Javascript ES6 Tutorial For Beginners Part I

Hey, What’s up ?. Today we are going to talk about something different that is “Javascript”. Yeah, I know This blog seemed to be dedicated to Xamarin. Since most posts are about Xamarin. But today we will dive into something different as I said before.

Anyone following this blog might be wondering why I’m writing a post about ES6 Which was made available back in 2015. While there is ES7 which is there and already has newer features. Well, the answer is; I’m following Udacity’s Mobile Web Specialist Course with other African students in the ALC (Andela Learning Community). And This blog post is a Summary of what I’ve learned from the course on Javascript (ES6) We covered. I make this post for anyone willing to grasp the basics of ES6 in a few minutes. And also for any of my course mates who will need it.

What we will be doing during this ES6 Tutorial

  • ES6 Syntax

ES6 Syntax

This new Javascript version has several improvements as compared to former Javascript versions. one of which is the syntax. ES6 Code is cleaner and has a better syntax as we will discuss bellow.

  • Replace var

In former Javascript versions, variables were declared with the var keyword. And declaration with this method causes Hoisting (Variables are raised to the top of a function before execution). Thus the apperance of the let and const keywords to declare variables.

//declare a variable which can be reassigned to another value
let name = 'my name';

//defines a variable whose value is not reassignable
const PI = 3.14;
  • No more stress with complex strings

Formatting strings is easier. You can easily pass in variables in your string and write long multi line strings without the ‘+’ concatenation operator.

let student = {name : 'Harry', age : '18'};

//See how representing it is easier with ``

let description = `I'm a student my name is ${student.name}
                   I'm ${student.age} years old.`;

console.log(description);
  • Destructuring

This is one of my favorite features!. it permit’s you to extract easily data from arrays and objects. For example ;

//Extracting values from an array. 
const axis = [10, 25, -34];

const [x, y, z] = axis;

console.log(x, y, z);
//Extracting values from an object.
const man = {
  name: 'Peter',
  age: '30',
  height: 185
};

const {name, age, height} = man;

console.log(name, age, height);
  • Object Literal

Here is another way in which ES6 avoids useless repetitions in your code. This feature permits you to declare an object with already existing variables without redefining them as properties of the object.

  name = 'Peter';
  age = '30';
  height = 185;

const man = {
  name,
  age,
  height
};
///Creates a man object and automatically set its name, age and height properties

console.log(man);

//Prints : {name: "Peter", age: "30", height: 185}
  • The Cool For Of Loop

Looping through items is easy thanks to the for of loop. This loop is similar to the foreach loop in C#. It iterates through a collection of objects and allows you to process each. It does so in a clean fashion.

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 for(let number of numbers)
{
  console.log(number);
}
  • Spread it

The new spread operator (…) permits Javascript developers to expand the content of iteratable objects extremely easily.

const weapons = ["gun", "sword", "spirit bomb"];
console.log(...weapons);
  • Get The Rest of it

With this operator (three dots too)  you can retrieve an indefinite number of operators from objects like arrays.

const weapons = ["gun", "sword","catana", "spirit bomb", "shuriken"];
const [weapon1, weapon2, weapon3, ...otherWeapons] = weapons;
console.log(weapon1, weapon2, weapon3, otherWeapons);

This operator could be also used to make functions with an indefinite number of parameters. This type of function is called variadic functions.

function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}

Conclusion

This is the first part of a series of posts on ES6. I hope it helps anyone to grasp quickly the basics of ES6.

office 365 16% reduction on signup.
office 365 16% reduction on signup.

Special Offer

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

 

Follow me on social media and stay updated

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 development.

Follow me on social media and stay updated

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.