DEV Community

Cover image for Some concept in javascript .
kaustav karmakar
kaustav karmakar

Posted on

Some concept in javascript .

1)What is deep copy and shallow copy in javascript?
Shallow copy

  • When a refference variable is copied to new refference variable using the assignment operator,a shallow copy of the referenced object is created.

  • A reference variable mainly stores the address of the object it refers to.

``` SHALLOW COPY---------------------------------------
const a = { x: 0, y: { z: 0 } };
const b = {...a}; // or const b = Object.assign({}, a);

b.x = 1; // doesn't update a.x
b.y.z = 1; // also updates a.y.z```

Deep copy

  • Unlike the shallow copy, deep copy makes a copy of all the members of the old object, allocates separate memory location for the new object and then assigns the copied members to the new object.

  • In this way, both the objects are independent of each other and in case of any modification to either one the other is not affected.

```// DEEP COPY---------------------------------------
const a = { x: 0, y: { z: 0 } };
const b = JSON.parse(JSON.stringify(a));

b.y.z = 1; // doesn't update a.y.z```

2)Concept of spread and rest operators.
JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same.
Spread Syntax

```function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6```

Rest Syntax

```function sumAll(...args) { // args is the name for the array
let sum = 0;

for (let arg of args) sum += arg;

return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6```

3)Use of window object and document object.
Window Object

  • The window object is a global object that has the properties pertaining to the current DOM document, which is what's in the tab of a browser. window.open(); > Opens a new browser window window.scrollTo(); > Scrolls the document to the specified coordinates For more refference ,click here

Document object

  1. The document object is the root node of the HTML document. 2.The document object is a property of the window object. 3.The document object is accessed with:

window.document or just document
For more refference ,click here
4)Find the set of unique element in the array?
For example [1,1,2,3,4,4,77] should be [1,2,3,4,77]
let arrayElement=[1,1,2,3,4,4,77]
let uniqueElement=[...new Set(arrayElement)]
console.log("_uniqueElement",uniqueElement)

5)What is IIFE(Immediately Invoked Function Expression)?
IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. The signature of it would be as below,
(function () {
// logic here
})();

6)What is the difference between == and === operators?
JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
Two numbers are strictly equal when they are numerically equal. i.e, Having the same number value. There are two special cases in this,
NaN is not equal to anything, including NaN.
Positive and negative zeros are equal to one another.
Two Boolean operands are strictly equal if both are true or both are false.
Two objects are strictly equal if they refer to the same Object.
Null and Undefined types are not equal with ===, but equal with ==. i.e, null===undefined --> false but null==undefined --> true
Some of the example which covers the above cases,

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[]==[] or []===[] //false, refer different objects in memory
{}=={} or {}==={} //false, refer different objects in memory

7)What is web storage?
**Web storage is an API that provides a mechanism by which browsers can store key/value pairs locally within the user's browser, in a much more intuitive fashion than using cookies. The web storage provides two mechanisms for storing data on the client.

Local storage: It stores data for current origin with no expiration date.
Session storage: It stores data for one session and the data is lost when the browser tab is closed.**
8)What is a Cookie?
**A cookie is a piece of data that is stored on your computer to be accessed by your browser. Cookies are saved as key/value pairs.
It can be deleted by setting the expire date in the cookie

document.cookie =
"username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";


**
9)Why do you need web storage?
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Also, the information is never transferred to the server. Hence this is a more recommended approach than Cookies.
10)What are Web Workers?
A web worker, as defined by the World Wide Web Consortium and the Web Hypertext Application Technology Working Group, is a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page.
const myWorker = new Worker("worker.js");
myWorker.postMessage() // sending data
onmessage=(e)=>{e.data} // listenig to message event and capture data

11)What are the restrictions of web workers on DOM?
WebWorkers don't have access to below javascript objects since they are defined in an external files

  1. Window object
  2. Document object
  3. Parent object

  4. Last but not least collected all the information after https://www.w3schools.com/

  5. and https://developer.mozilla.org/

  6. Keep learning and keep following me.

  7. Peace

Latest comments (0)