Updated March 31, 2023
Introduction to ES6 Cheat Sheet
ES6 provides different kinds of features to the user, in which that cheat sheet is one, the feature that is provided by ES6. Basically, the cheat sheet is nothing but the table of contents and that is used to replace the content of IIFE with the Block Arrow function as per our requirement. Black Arrow function includes the different types of functions such as String .includes() .repeat() etc. By using this template or function we can destructure arrays, object modules. The ES6 cheat sheet is basically implemented in modern projects and contemporary sample code as per our requirements.
What is ES6 cheat sheet?
The ES6 cheat sheet isn’t planned to show you JavaScript from the beginning, yet to assist engineers with essential information who might battle to get to know current codebases (or suppose to learn React for example) in light of the JavaScript ideas utilized.
Now let’s see different notations in the cheat sheet as follows.
Declaration of variable that is var, const, let
In Java, there are three different keywords available such as var, const, and let, let’s see them one by one as follows.
- var: This is one of the variable declaration keywords in JavaScript, the scope of var is within the function and it is the mutable keyword.
- let: This is the second keyword in the variable declaration and the scope of this keyword is within the block, it is also a mutable keyword.
- const: This is a recommended variable in JavaScript and the scope of this keyword is within the block, it is also a mutable keyword.
Arrow Function
In ES6 it has a new feature that we call the arrow function that means it is another way to declare and use a function as per our requirement. It has some advantages such as it is more cosines, it is used to pick up the values from surroundings as per our requirement and it returns the implicit values.
Function with a default value of the parameter
In ES6 we can set the default value to the function as per our requirement by using the following syntax as follows.
Function specified function name (variable name = value){
return variable name;
}Explanation
The default parameter we can use in two different situations such as if there is no parameter provided and if we need to provide the undefined parameter.
Now let’s see what is destructuring of objects and arrays.
Destructuring is an advantageous method of making new factors by removing a few qualities from information put away in articles or clusters. The destructuring can be utilized to destructure work boundaries or this. props in React anticipate for example.
Example
const student = {
name: “Johan”,
dept: “comp”,
city: “Mumbai”
}Let’s consider the above code now. Let’s see how we can implement without destructuring as follows.
const stud_name = student.name;
const stud_dept = student.dept;
const stud_city = student.city || Mumbai;Now let’s see with destructuring as follows.
const {name: name, dept, city = “Mumbai”} = student;Explanation
In the above example, we write code with destructuring in one line as shown.
Function Parameters
Normally destructuring is used in functions for object parameters.
Array
We can also implement arrays with destructuring and without destructuring as per our requirement as well as we can also implement different array methods as follows.
- Array.prototype.map(): takes a cluster, accomplishes something on its components, and returns an exhibit with the changed components.
- Array.prototype.filter(): takes an exhibit, chooses component by component in case it should keep it or not, and returns a cluster with the kept components as it were.
- Array.prototype.reduce(): takes an exhibit and totals the components into a solitary worth (which is returned).
- Array.prototype.find(): takes a cluster, and returns the primary component that fulfills the given condition.
ES6 cheat sheet
Now let’s see different types of examples of ES6 cheat sheets for better understanding as follows.
First, let’s see the example of the arrow function as follows.
const add = (x, y) => x+y
console.log(add(6,6))Explanation
In the above example, we try to implement the arrow function, here we first declare the arrow function of add with x and y variable with arrow function as shown. The final output of the above implementation we illustrated by using the following screenshot as follows.
Now let’s see the example of the default parameter as follows.
function print(x = 6){
console.log(a)
}
print()
print(10)Explanation
In the above example, we try to implement the default parameters, here we created the print function to use default parameters with value as shown. After that, we try to print the default parameter and with value and without value. The final output of the above implementation we illustrated by using the following screenshot as follows.
Now let’s see an example of scope as follows.
let x = 5
if (true) {
let x= 7
console.log(x)
}
console.log(x)Explanation
In the above example, we try to implement let scope, here we declare the same variable with different scope as shown. The final output of the above implementation we illustrated by using the following screenshot as follows.
Now let’s see how we can implement the string using const as follows.
const stud_name = 'Johan'
const msg = 'Welcome ${stud_name}'
console.log(msg)Explanation
In the above example we implemented string with const, in this example we declared two variables with const as shown. The final output of the above implementation we illustrated by using the following screenshot as follows.
Now let’s string operations as follows.
String includes
By using the include() function we can get the specified result as per our requirement as follows.
console.log ('welcome'.includes('el'))The final output of the above implementation we illustrated by using the following screenshot as follows.
console.log ('welcome'.includes('ab'))The final output of the above implementation we illustrated by using the following screenshot as follows.
In string, we have another function that String startWith(), in that function we can find out the starting character of the string as per our requirement.
Conclusion
We hope from this article you learn more about the ES6 cheat sheet. From the above article, we have taken in the essential idea of the ES6 cheat sheet and we also see the representation and example of the ES6 cheat sheet. From this article, we learned how and when we use the ES6 cheat sheet.
Recommended Articles
This is a guide to ES6 Cheat Sheet. Here we discuss the definition, What is ES6 cheat sheet, Arrow Function, Example, and code. You may also have a look at the following articles to learn more –
