Advanced Topics of Web Development
I will discuss something today that must need to know every web developer.
Primitive and Non-Primitive-
There are two types of data in javascript primitive and non-primitive.
String, Number, Boolean, Null, Undefined are primitive data, and Object, Array, Function are non-primitive data. We can’t modify primitive data but can it to the non-primitive data type.
Two primitive are equal if they contain the same value but two non-primitive data are not equal although they contain the same value.
var a = "something";
var b = "something";
console.log(a == b) // truevar objA = {name : "masud"}
var objB = {name : "masud"}
console.log(a == b) // false
Event Loop-
Behind the scene, javascript events maintained by the event loop. It is the working process of the javascript engine.
Javascript event takes some steps for the execution of an event. These steps are Call Stack, Web Apis, Callback Queue, Event loop.
Javascript is a single-threaded language so it works one by one. When we call an event then it is going to the call stack. Call stack to maintain our event and execute an event with the LIFO data structure. If our events need more time for calculating or getting data then call stack transfer this info to web APIs for working with this. And call stack executes the next event of the stack. And besides, the web API works for that who’s need more time to calculate or process. After finishing web APIs work for the event it passes to the callback queue. Callback queue serially (FIFO) transfer executed response to call stack queue by the event loop. And then execute the code.
Try, Catch, Finally and Throw
In the time of development, we need to control error for a better experience so we can use the try, catch method. Try, Catch, and Finally are three blocks. Our main code located in the try block when it is making an error then skip the try block and go to the catch block. Catch block has a parameter that gives us error information. And Finally, the block executes all the time.
We can throw a custom error by the Throw method and create a custom error by New Error() method. When we create a custom error and throw it. Then it is easily accessible by the parameter of catch.
try{
//do it
}catch(error){
//if something wrong
}finally{
//it will work all the time
}Window.onError-
We can decorate our window error. I assume that you show the error providing system by chrome developer tools. You can easily modify it as your wish. window.onError provides us 5 default parameters these are message, source, line, column, error. We can easily modify our code by using these parameters.
window.onerror = function(message, source, line, col, error){
console.error(`${line}:${col}-${message}`)
}
faf
Cross-Browser Compatibility-
As a developer, we need to notice our audience who are using our website and which device and browse they can use. When we make a website then it not working all the browsers and devices properly. Because we use some latest technology and feature for a better experience and better looking, some old devices and browsers can’t support these features. So we need to work for all of our audience. Lots of browsers and devices are available in this world. No one can’t provide all smooth features to all these devices and browsers. But we can provide our all features to the maximum audience. So we will target our maximum audience device and browser and then we will work for it.
Fix this cross-browser issue, we can be testing our website on other devices and browsers. Some tools are available for testing our web to different browsers and devices easily.
When we get a bug to other devices then we need to create an extra code or polyfill for this.
Coding Style
When you work under a company or an organization then you are not only a developer, you need to work with your teammate. So your code must be readable, for this reason, we need to giving importance to coding style.
Block Binding and Hoisting
In javascript, every scope has created by code blocks. When we declare a Let or Const variable in scope then it is hoisted to the top of the scope. We can change and modify it from this scope.
Var is hoisted to the global scope, so we got access to a var variable from anywhere in the code.
When we use var variable to for loop then it can change other variable value, if that contains the same name. So best practice using Let and Const Variable.
Comments
In development, we need to write a thousand and thousand line codes for some specific tasks. When we need to change a code for a single task then how to find our exact point to code. We can fix this problem by comment. When we implement a single functionality then we need to do a comment.
A comment is just an instruction that can possible by your code not a description.
Arrow Function and General Function
An arrow function is an updated version of the general function. It provides less code than the general function. But arrow function has not provided arguments and this method. The general function provides us arguments. Arrow function can’t duplicate parameter names.
Spread Operator
we need to add 3 or more previous array then we can’t use Concat() method properly then we can just use the spread operator to add multiple arrays easily.
Use three-dot (…) to spread something.
Suppose we need to add 2 array then just do it:
let a=[“masud”, “rana”]
let b=[“shawon”]
let c=[…a, …b] // [“masud”, “rana”, “shawon”]
Thanks for reading this blog.
