Repository
https://github.com/babel/babel
What Will I Learn?
- Setup Babel
- Understand the difference between var, let, and const
Resources
- Babel - https://babeljs.io/
Difficulty
Basic
Tutorial Content
This time, we will learn about javascript es6 (JS ES) and we will learn in detail the syntax found in es6, the syntax in es6 is widely used by modern frameworks today, so for those of you who want to learn frontend frameworks like React, Angular, and Vue. You should study first or at least be familiar with javascript es6 syntax so that you are easier to learn these frameworks. This tutorial will discuss all javascript es6 (JS ES) and this is the first tutorial. We will just get acquainted with es6 javascript.
What is es6 ??
For those of you who are familiar with javascript you will know the previous generation of javascript, namely es2015 or es15, now we will discuss the next generation, namely es16, ES stands for ECMA Script. es16 introduces syntax or a new method of writing which aims to make it easier for developers to build a code quickly and efficiently. to overcome it you can use Babel . Babel will compile es16 javascript into normal javascript so that it can be used in all browser versions.
What is Babel?
Because javascript es6 doesn't run on all browsers we need tools that are babel. Babel is a useful tool for compiling es6 javascript into normal javascript.
- Install Babel
To install it we can go to the babel https://babeljs.io/, There are several ways to install it, but most commonly we can install it via babel-cli with NPM, like the example below:
Install Babel:
npm install --save-dev babel-cli babel-preset-env
Create your project folder and open the command prompt in the folder. After installing you will automatically get the package.json file as a result of the installation, before installing we must first provide the package.json file as follows:
package.json
{
// dependencies
}
after you provide the package.json file you can continue the installation process as shown below
- Use Babel
for usage, we will create a shortcut that we will call when we want to build the project. We need to add it to package.json, we can see an example like this:
Package.json
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
},
"scripts":{
"build": "babel src -d dist"
}
}
- We add
"scripts":{}to package.json, "build": "babel src -d dist":"build"as a command to compile will be run like this"npm run build",srcis the folder name whose contents we will compile anddistis folder that will save the compile.- Please make the folder that you registered is in package.json, namely src and dist.
to test whether Babel is working properly we can make an example by creating an index.js file in the scr folder.
src/index.js
let x
x = 10
console.log(x)
Compile:
Result:
Use in html
<!DOCTYPE html>
<html>
<head>
<title>Learn Es6 - Duski Tutor</title>
</head>
<body>
<h1>Learn javascript es6</h1>
<script type="text/javascript" src="dist/index.js"></script>
</body>
</html>
- We can import javascript that we compile as follows
<script type="text/javascript" src="dist/index.js"></script> - If we run the index.html file we will see the results of
console.log ()in the index.js that we have created above. We have successfully run the babel function well, but actually, we haven't learned about es6, we only compile es6 javascript to normal javascript so that it can run in all browsers.
Introduction of var, let, and const
on vanilla javascript, if we want to make a variable we generally make it with var, But in javascript es6 we know new things namely let and const. many developers who use JavaScript, many suggest replacing var with let. We will see an explanation of var, let, and const.
- Var
So far var has been used for years on javascript to create a variable, according to the experience of developers, many often use the same variable name, so the value of a variable becomes replaced, Because of the nature of var that can be a global variable that can be used anywhere in the script that we make, this is usually called the function scope, for more details we can see the case example as shown below:
Example:
var title = "Thor Ragnarok";
var title = "Avenger infinity war";
console.log(title);
We can see from the example above, var will automatically replace the value that was previously defined with the new value, so after we have assigned the value to a variable, the variable can be replicated with a new value, of course, this will be a problem, if our script has been large and we forget that one of the variables has been assigned before.
- Let
let is the new syntax introduced in ECMA Script, We will see what the difference is if we use let. I will make an example like the following.
Example 1: Normal
let title = "Thor ragnarok"
let title = "Avenger infinity war"
console.log(title)
- If we use es6 javascript, we don't need semicolon
;anymore, because modern JavaScript is no longer used it. - We can see when we run compile
npm run build, babel automatically notifies there is an error, and the error occurs because the duplicate variable we use in thelet. So when we useletto create a variable, we cannot use the same name to create a new variable, of course this is safer if our script code is bigger, we don't need to worry about the variable being replaced.
Example 2 Scope
One of the advantages of let is that it can be used on certain scope{}, So the value of the variable outside the scope {} will not be replaced even with the same variable name. I will give an example of using var and let as a comparison.
Use Var : Code
var title = "Thor ragnarok"
// scope
{
var title = "Avenger infinity war"
console.log(title)
}
console.log(title)
Result:
We can see if we use var the first value in assign is "Thor ragnarok", but this value can be re-assigned even if it is assigned in block scope {}.
Use let : Code
let title = "Thor ragnarok"
// scope
{
let title = "Avenger infinity war"
console.log(title)
}
console.log(title)
Result
We can see let does not replace the value of the variable that has been assigned for the first time, namely 'Thor ragnarok', let can be reused with the same name but must be within the scope {}, that means the variable let is outside the scope {} will not affect the variable in the scope even though it has the same name, of course, this will be an advantage to avoid redefined variables.
- Const
const is a type of variable whose value cannot be changed anymore, but this does not apply to the type of data object, because the properties of the object are mutable. We will see an example as below:
Use const
// try to reassign
const name = 'Duski'
const name = 'Milia'
//let see in the console
console.log(name)
Result
We can see through the picture above, we cannot redeclare const variables with the same name. this will be an error, but this does not apply to type data objects.
Use const in object
What will happen if we use const on the data object type, we can see in the example below:
const obj = {
name : "Duski",
age : 22
}
//try to redeclare
const obj = {
name : "Millea",
age : 21
}
//do console
console.log(obj)
Result
We see in the picture above we still can't redeclare const obj because it can't. Then what's the difference with let? const on objects also can't redeclare, but we can add data to objects because the nature of the data object type is mutable. let's look at the following example.
Add data to const objects
const obj = {
name : "Duski",
age : 22
}
//add data
obj.hobby = 'Traveling'
//do console
console.log(obj)
Result
We can see from the picture above on the type of data object we can add data to the object that have assigned.
We have finished our lesson in this first tutorial, indeed this tutorial is quite basic for those of you who have known javascript for a long time, but my goal is junior in javascript and who want to know about the latest es6 javascript. I hope the explanations and examples I give are better and clearer than you can find in other tutorials and hopefully, you can help you manage es6 javascript, see you in the next tutorial about es6. thank you...