JAVASCRIPT MEJOR CONCEPT
Learn some unique React.js Fundamental concepts
JavaScript:- method and concept
Today we are going to learn more about JavaScript (JS). I will cover the topic of data types, event loop, error handling, and some ES6. Also, there is a bonus section today at the end of the blog.
Data Types
There are different types of data in JS. They are -
Number — 1,2,3,4
Strings — “hello”, “world”
Boolean — true, false
Undefined — undefined
null — null
Object — {index: value}, [value1, value2, value3]
Function — functionName()
To get to know the type of data there is function in JS which is typeof(value). For example,
typeof(1); // number
typeof(‘1’); // string
typeof(true); // boolean
typeof({index: value}); // object
Error Handling
Running code without error is a fantasy to me. Cause you can’t say you wrote a code and did not get any error. You know what? There is a way to handle those errors by yourself. For this, you have to use try-catch syntax, which is written in this way
try {
// your code…
} catch (error) {
// error handling
}
The workflow of try-catch is, first of all, the code executes the try section. If it does not get any error, then the catch section is ignored by itself. Otherwise, in any of line in try function get any error, the code stops and execute the catch section. That’s how this try-catch works. Now I am showing two examples below where the first one works properly and the second one faces the error.
Example 1:
try{
const value = 1;
console.log(value); // 1
console.log(“try executed”); // try executed
} catch(error){
console.log(error);
}
Example 2:
try{
const value = 1;
console.log(x);
console.log(“try executed”);
} catch(error){
console.log(error.message); // x is not defined
}
Here is an error in catch function is an object. It has a name, message, and stack properties. There is another error object which is thrown. By using this you can throw your own error. For example,
try{
const value = 1;
If (value > 0){
throw new SyntaxError( ‘your value is greater than 0’ );
}
} catch(error){
console.log(error.message); // your value is greater than 0
}
I hope you get an idea of what try-catch is and how it works. Also introduced about how you can throw your error.
ES6 — Block Bindings
The acronym of ES6 is ECMAScript 6. It is the second major revision of JS. It’s like updated JS. It introduced some new things to us which we can use in JS code. Block in JS is something in {} or function. Let’s see some of them.
- Variable Declaration — In ES6, you can declare JS variables by using const and let. Const means constant so that the variable will be static, and you can’t change it. And let uses when you need to change the value of a variable in your code.
if (true) { const variable = 1; }
- Arrow Function — ES6 introduced arrow function to us. So you don’t have to use the function word in your code. Though you have to declare as a variable while using it.
const add = (x, y) => x + y ;
const add = () => 1+1 // 2
- Loops — Generally, if you declare a variable as var in for loop iteration, you can access the variable outside of the loop or bindings. So to optimize this, you have to use let while declaring a variable. Like this
for ( let i = 0; i < 5; i++) {codes}
Our world is changing fastly and also our technologies too. Like this, our one of the favorite or most used language JavaScript it updating too. Right now, there is the ES 2018 version of JS. However, ES6 is the last massive update for JS. Hopefully, developers around the world will find more and more efficient and optimized JS for us.
Bonus -
Writing clean and understandable code is more important than writing error-free code. If another developer does not understand your code, you will lose value to others. For this bonus section, I will talk about how you should write clean and understandable code.
Coding Style
if (condition){
\\ your codes here
}
Line length should be around 80 to 120 characters.
Horizontal indent should be 2 or 4 spaces.
An extra line break can specify a vertical block.
Put a semicolon after every line or statement.
You can place functions on top of code or bottom of code. Additionally, you may place it while calling the function.
To make your code readable with one click, you can use the “Prettier” or “ESLint” extension on VSCode.
Commenting
Add comment is an important thing. Your commenting style will show you how you can describe a code to outsiders.
The explanation will be in short and minimal
Comment on the original architecture of your code, usage of functions, and important solutions.
Today we learned about the data types of JS, how to handle errors in JS, and ES6 block bindings. Also, we came to know about how to write clean code and how to use comments in code. That’s all from me today. I hope you like it. If you found anything wrong or should be updated, then please do let me know. I will do more research about it and update it. Thank you.