create account

Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const by duski.harahap

View this thread on: hive.blogpeakd.comecency.com
· @duski.harahap · (edited)
$30.77
Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const
### 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 ](https://babeljs.io/). 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**

```  javascript
{
// dependencies
}
```
after you provide the **package.json** file you can continue the installation process as shown below

![Screenshot_1.png](https://ipfs.busy.org/ipfs/QmYeTwyiZDxpBW1UuqNCKdSBgc6YjuC3if8vXE3xT8iTuR)

![Screenshot_3.png](https://ipfs.busy.org/ipfs/QmUZeb2G48Q5iRczP96Bp7dG18vC22MfgUvkd4CR4dPkFs)


- **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**

``` javascript
{
	"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"```, ```src``` is the folder name whose contents we will compile and ```dist``` is 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**
``` javascript
let x 
x = 10
console.log(x)
```

**Compile:**
![Screenshot_5.png](https://ipfs.busy.org/ipfs/QmchEdJKjUFYF2vgMNAwfCBA7kr74oW1VmMLLXRbsk8u26)

**Result:**
![Screenshot_4.png](https://ipfs.busy.org/ipfs/QmVeNjMofSJMAocy3A7D7B3R7YQbV9FTMsoAAGuc3n9iMV)

**Use in html**

``` 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>
```

![Screenshot_6.png](https://ipfs.busy.org/ipfs/QmNjWSxdNZNgveTUu9a4xHE779pD6K7QnvwhieDbSNuLuw)

- 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:**
``` javascript
var title = "Thor Ragnarok";
var title = "Avenger infinity war";
console.log(title);
```
![ezgif.com-video-to-gif (2).gif](https://ipfs.busy.org/ipfs/QmQ5uqvpdF8KK5oJH4LYDLfU7PrEbBdoeZaH9Fyx3Zpx3E)

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.
<br>
- **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**

``` javascript
let title = "Thor ragnarok"
let title = "Avenger infinity war"
console.log(title)
```
![ezgif.com-video-to-gif (3).gif](https://ipfs.busy.org/ipfs/QmPo6SdEN4zLTi4W7yzqEXDF4H4wReX5wZEeoThqA7Tvwm)

- 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 the ```let```. So when we use ```let``` to 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**
``` javascript
var title = "Thor ragnarok"
// scope
{
	var title = "Avenger infinity war"
	console.log(title)
}
console.log(title)
```
**Result:**
![Screenshot_8.png](https://ipfs.busy.org/ipfs/QmRqbJ2EwNHshYmSbGGZsL6qd44rj7GoVwSK78MB45fVrr)

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 {}```.
<br>
**Use let : Code**
```javascript
let title = "Thor ragnarok"
// scope
{
	let title = "Avenger infinity war"
	console.log(title)
}
console.log(title)
```

**Result**
![Screenshot_9.png](https://ipfs.busy.org/ipfs/QmSGLySUWWXHcer5qxugP6znMd2yboHRjhF2hLmNDELXTK)

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.
<br>
- **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```**
``` javascript
// try to reassign
const name  = 'Duski'
const name  = 'Milia'
//let see in the console
console.log(name)
```
**Result**
![Screenshot_12.png](https://ipfs.busy.org/ipfs/QmfVh1w3btXcDuQhbxXib8AfUkSsvLfayyDkm4kwWsPC4L)

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:

``` javascript
const obj = {
	name : "Duski",
	age  : 22
}
//try to redeclare
const obj = {
	name : "Millea",
	age  : 21
}
//do console
console.log(obj)
```
**Result**
![Screenshot_14.png](https://ipfs.busy.org/ipfs/QmP9i9egdr32bZyYiaN6sVWuBHAqviUyjAA2psWKjrok6u)

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**

``` javascript
const obj = {
	name : "Duski",
	age  : 22
}
//add data
obj.hobby = 'Traveling'
//do console
console.log(obj)
```
**Result**
![Screenshot_15.png](https://ipfs.busy.org/ipfs/Qma4qtK1wtrtjsjDie2TyVuwk7cSS9qHyWuDkiXvafH7go)

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...

#### Proof of work done
https://github.com/milleaduski/learnEs6
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 111 others
properties (23)
authorduski.harahap
permlinklearn-es6-part-1-intro-setup-babel-and-understand-var-let-const
categoryutopian-io
json_metadata{"tags":["utopian-io","tutorials","javascript","es6"],"image":["https://ipfs.busy.org/ipfs/QmYeTwyiZDxpBW1UuqNCKdSBgc6YjuC3if8vXE3xT8iTuR","https://ipfs.busy.org/ipfs/QmUZeb2G48Q5iRczP96Bp7dG18vC22MfgUvkd4CR4dPkFs","https://ipfs.busy.org/ipfs/QmchEdJKjUFYF2vgMNAwfCBA7kr74oW1VmMLLXRbsk8u26","https://ipfs.busy.org/ipfs/QmVeNjMofSJMAocy3A7D7B3R7YQbV9FTMsoAAGuc3n9iMV","https://ipfs.busy.org/ipfs/QmNjWSxdNZNgveTUu9a4xHE779pD6K7QnvwhieDbSNuLuw","https://ipfs.busy.org/ipfs/QmQ5uqvpdF8KK5oJH4LYDLfU7PrEbBdoeZaH9Fyx3Zpx3E","https://ipfs.busy.org/ipfs/QmPo6SdEN4zLTi4W7yzqEXDF4H4wReX5wZEeoThqA7Tvwm","https://ipfs.busy.org/ipfs/QmRqbJ2EwNHshYmSbGGZsL6qd44rj7GoVwSK78MB45fVrr","https://ipfs.busy.org/ipfs/QmSGLySUWWXHcer5qxugP6znMd2yboHRjhF2hLmNDELXTK","https://ipfs.busy.org/ipfs/QmfVh1w3btXcDuQhbxXib8AfUkSsvLfayyDkm4kwWsPC4L","https://ipfs.busy.org/ipfs/QmP9i9egdr32bZyYiaN6sVWuBHAqviUyjAA2psWKjrok6u","https://ipfs.busy.org/ipfs/Qma4qtK1wtrtjsjDie2TyVuwk7cSS9qHyWuDkiXvafH7go"],"links":["https://github.com/babel/babel","https://babeljs.io/","https://github.com/milleaduski/learnEs6"],"app":"steemit/0.1","format":"markdown"}
created2018-08-08 15:30:06
last_update2018-08-09 20:05:33
depth0
children4
last_payout2018-08-15 15:30:06
cashout_time1969-12-31 23:59:59
total_payout_value23.386 HBD
curator_payout_value7.385 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,172
author_reputation60,094,717,098,672
root_title"Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,538,536
net_rshares22,651,677,139,693
author_curate_reward""
vote details (175)
@portugalcoin · (edited)
$0.02
Thank you for your contribution.

- We recommend that you edit your tutorial and place the babel repository.

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  ,
properties (23)
authorportugalcoin
permlinkre-duskiharahap-learn-es6-part-1-intro-setup-babel-and-understand-var-let-const-20180808t223100506z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-08-08 22:31:00
last_update2018-08-09 19:46:18
depth1
children2
last_payout2018-08-15 22:31:00
cashout_time1969-12-31 23:59:59
total_payout_value0.016 HBD
curator_payout_value0.004 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length278
author_reputation599,460,462,895,094
root_title"Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,571,265
net_rshares16,023,679,079
author_curate_reward""
vote details (2)
@duski.harahap · (edited)
I've edited the repo mod.. @portugalcoin
properties (22)
authorduski.harahap
permlinkre-portugalcoin-re-duskiharahap-learn-es6-part-1-intro-setup-babel-and-understand-var-let-const-20180809t200851211z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1","users":["portugalcoin"]}
created2018-08-09 20:08:54
last_update2018-08-09 20:09:27
depth2
children1
last_payout2018-08-16 20:08:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation60,094,717,098,672
root_title"Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,678,442
net_rshares0
@portugalcoin ·
Thank you for your contribution.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/21321313).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
properties (22)
authorportugalcoin
permlinkre-duskiharahap-re-portugalcoin-re-duskiharahap-learn-es6-part-1-intro-setup-babel-and-understand-var-let-const-20180809t211432255z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/8/21321313","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-08-09 21:14:33
last_update2018-08-09 21:14:33
depth3
children0
last_payout2018-08-16 21:14:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length524
author_reputation599,460,462,895,094
root_title"Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,683,280
net_rshares0
@utopian-io ·
$0.02
Hey @duski.harahap
**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
πŸ‘  ,
properties (23)
authorutopian-io
permlinkre-learn-es6-part-1-intro-setup-babel-and-understand-var-let-const-20180812t214508z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-12 21:45:09
last_update2018-08-12 21:45:09
depth1
children0
last_payout2018-08-19 21:45:09
cashout_time1969-12-31 23:59:59
total_payout_value0.018 HBD
curator_payout_value0.004 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length305
author_reputation152,955,367,999,756
root_title"Learn Es6 part#1 Intro, Setup Babel, and Understand Var, Let, Const"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,991,892
net_rshares16,519,965,092
author_curate_reward""
vote details (2)