Skip to main content

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.



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 from this blog

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...