https://github.com/babel/babel
Basic
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.
=>In javascript es6 we can do function shorthand to=>, to see more explain I will make an example like the following.
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:
=>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.
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")
let defaultParam. We have two parameters , they are param1 and param2.result = param2 || "Duski", It's means parameter || default value, then we save it on a variable that is result.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"
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:
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
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)
... in front of the variable we define fullname ...fullname....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.
Intro Setup babel and understand var,let,const
