Concepts of JavaScript — Part 3

📄 Table of contents

Array vs Objects

const obj = {};
obj.__proto__ === Object.prototype;
//true

Question

Solution

◉ PROTOTYPES

console.log(person1);

Creating an object using the constructor function

human.prototype.__proto__ === God.prototype;  //true

◉ EVENT LOOP

Chrome Browser Internals

◉ Understanding the Critical Rendering Path

Critical Rendering Path (CRP)
<meta name="viewport" content="width=device-width, initial-scale=1">

Render blocking vs Parser Blocking

Repaint vs Reflow

◉ Normal vs Asynchronous vs Deferred JS (NAD)

🔘 Normal Execution

The HTML parsing is paused for the script to be fetched and executed, thereby extending the amount of time it takes to get to first paint.

🔘 The async Attribute

<script async src="script.js">
the file can be downloaded while the HTML document is still parsing. Once it has been downloaded, the parsing is paused for the script to be executed.

🔘 The defer Attribute

<script defer src="script.js">
even if the file is fully downloaded long before the document is finished parsing, the script is not executed until the parsing is complete.

Asynchronous, Deferred or Normal Execution?

Where is the <script> element located?

Is the script self-contained?

De”B”ounce and Th”R”ottle

When to use each

setTimeout

var timerId = setTimeout(callbackFunction, timeToDelay)

Implementing Debouncing in JavaScript

https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript
<html>
<body>
<label>Search</label>
<!-- Renders an HTML input box -->
<input type="text" id="search-box">
<p>No of times event fired</p>
<p id='show-api-call-count'></p>
<p>No of times debounce executed the method</p>
<p id="debounce-count"></p>
</body>
<script src="debounce.js"></script>
</html>

This is what Debouncing is!

This is what throttling is!

◉ try-catch-finally

1. Return statement inside the try or catch block

function test() {
try {
return 10;
throw "error"; // this is not executed, control goes to finally
}
catch {
console.log("catch");
return 1;
}
finally {
console.log("finally");
return 1000;
}}
console.log( test() ); // finally 1000

2. Variables declared inside a try block are NOT available in the catch or finally block

try {

let a = 10;
throw "a is block scoped ";
}
catch(e) {

console.log("Reached catch");
console.log(a); // Reference a is no defined
}
try {

var a = 10;
throw "a is function scoped ";
}
catch(e) {

console.log("Reached catch");
console.log(a); // 10
}

3. Catch without error details

try {
// code with bug;
}
catch {
// catch without exception argument
}

4. try…catch will not work on setTimeOut

function callback() {
// error code
}
function test() {
try {
setTimeout( callback , 1000);
}
catch (e) {
console.log( "not executed" );
}
}
function callback() {
try {
// error code
}
catch
console.log("Error caught") ;
}
}
function test() {
setTimeout(callback, 1000);
}

5. Adding a global error handler

window.onerror = function(e) {
console.log("error handled", e);
}
function funcWithError() {
a; // a is not defined
}
function test() {
funcWithError();
console.log("hi"); // this will not be executed
}
test();

◉ Shallow copy vs Deep Copy

const array = [‘a','b','c']const newArray = array;
console.log(newArray === array) // true
const newArray1 = [...array]
console.log(newArray1 === array) // false
const newArray2 = Object.assign({},array)
console.log(newArray2 === array) // false
const newArray3 = Object.assign(array)
console.log(newArray3 === array). // true
const newArray4 = JSON.parse(JSON.stringify(array))
console.log(newArray4 === array) // false
Shallow Copy Example using Spread(…) Operator
newStudent = { ...student }
Shallow Copy Example using JSON.parse ( JSON.stringify (object ) )

Deep copy with custom function

References:

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.