Advanced JavaScript topics
## 1. Types in JavaScript
There is a total of nine types in JavaScript. At first, it is divided into two — Data type and Structured types.
Data Types: Number, String, Boolean, Undefined, BigInt, Symbol, null
Structured Types: Object, Function
We can check the type by using the method typuOf followed by the types.
One another thing is the expression. We may summarize the expression definition like this- JavaScript expressions result in one value.
## 2. Try …. Catch
Try catch is a great way to handle the error while executing the code in runtime. The workflow is in the try block first run, if there any error occurs it throws to catch block as an error and it results in an error. Otherhand no error occurred code run smoothly, and the catch block ignored. But the try-catch would not work on syntactically wrong codes. Try …catch works synchronously.
An excellent use case of try-catch is while using a third-party API. As we don’t know the API/JSON data is workable or not, if it is faulty it throws an immediate error in our hundred lines of code. But if we use the API in the try block then the faulty API throws the error in the catch block without affecting our handwritten codes.
Have a look..
<!DOCTYPE html>
<script>
“use strict”;globalThis.__codeBoxId = “h8f20f95wy”;
let json = “{ bad json }”;
try {
let user = JSON.parse(json); // ← when an error occurs…
alert( user.name ); // doesn’t work
} catch (err) {
// …the execution jumps here
alert( “Our apologies, the data has errors, we’ll try to request it one more time.” );
alert( err.name );
alert( err.message );
}
</script>
## 3. Coding Styles:
Braces: To made codes, readable and easily understandable in the future reference codes must be clean and should follow the conventions. In this article, we will discuss coding styles in brief.
In the case of code blocks if it finishes in one line or in short we no need to use curly braces. But if codes expanded multiple lines we must use curly braces.
Line Lengths: Always try to avoid long line codes. It looks wild. If our codes expanded seemingly more than one line we must divide them into lines. The maximum line should be 80–100 levels. If more we should use the module system introduced in ES6.
Other common things should keep in mind are:
- Indents
- Semicolons
- Nesting Levels
- Function Placement
- Automated Linters
- Styled Guides
- Always should try to avoid bad styles.
## 4. JavaScript Comments:
Comments are very useful for the purpose of understanding by others or future use by oneself. It is a concise explanation of the codes written above of the codes. Comments can be written either with // double forward slash for a single line or with /* */ for multi-lines codes. Comments that explain the solution are very important. They help to improve development the right way.
## 5. Balancing Client and Server Caching:
Caching is a general computer concept that provides efficiency through data availability. It is a general strategy of a computer to caching data upon request by the user. The same rules apply in terms of browser API interaction. When customer request data it is time-consuming to load data every request made my client make ease system may store data which may request repeatedly for quick and efficient response. Caching helps to lower data costs.
## 6. Cross-Browser Testing: Cross-browser web testing is a practice of making sure that the software you made works across a number of browsers. As a web developer one has the responsibility to make sure the software should run in an older version, people with disabilities, devices that do not support computer-mouse, etc. As a promised developer we should keep in mind all the available browsers should support the software to run smoothly what we made. Usually, cross-browser testing or bug-fixing follows four steps. Initial planning > development > testing/discovery> fixing /repeating.
## 7. Block Bindings: Variables declared with var causes problem while the value binds global scope. ES6 introduces let and const. They eradicate the declaration problem with var. Variable with let exactly do the same as var, moreover, it prevents the value scope attach globally or outside the module. Variable declared with let can be redefined while const value cannot be changed. Block scope is the process that the value declared in scope cannot be accessible to the outside. Hence const identifiers are considered as block-level variables as their value cannot be changed. For loop, variables are great examples of block bindings.
## 8. Function with Default Parameter Value: If a function call with missing arguments the missing values are set to undefine. Sometimes it is acceptable but sometimes it throws an error. To solve this error we may use a value as default with the parameter to avoid throwing an error.
## 9. Working with unnamed parameter: When we pass an argument to a function before that function starts executing, it assigns the argument you passed into the corresponding parameter in its function signature. Since it is an assignment statement, that means we can use destructuring to do assign parameter values in a function. If you recall the first example of assigning default values during destructuring and combine that with what we learned in the last section, you might know where I’m going with this. If you can destructure function parameters, and you can assign default values during destructuring, AND the object literal names have to match during the destructuring process.
## 10. Block- Level functions: JavaScript ES6 introduced the spread operator. The syntax is three dots(…) followed by the array (or iterable*). It expands the array into individual elements. So, it can be used to expand the array in a place where zero or more elements are expected. The spread operator is commonly used to make shallow copies of JS objects. Using this operator makes the code concise and enhances its readability.