Brief Javascript ES6 Tutorial For Beginners Part I

Hello, everyone. Today, I'm going to speak about Javascript (ES6). Well, any one following me may wonder why I blog about JS, since I always talk about .Net. Also, you may wonder 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. The answer is, though ES7 is arround, understanding the concepts brought to you in ES6 will enhance you skills and make you handle the new ES7 features easily. This is most especially true for anyone who may still be using Javascript versions prior to ES6. Let's dive in.

Repository

https://github.com/javascript

What we will Learn

Introductory notions to ES6 Syntax.

• Introduction to ES6 Syntax

Requirements

You need just the basic requirements for this tutorial, that is a modern web browser like Chrome, Firefox... And you should know how to access you browser's console, since all the code can be typed there and results seen immediately.

Difficulty

• The difficulty level is Basic

Tutorial Contents

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 appearance of the let and const keywords to declare variables. Here is a small demo:

//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;
}

Proof of Work Done

Link on Github