#### Repository
https://github.com/babel/babel

#### What Will I Learn?
- String literal
- Shorthand in object and function
- Destructuring object and assign value

#### Requirements
- Text editor
- Intermediate in javascript

#### Resources
- babel https://github.com/babel/babe


#### Difficulty
Basic

### Tutorial Content

This tutorial is a continuation tutorial from the es6 javascript tutorial series. we will learn more about es6 and know more about the benefits and usefulness of javascript in general. We will discuss topics that we often use and also we often practice on our projects or applications. I hope you have followed the previous tutorial so you are not confused. We will discuss two topics, namely ***string literals and destructing objects***. We just started this tutorial.

### String literal

There are several calls for this syntax, there are some that mention *literal templates, string literals or template strings*. But we will not discuss these differences, we will discuss how to use them and what are the differences if we use normal javascript.

- **Combine strings and variables**

For those of you who are familiar with javascript, they often combine strings and variables. string literals make it easier for us to combine these two things. we will see the difference below:

**Javascript:**
```
const name = "Duski";
const born = "12-12-1995";
//
let data = name+' was born '+born;
console.log(data);
```
The example above combines variables and strings ```name+' was born '+born;``` using javascript. we will see what the difference is by using syntax string literals. Certainly not a problem if the variables we combine are still few. but it will be complicated if we have to combine it with ```+ " " +```. Therefore we will make it easier by utilizing the string literal syntax that is in javascript es6.

**Using string literal:**

We will use string literals and will see how the differences are.
``` javascript
const name = "Duski";
const born = "12-12-1995";
//
let data = `My name is ${name}, I was born ${born}`;
console.log(data);
```
- If in javascript we use ```" "``` to wrap strings and variables, in javascript es6 we will wrap the string and variable with ``` ` ` ```. 

- If in javascript we separate variables and strings with ```+ var +```, then using string literals we don't need to separate them, but we will add them in this ```${var}```. We can see the results below by doing ```console.log ()```.

![Screenshot_10.png](https://ipfs.busy.org/ipfs/QmehUwyBqq1NHHS3sSst8wwVbAb9D3RGQumBMsYGt4yun1)
<br>
**Using string literal work with DOM:**

*String literals* can also be used for those of you who want to write a ***DOM element*** in the type of a String.
**Example:**
``` javascript
const name = "Duski";
const born = "12-12-1995";
//
let element = `
<div>
	<h1>My name is ${name}</h1>
	<h2>I was bor ${born}</h2>
</div>
`;
console.log(element);
```
We can print out from the Html element which we combine with the variable, of course this is very helpful for those of you who often play with **HTML elements**.We will see the results as shown below:

![Screenshot_11.png](https://ipfs.busy.org/ipfs/QmPy3zucfDefZvhHBtFvPHcqyAYbZ8LKbSYrvJKAZk4riX)
<br>

**Use string literal as a function**

we can also use *string literals* as functions. We can see an example like the following
``` javascript
const name = "Duski"
func = (string,variable)=>{
 console.log(string);
}
let data = func`My name is ${name}`
```
- We can make string literal functions like this ```func`My name is ${name}```` . This is the same when we make a function like this ```func(My name is,${name})```, If we look at this it means that this function has two parameters, separating strings and variables.
- Then we can run the string like this ```func = (string,variable)=>{}```, **string parameter is the string variable** ```"My name is"``` and **the variable parameter is the variable name** ```${name}```. to see the results we can see in the picture below.

![Screenshot_13.png](https://ipfs.busy.org/ipfs/QmcfmCgJpenLixBBmPB5GsocoTgbCvkkVZJ8BtMaKLRAGS)

- If we compile the index.js file through ```npm run build``` which we have set in the previous [tutorial](https://steemit.com/utopian-io/@duski.harahap/learn-es6-part-1-intro-setup-babel-and-understand-var-let-const) then we will get the compile results as follows.

![Screenshot_12.png](https://ipfs.busy.org/ipfs/QmSopqMkg9PzeDwSmqskeKBr3SAZjhzovdR8LcNYLp5UEt)


### Shorthand and Destructuring
<br>
- **Shorthand**
on es6, we can shorten the writing of keys and values on an object. but the key and value requirements must have the same name. for more details, we can see in the following example.

**Shorthand in object:**
``` javascript
const name = "Millea";
const lastname = "Duski"
// 
let obj = {
	name, // it means name = name
	lastname
}
console.log(obj)
```
We can see picture above, if the key pair and the value of an object are named the same, we don't need to write ```name : name``` but just need ```name```.and if you do ```console.log ()``` we will see the object results from the variable ```let obj```.

![Screenshot_14.png](https://ipfs.busy.org/ipfs/QmRAzrCNu7xJ6p7uJnJ4zSeuYnb3jBsu3fFYgzoRnRiaSr)
<br>
**Shorthand in function:**
``` javascript
//shorthand in function
const name = "Millea";
const lastname = "Duski"
//
let funcData = function getData(){
	return `My name is ${name} ${lastname}`
}
let obj = {
	funcData
}
//
console.log(obj.funcData())
```
not only on string objects or integers but you also use shorthand in the function too. We can save the function in a variable ```let funcData = function getData(){}```that we enter in the object. then not much different from before we only need to write down the variable where to store the function.

![Screenshot_15.png](https://ipfs.busy.org/ipfs/QmY9DKmNbfyArnAiDRYhRwBakfrHBNCybfg7KjD2LSmGzb)
<br>
- **Destructuring**

There are unique things that we can do on es6, we can separate an object or array into a new variable. for more details we can see below:

**Pass the parameter:**
``` javascript
//Destructuring
let obj = {
	name : 'Millea',
	lastname : 'Duski'
}
const {lastname, name} = obj
//
console.log(name)
```
- We can pass the key object with ```{}```, then we define which object we will use ```{lastname, name} = obj```.

- The object that is passed on ```{lastname, name}``` is the key of the object, So the sequence of objects that are not operated need to be in accordance with the order of the keys that exist on the object.

**Assign value:**

We can also assign new values ​to the parameters that are passed in the object above. the following is an example:
``` javascript
let obj = {
	name : 'Millea',
	lastname : 'Duski'
}
//assign new value
const {lastname : myLastName, name : newName} = obj
//
console.log(myLastName,newName)
```
let's guess what will happen. We assign a new value that is ```myLastname```. We can assign new values ​​with ```lastname : myLastName```. If we console.log () we will see the results as follows.

![ezgif.com-video-to-gif (1).gif](https://ipfs.busy.org/ipfs/QmdMnnGetznWtUhVRHx4EnFUATxtdeTCybr7VAk4aHEPyh)

We have finished learning about ***string literals, shorthand and Destructuring***. there are still many syntaxes of es6 that we will discuss. you can explore more. Hopefully, this tutorial can help you who want to learn ES6. thank you.

#### Curriculum
[Intro Setup babel and understand var,let,const](https://steemit.com/utopian-io/@duski.harahap/learn-es6-part-1-intro-setup-babel-and-understand-var-let-const)
[Arrow Function, Default parameter, rest and spread](https://steemit.com/utopian-io/@duski.harahap/learn-es6-part-2-arrow-function-default-parameter-and-rest-spread)

#### Proof of work done
https://github.com/milleaduski/learnEs6