Do you know ES6 - Part 2
Tags: es6, javascript, templateliterals, forof
Published: 2019-03-31 20:51:17

---
title: Do you know ES6 - Part 2
published: true
description: Crash course in JS ES6
tags: #ES6, #javascript, #Templateliterals, #ForOf
cover_image: https://i.imgur.com/Wnii49k.png
series: Crash course in JS ES6

---


## Before you start reading this part, We have discussed some of ES6 features [here](https://dev.to/mkhy19/do-you-know-es6---part-1-387m)

As we discussed before, ES6 is JS. 
ES6 is about the next generation of Javascript. In general, ES6 allows us to write clean and robust react apps and this help us to do more powerful things.

Content:
* Array functions
* Template literals
* Object literals
* For Of

______________

## Array functions

There are a lot of functions we can do on array, Such as map, concat, join, splice and there are many of these methods. All these methods aren't ES6 but normal js.

**map** is built-in array method that return a real new array. 

```javascript
const numbers = [1,2,3];
const doubleNumbers = numbers.map((num) => {
  return num*2;
});
   
console.log(numbers);		//[1, 2, 3]
console.log(doubleNumbers);	//[2, 4, 6]
```
**concat** is a method that joins two or more arrays and returns a new array with the values of the joined arrays

```javascript
const myName = ["Mohamed", "Khaled"];
const myInfo1 = ["Computer", "Science", "Student"];
const myInfo2 = ["Front End Developer"];

const concatTwoArray = (arr1,arr2,arr3) => arr1.concat(arr2,arr3);

console.log(concatTwoArray(myName,myInfo1,myInfo2));
```
**join** is a method that joins the elements of an array into a string and returns the final string. 
The final string will be separated by a specified separator such as the default separator which is comma (,), bar (|), dash (-), space or whatever separator. 

```javascript

let fruits = ["Mohamed", "Khaled", "Yousef", "Mohamed", "Ali"];
let energy1 = fruits.join();
let energy2 = fruits.join(" ");
let energy3 = fruits.join("|");
let energy4 = fruits.join(" and ");
console.log(energy1, energy2, energy3, energy4);
```

**splice method** is that adds elements to an array and removes elements from an array, and returns the final element.

In the next example, We remove one element from index 2 (Third element). Then we remove 3 elements from index and add 2 elements [Computer and Science]

```javascript
let names = ["Mohamed", "Khaled", "Yousef", "Mohamed", "Ali"];
names.splice(2, 1);
console.log(names);

names.splice(2, 3, "Computer", "Science");
console.log(names);
```

[Read more](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#
)

______________

## Template literals
Before we define what is Template literals lets remember that in normal JS to concatenate strings together, It was by using the string concatenation operator ( + ). Also you can use the string's concat() method.

```javascript
const my_name = 'Mohamed';
const message0 = 'My name is ' + my_name;
console.log(message0);
```

In fact it isn't good practice to use + operator to concatenate strings because it gets more complicated when you need to build multi-line strings.
```javascript
const fstName1 = 'Mohamed', lastName1 = 'Khaled';
const message1 = 'My name is ' + fstName1 + '.\n\n' + 'My last name is ' + lastName1;
console.log(message1);
```

So Template Literals solve the multi-line strings problem.
Template literals are string literals that include embedded expressions.
Denoted with backticks (` `) instead of single quotes ('') or double quotes (""). Template literals can contain placeholders which are represented using ${expression}. This makes it much easier to build strings.

By using template literals, you can drop the quotes along with the string concatenation operator. In general, Template Literals is used for easier string interpolation.

```javascript
const my_Name = 'Mohamed';
const message1 = `My name is ${my_Name}`;
console.log(message1);
```
Also, you can reference the object's properties inside expressions.
```javascript
const myName = {
  name: 'Mohamed',
  age: 23
};

const myFather = {
  name: 'Khaled'
}

let message2 = 'My name is ' + myName.name + '. I am ' + myName.age + ' years old' + ' and my father name is ' + myFather.name;
console.log(message2);

let message3 = `My name is ${myName.name}. I am ${myName.age} years old and my father name is ${myFather.name}`;
console.log(message3);
```

What about the multi-line example from before?
```javascript
const fstName = 'Mohamed', lastName = 'Khaled';
const message0 = `My name is ${fstName}, 

My last name is ${lastName}`;
console.log(message0);
```
**Destructuring Arrays and Template Literals**
Cool, I think you remember the Destructuring Arrays from [Part 1](https://dev.to/mkhy19/do-you-know-es6---part-1-387m) . 
Here I print my name in one line and multi-line
```javascript
const names = ['Ahmed', 'Mohamed', 'Ali', 'Sarah', 'Khaled', 'John', 'Adel', 'Yousef'];

const [,First, , ,Second, , , Third] = names;

let myName = `My name is ${First} ${Second} ${Third}`;
console.log(myName);

myName = `My name is
1. ${First}
2. ${Second}
3. ${Third}`;
console.log(myName);
```
______________

## Object literals shorthand

One of ES6 features is to remove repetition to makes the syntax easier to read and more concise.

For example, when we write an object and assign the property names as the variable names such as first: first, second: second.

```javascript
//Normal JS Object
let first = 'Mohamed';
let second = 'Khaled';
let third = 'Yousef';

const myName = {
  first: first,
  second: second,
  third: third
};

console.log(myName);
```

**Object literal shorthand for initializing properties**
In fact we don't need this repetition so we can remove the duplicate variables names from object properties 
```javascript
let first = 'Mohamed';
let second = 'Khaled';
let third = 'Yousef';

const myName = {
  first,
  second,
  third
};

console.log(myName);
```

The same in normal JS when we create methods in the object
In the next example, We create an anonymous function in our object and assigned it to the property writeMyName and the same with mul function

```javascript
let first = 'Mohamed';
let second = 'Khaled';
let third = 'Yousef';

let fs = 5, sec = 7;

const myName = {
  first: first,
  second: second,
  third: third,
  
  fs: fs,
  sec: sec,

  writeMyName: function(x,y,z) {
      return first.concat(second,third);
  },
  
  mul: function(a,b) {
      return fs*sec;
  }

};

console.log(myName.writeMyName());
console.log(myName.mul());
```

**Object literal shorthand for writing methods**
In ES6, We don't need to the function keyword to define a method

```javascript
let first = 'Mohamed';
let second = 'Khaled';
let third = 'Yousef';

let fs = 5, sec = 7;
const myName = {
  first: first,
  second: second,
  third: third,
  
  fs: fs,
  sec: sec,
  writeMyName(x,y,z) {
      return first.concat(second,third);
  },
  
  mul(a,b) {
      return fs*sec;
  }

};

console.log(myName.writeMyName());
console.log(myName.mul());
```

______________

## The for...of loop
The for...of loop is one of looping types that used to iterate
Types of for loops such as for loop, the for..in loop, forEach loop and for..of loop.

Lets remind all loop types:
**The for loop**
The problem is that JS has to look up the length of the array on every iteration. This means Js has to keep counting the length of the array and the exit condition.

In this example, we’re using the variable i as a counter to keep track of the loop and to access values in the array. We’re also using numbers.length to determine the exit condition for the loop.

```javascript
const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
```

**The for...in loop**
The for...in loop improves upon the problem of the for loop by eliminating the counting logic and exit condition.
But, you still have to deal with the issue of using an index to access the values of the array.
```javascript
const numbers = [1, 2, 3, 4, 5];

for (const index in numbers) {
  console.log(numbers[index]);
}
```

**The forEach**
Is actually an array method, so it can only be used exclusively with arrays.
```javascript
const numbers = ['One', 'Two', 'Three', 'Four'];
numbers.forEach(function(num) {
  console.log(num);
}); 

const doubleNumbers = [1, 2, 3, 4];
doubleNumbers.forEach((num) => { console.log(num*2); });
```

**The For...of loop**
Now, What about the For...of Loop
For...of Loop is the most concise version of all the for loops because its used to loop over any type of data that is iterable objects.


```javascript
const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}
```

Also, You can stop or break a for..of loop at anytime.
In the next example, We print even numbers
```javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const num of numbers) {
  if (num % 2 === 1) {
    continue;
  }
  console.log(num);
}
```
Finally, lets use for...of loop that loops through each day in the days array
and capitalizes the first letter of the day
```javascript
const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

const capitalize = st => st.charAt(0).toUpperCase().concat(st.slice(1));

for (const day of days) {
  console.log(capitalize(day));
}

```

###Finally … [Here] (https://github.com/mkhy19/Crash-courses/tree/master/JS/ES6) is the repo, You can find all source code.