Java Script ES6

JavaScript ES6 brings us new syntax and some other features to make our life easy. It allows you to write less code and make more. ES6 gives us the ability to provide many features. Strings, class destructions, Modules, arrow functions. Let’s dive in and go for deeper understanding.

const and let

const is a new keyword in ES6 for declaring variables. Const has some difference than var. When we assign anything with const we cant re-assign again. Its immutable variable when it is used with objects.

This is really useful for targeting the selectors. For example, when we have a single button that fires an event, or when you want to select an HTML element in JavaScript, use const instead of var. This is because var is ‘hoisted’. It’s always preferable to use const when you don’t want to reassign the variable .

ES5
var example1 = document.getElementById('example1')
ES6 
const example2 = document.getElementById('example2')

In the code above, const will not change and cannot be reassigned. If you try to give it a new value, it will return you an error.

let name = "Soner"
    name = "George"
console.log(name)
//output ---> George

If you remember what I said about const that when you assign any value you can’t change it. But it is different for let. If you assign any value the variable which you declared with let you can re-assign it again. It makes a mutable variable.

let and const has some mutual features. They are both blocked-scope. Its means that the variable is only available within its scope.

Arrow functions

The arrow function is the most extreme change in JavaScript. It’s very convenient when you need to implement a callback function. It also looks modern and unique. Let’s see the two functions with arrow and without arrow function.

//ES5
function myFunction(name) {
     return 'Hello' + name;
}
console.log(myFunc('Soner'))
//output
//Hello Soner

With Arrow Function

const myFunc = name

const myFunc = name => {
return `Hi ${name}`
}
console.log(myFunc('Soner')) 
//output:Hi Soner
//or even without using arrow or implement `return` keyword 
const myFunc = name => `Hi ${name}`
console.log(myFunc('Soner')//
//output: Hi Soner

As you see, the arrow function seems very handy , readable and clean! We don’t need to use ES5 anymore.

Also, you can use Arrow function with map, filter, and reduce built-in functions.

//ES5
const array=[ 'John','Jenny','Billy',5]
let Arr1 = array.map(function(item) {
return item;
});
console.log(Arr1);
//output (4) ['John','Jenny','Billy',5]
ES6 Syntax 
let Arr2 = array.map(item => item );
console.log(Arr2)
output (4) ['John','Jenny','Billy',5]

The map function with arrows looks more clear and readable than map in ES5. With ES6 you can write shorter and smarter code. You can use the same with filter and reduce.

Template Literals

Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.

The old syntax:

//ES5
function myFunc1(name,age){
return 'Hi' + name + 'Your age is' + age + 'year old';
}
console.log(myFunc1('Soner', 40))
//output --> Hi Soner, Your age is 40 year old. 

With new ES6 syntax:

const myFunc =(name,age)=>{
return `Hi ${name}, Your age is ${age} years old!`;
}
console.log(myFunc('Soner', 40))
//output--> Hi Soner, Your age is 40years old

As you see its also big difference in syntax when you create a template with ES6. When we are manipulating in array which has strings with ES6, string look more organized and looks better than ES5.

Default parameters

When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.

So, when you forget to write the parameter, it won’t return an undefined error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter t, and it will not return an error!

Look at this example:

const myFunc =(name,age)=>{
return `Hello ${name} you age is ${age} years old?`
}
console.log(myFunc('Soner'))
//output: Hello Soner your  age is undefined years old 

The function above returns undefined, because we forgot to give it the second parameter age.

But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter!

const myFunc =(name,age=40 )=>{
return `Hello ${name} you age is ${age} years old?`
}
console.log(myFunc('Soner'))
//output: Hello Soner your age is 40  years old? 

As you see, the function returns a value even though we missed the second parameter. Now with the default parameter we can handle the error in advance.

Array and object destructing

Destruction makes the assignment of the values of an array or object to the new variable easier.

The old syntax:

//ES5 syntax 
const contacts = {
name: 'Soner',
lastName:'Mezgitci',
age: 40
}
let name = contacts.name;
let lastName = contacts.lastName;
let myAge = contact.age;
console.log(name)
console.log(lastName)
console.log(myAge)
//output
Soner
Mezgitci
40

With ES6 syntax:

const contacts = {
name:'Soner',
lastName:'Mezgitci'
age:40
}
let{name,lastName,age} =contacts
console.log(name)
console.log(lastName)
console.log(age)
output:
Soner
Mezgitci
40

With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.

Note: if you assign a variable that is not identical to the name of property, it will return undefined. For example, if the name of the property is name and we assign it to a username variable, it will return undefined.

We always have to name the variable the same as the name of the property. But in case we want to rename the variable, we can use the colon : instead.

//ES6
const contacts={
   name : 'Soner',
   lastName:'Mezgitci',
   age: 40
}
let{name:otherName,lastName,age} = contacts
console.log(otherName)
 output:
 Soner

For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.

const Arr=['Emre','Mert','Gina',35];
let [value1,value2,value3] =Arr;
console.log(value1)
console.log(value2)
console.log(value3)
//output
//Emre
//Mert
//Gina

Import and export

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

For example, we have two files. The first is named detailComponent.js and the second is named homeComponent.js.

In detailComponent.js we are going to export the detail function.

//ES6
export default function detail(name,age){
   return `Hello ${name}, your age is ${age} years old!`;
}

And if we want to use this function in homeComponent.js, we will just use import.

import detail from './detailComponent'
console.log('Soner', 40))
//output: Hello Soner, your age is 40 years old!

If we want to import more than one module, we just put them within curly brackets.

import{detail,userProfile, getPosts} from './detailComponent'
console.log(detail('Soner', 40))
console.log(userProfile)
console.log(getPosts)