Learn Es6 part#3 String literal, Shorthand, Destructuring object

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.

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

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:

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:

Use string literal as a function

we can also use string literals as functions. We can see an example like the following

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

• If we compile the index.js file through npm run build which we have set in the previous tutorial then we will get the compile results as follows.

Shorthand and Destructuring

• 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:

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.

Shorthand in function:

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

• 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:

//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:

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.

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
Arrow Function, Default parameter, rest and spread

Proof of work done

https://github.com/milleaduski/learnEs6