We have workers in JavaScript and there are three sections of workers. Web Worker, Web Socket and Service Worker. These are script that run in the background without interfering the UI. In another word, we can say that these workers run in a seperate thread than the main browser thread which helps to improve the application performance because it does not bother excessive activities of the main thread.

DIFFERENCES

The web workers and web socket have DOM access whereas service worker has no dom access because it runs on a worker context. The web socket is actually a part of main thread that helps to access and manipulate the DOM.

WEB WORKER

We know that our HTML perser, parses the html code line by line and as soon as it finds the script tag, it blocks the entire UI until we the output of the script. So, in order ot overcome from this blocking nature, we use web worker. Web worker actually runs the script tag in a different environment so that our complex operations don't bock the UI and generate the script output from different thread and provide the output.

Web workers are used to run the code in a background script.

We can create a worker object using contstructor worker()

Workers run in a different global context

We use workers to do complex operations without interfering the UI

We can sent and accept messsages or data from UI using events.

var workerObj = new Worker('workerFileName.js');
We use onMessage(); To receive the messsages postMessage(); to send the data or messages

Advantages

Helps in complex computing

Does not block the UI

Optimize the program performance

Disadvantages

Does not have access to parent, window and documnent object.

JavaScript is a scripting language. It is different from Java language. It is an object-based, lightweight, cross-platform translated language. It is used for client-side and server-side development. It is widely used for client-side validation. The JavaScript code can be inserted into HTML pages that can be understood and executed by web browsers because the JavaScript Translator (embedded in the browser) is responsible for translating the JavaScript code for the web browser.

The browser does not interpret server side scripting language because it can interpret or execute HTML, CSS, DXTML and Client Side Script. We need to add an interpreter to interpret or execute server side script installed in the server called “Zen-engine”. PHP and .NET are Server Side Script. Note- Server Side Script is not available at the server because it is sent from the browser.

JavaScript was developed by Brendan Eich, who was a Netscape programmer. Brendan Eich developed this new scripting language in just ten days in the year September 1995. At the time of its launch, JavaScript was initially called Mocha. After that, it was called Live Script and later known as JavaScript.

Argument object in javaScript represents arguments passed to a function.

<script> function abc(a) { console.log(typeof (a)); } abc(); //undefined abc(1); // number abc("1"); // string </script> //To know the number of arguments// <script> function abc() { console.log(arguments.length); //4 document.write(arguments.length); // 4 } abc(1, 2, 3, 4); //4 </script>

These are the features of JavaScript:

• Open-source
• It is a patter that is based on the concept of "objects", which can contain data and code.
• Interpreted programming language:-Since JavaScript is an 'interpreted' language. it reduces the time required by other programming languages like Java for compilation. So, it is fast in comparision to others.
• Integration with other back-end and front-end technologies
• Lightweight
• Used especially for the development of network-based applications
• JavaScript has countless frameworks and libraries that are extensively used for developing web applications and games of all kinds.
• Cross-platform compatible: We know that when we need to create app, we need to pick a platform to create the app for, such as Android, IOS or for windows store. If we use native technologies we need to write code in JAVA to create Android App, Object C for IOS and C# and Xaml for Windows but learning JavaScript, we can create all.gn
• There is no need for a web page to reload when running JavaScript. For example, form input validation.
• JavaScript helps in making the UI of web applications look and feel much better.

Whenever we assign or copy one object to another object like user = obj, we don't copy the data like sarfraz to bruce but reference. Suppose, I have a hard disk in which we create an object and put any data like sarfraz and when we copy this object to the user like user = obj, it will not copy the data but location and when we change the value later, it will also change the value of first one which was name:sarfraz and now it will be bruce so both object will have the same value bruce. but we want that when we copy one object to another object, the value should be different for both the objects and to achieve this, we use shallow copy and deep copy.

<script> let obj = { name: "sarfraz" }; console.log(obj); // name: "sarfraz" let user = obj; user.name = "bruce" console.log(obj); // name: "bruce" console.log(user); // name: "bruce" // Note: After copying to another object, the first object value will also be bruce becuase // it copies the memory location </script>

Use of shallow copy

• Object.assign({}, obj)
• Create one object and use destructuring inside it

We use shallow copy by Object.assign({}, obj) and second way is the create one object and use destructuring inside it like let user = {...obj} to create shallow copy and will get different values for both objects.

Question 1 :- Do we copy memory location or value when we copy one object

Memory Location

Question 2 :- Difference between shallow copy and deep copy

In shallow copy, main object is copied but in Deep copy, we can also copy the nested objects

Question 3 :- What do we actually perform when we use shallow and deep copy

We copy value in the place of memory location

Question 4 :- What are the ways to use shallow and deep copy?

There are two ways to use shallow copy 1. object.assign and 2. object destructuring and for deep Copy we can use json.parse and inside it json.stringify but in this method, date and function do not work so to fix this, we can use lodash library or we can do it manually using for loop and copy each key but it is very lengthy process. It is better to use lodash CND path and then let user = _.cloneDeep(obj);

<script> let obj = { name: "sarfraz" }; console.log(obj); // name: "sarfraz" // let user = Object.assign({}, obj); // First way to shallow copy let user = { ...obj }; // Second way to shallow copy user.name = "bruce"; console.log(obj); // name: "sarfraz" console.log(user); // name: "bruce" </script>

Deep Copy

Now, deep copy comes into the picture when we have nested object.

let obj = { name: "sarfraz", address: { city: "Noida", state: 'UP' } }; let user = { ...obj }; user.address.city = "Gurgaon" console.log(obj); // obj city will be gurgaon which is a problem and to fix this we use deep copy console.log(user); // user city will be gurgaon </script>

Here, by using both mehtods of shallow copy, we will not get the correct output becuase both the methods of shallow copy fix the issue upto one lavel of coping object and to fix the second lavel or object inside object like obj.address.city, we need to use deep copy.

Here, to fix this issue, we need to convert first into JSON STRING using JSON.stringify() and then we need to convert this json object into normal object using JSON.parse();

<script> let obj = { name: "sarfraz", address: { city: "Noida", state: 'UP' } }; let user = JSON.parse(JSON.stringify(obj)); user.address.city = "Gurgaon" console.log(obj); // obj city will Noida console.log(user); // user city will be gurgaon </script>

Limitations of Deep copy

Yes. <script> const obj = { name: "sarfraz", age: 25 } console.log(obj.name); // sarfraz for (key in obj) { document.write(key + " : " + obj[key] + '<br>') } // name : sarfraz // age : 25 </script>

Some of the disadvantages of JavaScript are:
• No support for multi-threading.
• It will stop the rendering if you make any mistake in the code and difficult to find.
• No support for multi-processing
• JavaScript codes are always visible to everyone.( by control+U, inspect, F12) so it is not secured.
• We know that the code of JavaScript is executed on the user’s or client machine and in some case it is used for malicious purposes and because of this some people disable the JavaScript.
• No support for networking applications
• Yes, It is case-sensitive.

• Using Object literal
• Using Create method
• Using constructor method

Refer question no. 8 in notes/pdf for more details.

We can read or write properties of an object in javaScript using dot and bracket notation as follows:-
object.firstName
// We will get Sarfraz if first name set as Sarfraz.
We use bracket notation if a property contains special character and the property is stored in a varaiable.

An array is a collection of elements or values. We need array because when we use or declare a variable, it can store only one value at a time and to store multiple values under one name an 'Array' is declared.
An array can store any type of data.
There are two ways to define or declare the array.
1. Using bracket such as array = [a, 1, "sarfraz", 25];
1. Using array object such as array1 = new Array[a, 1, "sarfraz", 25];

Use of some, every,find and filter

All the four array methods are almost same. Some method returns true if any value or element in the given array passes the test else false.
The same is the case with every if all the values or elements in the given array pass the test else false.
find return the first value that passes the test and filter return all the values in the form of an Array that passes the test.

find() is used to find only the first value that passes the test or condition not the remaining value of any variable or Array and findIndex() find the index of the first value that clears the test. filter function will give a new array which has all the elements that passes the condition. toString will convert the array into string. Once it is converted to string, no function of array will be applicable. valueOf is a default function of array. It will give the same result when you print var a. fill function is used to change the all elements to a new element you write as fill(Ram). In this case, var ages =[20, 19, 18, Sar] will become Ram, Ram, Ram, Ram. Since all elements are there in var ages so Ram will be printed 4 times.

We can use for loop and for of loop to iterate the element of an array, explained in loop

Difference between for in and for of loop?

Difference Among filter/Map/Reduce/ForEach

Yes, you can assign an anonymous function to a variables

Yes, you can pass an anonymous function to an argument as well.

Lexical scope is the definition area of an expression. In other words, an item's lexical scope is the place in which the item got created.
Lexical scope tells the range of anything. we use arrow function when we have the issue of lexical scope. For example:-If we daclare let variable inside a function, we will say that the scope of let variable is till this function or the lexical scope of let variable is this function.
We also know that when we declare any object and if we want to use any other property of the same object we use this keyword.
We have also the concept of "lexical scope of this"
Sometimes, we miss the "this keyword" of any object inside the same object and that time we check the lexical scope and fix the issue using arrow function becuase it does not its own this keyword.

Step 1

<script> let obj = { name: ["sarfraz", "john"], age: 25, getName: function () { console.log(this.age); // it will return 25 } } obj.getName(); </script>

Step 2

<script> let obj = { name: ["sarfraz", "john"], age: 25, getName: function () { this.name.map(function (item) { console.log(item + " : " + this.age); // Here this.age will return undefined because different functional //scope has started, here "this" lost itself in this lexical scope }) } } obj.getName(); </script>

Step 3

<script> let obj = { name: ["sarfraz", "john"], age: 25, getName: function () { console.log(this.age); let that = this; // Now, that variable has this keyword and now we will //get the output if we write that.age but This is not a //good practice, instead of this we will use arrow function this.name.map(function (item) { console.log(item + " : " + that.age); }) //arrow function this.name.map((item) => { console.log(item + " : " + this.age); }) } } obj.getName(); </script>

In JavaScript, functions are objects and therefore, functions can take other functions as arguments and can also be returned by other functions.

A callback function is a function that is passed as an argument to another function, to be "called back" at a later time. A function that accepts other function as arguments is called higher-order function. callbacks are not asynchronous by nature, but can be used for asynchronous purposes.

In JavaScript codes are executed synchronously which means 2nd code will be executed once first code is executed but if you want to execute the codes together like asynchronously then we will use callbacks and promise.

First of all we will make a function, name can be anything and passed parameter a, b, callback then a and b have been added in console and third parameter has been called.
We know that in callback function, another function is taken as an argument so prmtr(which is function has been defined above) has been taken.
Here, callback() will control the outer function prmtr().
Since callback() was called first and “I will be used an an argument” printed first and then console.log(a+b). So, result will be “I will be used an an argument” 30.

Built-in Method Values
Date() Returns the present date and time
concat() Joins two strings and returns the new string
push() Adds an item to an array at the end.
pop() Removes and also returns the last element of an array
round() Rounds of the value to the nearest integer and then returns it
length Returns the length of a string
Which built-in method returns the character at the specified index?
charAt()
Which built-in method combines the text of two strings and returns a new string?
concat()
Which built-in method calls function for each element in the array?
forEach()
Which built-in method returns the index within the calling string object of the first occurance of the specified value?
indexOf();
Which built-in method reverses the order of the elements of an array?
reverse()
Which built-in method sorts the elements of an array?
sort()
Which built-in method returns the characters in a string begging at the specified location through the specified number of charactors?
substr()
Which built-in method returns the string representation of the number's value?
toString()
How to read elements of an array in JavaScript?
x.length(Here x is an array which has some values like 1, 2 etc.)

operator is a symbol that performs an operation such as adding, multiplying, dividing etc between two or more than two operants(var a and var b values, numbers etc). We have 8 operators. +, -, *, exponentiaiton(**), division, modulus(remainder %), increment(++), decrement(--)

To know the type of a JavaScript variable, we can use the typeof operator. The data type of JavaScript can be divided into two types. Primitive and non-primitive data type.

The typeof is a unary operator that is placed before its single operand, which can be of any type. its value is a string indicating the data type of the operand.

<script> let arry = [1, 2, 3]; console.log(typeof (arry)); // Object let Obj = { name: "sarfraz" } console.log(typeof (Obj)); // Object // Note: the typeof non primitive data tyes are object and this is why arry and object typeOf is object let a; console.log(typeof (a)); // undefined let a = null; console.log(typeof (a)); // Object let a = false / true; console.log(typeof (a)); // boolean let a = 3.14; console.log(typeof (a)); // number let a = NaN; console.log(typeof (a)); // number let fun = function () { document.write("Hello"); }; fun(); console.log(typeof (fun)); // function </script>

There are three ways to declare variable in javaScript.
var, let and const
let and const were introduced in ES6 to overcome some of the Limitations of var varaiable.

The shadowing is the process where we can declare variables with the same name in different scopes.
We can't specify or declare const and let variabls twice in the same scope.

1.“==” operator is a comparison operator that used to compare the values
2.“===” operator is also a comparison operator that is used to compare the values as well as types.
Example:
var x = 3;
var y = "3";
(x == y)  // it returns true as the value of both x and y is the same
(x === y) // it returns false as the typeof x is "number" and typeof y is "string"

JavaScript is an object-oriented scripting language whereas Java is an object-oriented programming language.
JavaScript applications are run inside a web browser whereas Java applications are usually used in operating systems and virtual machines.
JavaScript needs compiler before running the application code but Java does not need compiler before running the application code.

Async/Await

Async-await functions are executed sequentially one after another in an easier way.

Async/Await function might throw an error when the value is returned.

Generators

Generator functions are executed with one output at a time by the generator’s yield by yield. The ‘value: X, done: Boolean’ is the output result of the Generator function.

Async-await

Async allows us to write promise based codes and a word “Async” before a function means one simple thing that function will always returns a promise and it is an Async function and work in asynchronous mode in the background. The keyword “await” before a function makes function await for a promise. It can be used only with Async function. Async is the latest version of Promise which means we can do all the things that we were doing in Promise and the best part of Async is that we can use one more feature with Async called await. Await is used inside the Async function. Async was introduced in ES8 in 2017 in which we don’t require to declare resolve and reject every time . Now, we can simply make a function and add Async just before the function declaration and it will return a promise. So, here we will use then and catch methods without defining resolve and reject which will reduce the code length and also complexity that we had when using in promises.

Fetch()

Fetch() method was introduced in ECMAScript 2015(ES6). It is the advance version of AJAX which allows to crude with server such as reading and fetching the data from server, updating, inserting and deleting the data from server. We can do the same with AJAX in jQuery and JavaScript . When we use AJAX in jQuery using $.ajax(); , $.get(); , $.post(); methods . It is easy to use due to less coding but we need to add to 50 to 100 KB file to use it as all the codes are inside this file and without it jQuery will not work, which loads every time when we run the jQuery codes which makes the application slow and when we use AJAX in JavaScript using XMLHTTPReuest method, we have to write too many codes. So, to overcome these issues fetch() method was introduced.

Fetch() Syntax:-
1.Fetch();
2.Fetch(file path or URL); file or URL can be text, ajax, php. Fetch returns promise so we will use then() call back function considering the promise is fulfilled.
3.Fetch(file/URL).then(); When we use then() call back function, we usually need to take a function to do the next work but here we will not do so as then() returns promise so we will take then()
4.Fetch(file/URL).then().then()
Feth(file/URL).then(function(response){return r esponse.data;}).then(function(result){console.log(result);})