Some Harsh Side Of JavaScript

Today we will talk about some harsh and tough side of JS, folks need to spent some hard times to understand those concept.

Primitive Types and Reference Types: In JavaScript, a variable may store two types of values: primitive and reference. JavaScript provides six primitive types as undefined, null, boolean, number, string, and symbol , and a reference type object. The size of a primitive value is fixed, therefore, JavaScript stores the primitive value on the stack. On the other hand, the size of a reference value is dynamic so JavaScript stores the reference value on the heap. When we assign a value to a variable, the JavaScript engine will determine whether the value is a primitive or reference value. The variable that stores a primitive value is accessed by value. It means a variable that stores an object is accessed by reference.

Event Loop and Call Stack: JavaScript is a single-threaded programming language. In other words, it can do only one thing at a time. JavaScript engine executes a script from the top and works its way down creating execution contexts and pushing and popping functions onto and off the call stack.
If you have a function that takes a long time to execute, then you cannot do anything on the web browser during the function’s execution. The webpage just hangs. A function that takes a long time to execute is known as a blocking function. Technically, the blocking functions block all the interactions with the webpage such as mouse click. To prevent blocking functions, wrap those functions in callback functions which can be executed later.

Error Handling Using Try Catch: When executing JavaScript code, different errors can occur. There can be two types of errors in the code; Syntax Error — Error in the syntax by writing wrong statement or spelling mistake and Runtime Error — This type of error occurs during the execution of the program. The main code is inside the try block. While executing the try block, if any error occurs, it goes to the catch block. The catch block handles the errors as per the catch statements.
If no error occurs, the code inside the try block is executed and the catch block is skipped. The finally block will execute in any situation. In simply, try statement lets you test a block of code for errors and catch statement lets you handle the error. The throw statement lets you create custom errors. The finally statement lets you execute code, after try and catch, regardless of the result.

Client Side Caching Vs Server Side Caching: When you load a website, the website data (such as images, videos and html documents) is saved. Once you reload the website it doesn’t call to the database to get that data again. It just pulls the data back together from memory. Caching web content helps improve upon the responsiveness of your websites by reducing the load on backend resources and network congestion. If the website you’re trying to access got updated, you might not see the update until you clear your cache. Most well engineered websites or applications will use both Server Side and and Client Side.
Client Side Caching is often called Browser Caching. Once the browser has requested the data from the server, it stores it into a folder created by the browser. The next time you open the webpage, it won’t make a call to the server for the data, it will pull it from the Browser Cache folder.
Server side caching is a similar concept but a little more complex. Once the user has made a request to a website, it’s data is stored on a server. Next time the user makes a request, it just gets back the saved data from the server saving the time by not having to pull the data from the database.
Remote Caching is similar to Server Side Caching but it can also run an application to serialize and deserialize the data. The difference is that you’re in control of the Remote server and it is not operated by someone else.

Cross Browser Compatibility: While technology is evolving rapidly, people aren’t. Browsers like Google Chrome and Firefox dominate the market, but there are people using older versions or other browsers. And their numbers are too high to be ignored. Not all browsers and devices work on the same configuration; they face browser compatibility issues on different levels. This inconsistency is the reason why some users not be able to access the application features. To enhance efficiency and user experience and obviously business, we need cross-browser testing. Once you’ve made the right choice of browsers based on popularity and audience, you can start cross browser compatibility testing manually by using differnt browser or with automation tools like Selenium, which is powerful, robust, and trusted by most organizations in the automation testing space.

Hoisting — let, const and var: Hoisting is a JavaScript behavior commonly known for making variables and functions available for use before the variable is assigned a value or the function is defined. In effect, it puts variable, function and class declarations to the top of their scope before execution. const enables you to define constants. let enables you to define variables. That’s great, but don’t we have variables in JavaScript already? Yes, that’s true, but variables declared by var have function scope and are hoisted to the top. It means that a variable can be used before it has been declared. let variables and constants have block scope (surrounded by {}) and cannot be used before declaration.

Closures: In JavaScript, a closure is a function that references variables in the outer scope from its inner scope. The closure preserves the outer scope inside its inner scope. Lexical scoping defines the scope of a variable by the position of that variable declared in the source code. According to lexical scoping, the scopes can be nested and the inner function can access the variables declared in its outer scope.

Arrow Function: In ES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression.
Old way of writing functions:
let add = function(x,y) {
return x + y;
}
console.log(add(10,20)); // 30
Arrow function:
let add = (x,y) => x + y;
console.log(add(10,20)); // 30;
However, if you use the block syntax, you need to specify the return keyword:
let add = (x, y) => { return x + y; };

Default Parameters in Function: Like all other programming languages, in JavaScript function we have parameter — values that are given at the time of function declaration, and argument — values that are passed to the function in the time of function invocation. If a function have two parameters, but we are passing only one argument then the second parameter will be undefined. To use default values when no value provided or when undefined, we use the default parameter. Use logical OR operator to pass default parameter or, we can use ternary operator to do so.

REST and SPREAD Operator: Both the spread operator and the rest parameter are written as three consecutive dots (…). he spread operator allows you to expand an array into its individual elements by destructuring, the rest parameter lets you bundle elements back into an array.