2 JavaScript Interview Questions that you must know.





In this article, we will see in detail a couple of interview questions in Javascript.

1)What is a deep copy and Shallow copy?

Shallow copy: In shallow copy, all the top-level primitives get a copy excluding objects which are still connected to the original value.
Note: If the array is of strings or number it gets copied but in case of an array of objects it is still connected to the original value.

Primitive data types include the following:
Number — e.g. 1
String — e.g. 'Hello'
Boolean — e.g. true
undefined
null

Example:
var tshirt={
    size:170,
    sizeInLocal:'L',
    sizeAvailable:{
    'm':"Available" 
    }
}
Lets make a copy a shallow copy of tshirt object:

var tshirt1=Object.assign({}, tshirt)
tshirt1.sizeAvailable.m="NotAvailable"//Here tshirt.sizeAvailable.m will also become NotAvailable .
tshirt1.size=150;//Only value of tshirt1.size is changed and not tshirt.size as size is of primitive type.  


Deep Copy: In this case primitives as well as objects get copied. There is no connection with the original value. So if you change any value of the object it will not reflect to the original object.

Example:
Lets make a deep copy of this tshirt object:
var tshirt1=JSON.parse(JSON.stringfy(tshirt));

Note: You can use your own implementation for deep copy if object contains functions, getter and setter as for such objects this method is not recommended. 

tshirt1.sizeAvailable.m="NotAvailable"//Here tshirt.sizeAvailable.m will not change.

Hope you got the difference. 
I would recommend you to try this example by logging the object on the console.


2)What is Proxy in JavaScript?
The proxy feature introduced in ECMAScript2015. 
With Proxy, we can find a loyal housekeeper for the object and help us enhance the original functions of the object.
At the most basic level, the syntax for using Proxy looks something like this:
// This is a normal object
let obj = {a: 1, b:2}
// Configure obj with a housekeeper using Proxy
let objProxy = new Proxy(obj, handler)

In the handler, we can list the actions we want to proxy. 

Example:
let person1 = {
  name: 'Jon',
  age: 23
}

By default, however, JavaScript does not provide a security mechanism, 
and you can change this value at will.

person1.age = 9999

person1.age = 'hello world'

In order to make our code more secure, we can wrap our object with Proxy. 
We can intercept the object’s set operation and verify whether the new value of the age field conforms to the rules.

let ageValidate = {
  set (item, property, value) {
    if (property === 'age') {
      if (!Number.isInteger(value) || value < 0 || value > 150) {
        throw new TypeError('age should be an integer between 0 and 150');
      }
    }
    item[property] = value
  }
}
let person= new Proxy(person1,ageValidate)
Now if we try to set 
person.age="23"//Will get an error "age should be an integer between 0 and 150"

Note: Please check the documentation for complete handlers available.


I hope you like this article and if any doubts please let me know in the comment section.

Subscribe this blog for more such interview questions.
You can also follow me on Twitter or Linkedin for the latest updates.

Written By:

Saurabh Joshi


Comments

  1. Good content !! a very subtle way to intercept get, set and delete operations.
    definitely going to use this :)

    ReplyDelete
  2. Pretty good. But I hate most of the questions asked at interviews cause I already have done this before, but it does not mean I know how to explain.

    ReplyDelete
  3. Most of us hate it. Manytimes we know the solution but can't explain

    ReplyDelete

Post a Comment

Popular Posts