Learn Es6 part#2 Arrow Function, Default Parameter, and Rest spread

Repository

https://github.com/babel/babel

What Will I Learn?

• Arrow function
• Default Parameter
• Rest and spread

Requirements

• Javascript es6
• Basic Vue.js

Resource

• babel https://github.com/babel/babel

Difficulty

Basic

Tutorial Content

We will continue our tutorial on es6 if in the previous tutorial we have setup the babel and understand the uses and differences of var, let, and const. in this tutorial, we will discuss the functions that exist in javascript es6. We will see the difference if we use normal javascript. we will also learn what is the default parameter, for that we start the tutorial.

Arrow Function =>

In javascript es6 we can do function shorthand to=>, to see more explain I will make an example like the following.

• Normal javascript function

const array = ["Duski","Millea","Aliandra"];
//foreach data
array.forEach(function(data){
    console.log(data);
});

We create an array[] that I store in a const array, then we will do foreach() as usual, we will see the results like this:

• Function shorthand =>

In javascript es6, we can use arrow function shorthand to our code. We can remove the function and replace it with =>. for more details we can see the example below:

const array = ["Duski","Millea","Aliandra","ArrowFunction"];
//foreach data
array.forEach((data)=>{
    console.log(data);
});

We will create a new array const array = ["Duski","Millea","Aliandra","ArrowFunction"]; to see the difference. array.forEach((data)=>{ }); We can remove the function word and replace it with =>, place it after the parameter. We can see the results as follows:

We can make it shorter, If the parameter in the function is only one, we can remove () in our code. We can see the sample code below:

const array = ["Duski","Millea","Aliandra","Shorter"];
//foreach data
array.forEach(data=>{
    console.log(data)
})

we will create a new array const array = ["Duski","Millea","Aliandra","Shorter"];, remove () in parameter (data) remove to just data.

Default Parameter

Now we will know the writing in the es6 syntax, that is the default parameter. Default parameters are commonly used if we forget to pass parameters. we can give the default value. We will see an example like the following.

let defaultParam = (param1, param2)=>{
result = param2 || "Duski"
console.log("My name :" + param1 + "Lastname:" + result)
}
//call the function
defaultParam("Millea")

• We will create a function and define the function in the variable let defaultParam. We have two parameters , they are param1 and param2.
• We can make default parameter like this result = param2 || "Duski", It's means parameter || default value, then we save it on a variable that is result.
• Then we call that function, but we will only pass one parameter defaultParam("Millea"), to test whether our default parameters are running properly. for more details we can see the picture below:

There is also writing that is shorter than the one above, we will make it like this:

let defaultParam = (param1, param2 = "InlineDefault")=>{
console.log("My name : " + param1 + " Lastname:" + param2)
}
//call function
defaultParam("Millea")

we will remove param2 = param2 || "Duski" and replace it with param2 = "InlineDefault"

Rest and Spread

We will continue to discuss es6 syntax, namely rest and spread. for those of you who often or have ever used Vuex on Vue.js you must be familiar with ...mapActions(), ... mapGetters(),... mapState(). The code uses ..., but have you ever wondered what is the use of ....If you don't know it then we will learn it here:

• Javascript

let restSpread = (param1, param2, param3)=>{
console.log("My name: " + param1 + " Lastname:" + param2 + " Age" + param3)
}
//not use rest and spread
let fullname = ["Millea","Duski", 21]
restSpread(fullname[0],fullname[1],fullname[2])

The example above we don't use rest and spread, We can access the array through its index like this fullname[i]. We will manually fill in each parameter and adjust the order of the data in the let fullname

• Javascript es6

let restSpread = (param1, param2, param3)=>{
console.log("My name: " + param1 + " Lastname:" + param2 + " Age :" + param3)
}
//rest and spread
let fullname = ["Millea","Duski harahap", 21]
restSpread(...fullname)

• The example above I have used rest and spread. we only need to use ... in front of the variable we define fullname ...fullname.
• By using ...fullname, its means that it will automatically retrieve all the data in the let fullname, then be spread into each parameter in let restSpread = (param1, param2, param3) => {}no matter how much data the variable is left fullname.

We have completed this tutorial, we have learned about arrow function syntax, default parameters, and rest and spread. I hope this tutorial can provide enough explanation for those of you who want to start building a frontend application. I hope this tutorial can be useful for you. thank you.

Curriculum

Intro Setup babel and understand var,let,const

Proof of work done

https://github.com/milleaduski/learnEs6