{"id":136374,"date":"2024-07-11T13:03:53","date_gmt":"2024-07-11T13:03:53","guid":{"rendered":"https:\/\/www.sushilkumar.ind.in\/blog\/?p=136374"},"modified":"2024-07-12T04:40:25","modified_gmt":"2024-07-12T04:40:25","slug":"uber-nodejs-javascript-and-reactjs-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/uncategorized\/uber-nodejs-javascript-and-reactjs-interview-questions-answers\/","title":{"rendered":"Uber NodeJS JavaScript and ReactJS interview questions answers"},"content":{"rendered":"\n

Deep Copy vs Shallow Copy<\/strong><\/h2>\n\n\n\n

Shallow Copy<\/strong><\/h3>\n\n\n\n

A shallow copy creates a new object with a new reference, but the properties of the new object refer to the same memory locations as the properties of the original object.<\/p>\n\n\n\n

JavaScript Code Example:<\/strong><\/p>\n\n\n\n

const original = { a: 1, b: { c: 2 } };\nconst shallowCopy = { ...original };\nshallowCopy.b.c = 3;\n\nconsole.log(original.b.c);  \/\/ Output: 3 (Because the inner object is shared)<\/code><\/pre>\n\n\n\n
Deep Copy<\/strong><\/h3>\n\n\n\n
A deep copy creates a new object and recursively copies all objects and arrays, ensuring no references to the original object.<\/p>\n\n\n\n
JavaScript Code Example:<\/strong><\/p>\n\n\n\n
const original = { a: 1, b: { c: 2 } };\nconst deepCopy = JSON.parse(JSON.stringify(original));\ndeepCopy.b.c = 3;\n\nconsole.log(original.b.c);  \/\/ Output: 2 (The inner object is not shared)<\/code><\/pre>\n\n\n\n
Deep Copy using a Custom Function<\/strong><\/h3>\n\n\n\n
function deepCopy(obj) {\n    return JSON.parse(JSON.stringify(obj));\n}\n\nconst original = { a: 1, b: { c: 2 } };\nconst copy = deepCopy(original);\ncopy.b.c = 3;\n\nconsole.log(original.b.c);  \/\/ Output: 2<\/code><\/pre>\n\n\n\n
\n\n\n\n
Search Key-Value Pairs in Nested Object with Recursions<\/strong><\/h2>\n\n\n\n
JavaScript Code Example:<\/strong><\/p>\n\n\n\n
function findValue(obj, keyToFind) {\n    let result = null;\n\n    function search(obj) {\n        for (let key in obj) {\n            if (key === keyToFind) {\n                result = obj[key];\n                return;\n            }\n            if (typeof obj[key] === 'object' && obj[key] !== null) {\n                search(obj[key]);\n            }\n        }\n    }\n\n    search(obj);\n    return result;\n}\n\nconst data = { a: { b: { c: 1 } } };\nconsole.log(findValue(data, 'c'));  \/\/ Output: 1<\/code><\/pre>\n\n\n\n
\n\n\n\n
What is Currying Function?<\/strong><\/h2>\n\n\n\n
Currying is a technique where a function returns another function that accepts one argument at a time.<\/p>\n\n\n\n
JavaScript Code Example:<\/strong><\/p>\n\n\n\n
function multiply(a) {\n    return function(b) {\n        return function(c) {\n            return a * b * c;\n        };\n    };\n}\n\nconsole.log(multiply(3)(2)(6));  \/\/ Output: 36<\/code><\/pre>\n\n\n\n
\n\n\n\n
Prototype Inheritance and Keeping Child Prototype Intact<\/strong><\/h2>\n\n\n\n
JavaScript Code Example:<\/strong><\/p>\n\n\n\n
function Parent() {\n    this.parentProperty = 'parent';\n}\n\nParent.prototype.parentMethod = function() {\n    console.log('Parent method');\n};\n\nfunction Child() {\n    Parent.call(this);\n    this.childProperty = 'child';\n}\n\n\/\/ Set up inheritance\nChild.prototype = Object.create(Parent.prototype);\nChild.prototype.constructor = Child;\n\nChild.prototype.childMethod = function() {\n    console.log('Child method');\n};\n\nconst child = new Child();\nchild.parentMethod();  \/\/ Output: 'Parent method'\nchild.childMethod();   \/\/ Output: 'Child method'<\/code><\/pre>\n\n\n\n
Using Object.create<\/code> ensures that the Child.prototype<\/code> object correctly inherits from Parent.prototype<\/code>.<\/p>\n\n\n\n
\n\n\n\n
Event Loop in Detail<\/strong><\/h2>\n\n\n\n
The Event Loop is a mechanism that allows JavaScript to perform non-blocking operations by using a single-threaded model. It handles callbacks, promises, and other asynchronous operations.<\/p>\n\n\n\n
Steps of the Event Loop:<\/strong><\/p>\n\n\n\n
    \n
  1. Execute Synchronous Code<\/strong>: Execute all the code that is present in the execution context.<\/li>\n\n\n\n
  2. Check the Callbacks Queue<\/strong>: After executing the code, the event loop checks the callback queue (task queue) to see if there are any functions to run.<\/li>\n\n\n\n
  3. Process the Callbacks<\/strong>: Process the functions from the callback queue.<\/li>\n\n\n\n
  4. Check for Microtasks<\/strong>: Before moving to the next event loop iteration, it processes microtasks (promises).<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n
    Output Question Based on Event Loop<\/strong><\/h2>\n\n\n\n
    console.log(1);\n\nsetTimeout(() => { console.log(2) }, 0);\n\nPromise.resolve().then(() => console.log(3));\n\nPromise.resolve().then(() => setTimeout(() => { console.log(4) }, 0));\n\nPromise.resolve().then(() => console.log(5));\n\nsetTimeout(() => { console.log(6) }, 0);\n\nconsole.log(7);<\/code><\/pre>\n\n\n\n
    Output:<\/strong><\/p>\n\n\n\n
      \n
    1. Synchronous Code<\/strong>: console.log(1)<\/code> logs 1<\/code><\/li>\n\n\n\n
    2. Microtasks<\/strong>: Promise.resolve().then(() => console.log(3))<\/code> logs 3<\/code><\/li>\n\n\n\n
    3. Microtasks<\/strong>: Promise.resolve().then(() => console.log(5))<\/code> logs 5<\/code><\/li>\n\n\n\n
    4. Microtasks<\/strong>: Promise.resolve().then(() => setTimeout(() => { console.log(4) }, 0))<\/code> is scheduled to run after the current microtasks<\/li>\n\n\n\n
    5. Timeouts<\/strong>: setTimeout(() => { console.log(2) }, 0)<\/code> and setTimeout(() => { console.log(6) }, 0)<\/code> are scheduled to run in the next event loop iteration<\/li>\n\n\n\n
    6. Synchronous Code<\/strong>: console.log(7)<\/code> logs 7<\/code><\/li>\n\n\n\n
    7. Next Microtasks<\/strong>: Logs 4<\/code> from the setTimeout<\/code> wrapped in a Promise<\/code> resolved<\/li>\n\n\n\n
    8. Timeouts<\/strong>: Logs 2<\/code> and 6<\/code> from the setTimeout<\/code> calls<\/li>\n<\/ol>\n\n\n\n
      Output Order:<\/strong><\/p>\n\n\n\n
      1\r\n7\r\n3\r\n5\r\n2\r\n6\r\n4<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      React<\/strong><\/h2>\n\n\n\n
      Call Demo API and Filter List as We Type in Input Box<\/strong><\/h3>\n\n\n\n
      JavaScript Code Example (React):<\/strong><\/p>\n\n\n\n
      import React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nconst DemoComponent = () => {\n    const [data, setData] = useState([]);\n    const [query, setQuery] = useState('');\n    const [filteredData, setFilteredData] = useState([]);\n\n    useEffect(() => {\n        async function fetchData() {\n            const result = await axios('https:\/\/api.example.com\/data');\n            setData(result.data);\n        }\n        fetchData();\n    }, []);\n\n    useEffect(() => {\n        setFilteredData(data.filter(item => item.name.toLowerCase().includes(query.toLowerCase())));\n    }, [query, data]);\n\n    return (\n        <div>\n            <input type=\"text\" value={query} onChange={e => setQuery(e.target.value)} \/>\n            <ul>\n                {filteredData.map(item => (\n                    <li key={item.id}>{item.name}<\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default DemoComponent;<\/code><\/pre>\n\n\n\n
      How to Optimize React and Above React Project<\/strong><\/h3>\n\n\n\n
        \n
      1. Use Memoization<\/strong>: Use React.memo<\/code>, useMemo<\/code>, and useCallback<\/code> to prevent unnecessary re-renders.<\/li>\n\n\n\n
      2. Code Splitting<\/strong>: Dynamically import components to split code and improve load times.<\/li>\n\n\n\n
      3. Virtualization<\/strong>: Use libraries like react-window<\/code> for rendering large lists efficiently.<\/li>\n\n\n\n
      4. Avoid Inline Functions<\/strong>: Move functions out of render methods to prevent creating new function instances.<\/li>\n\n\n\n
      5. Optimize Dependencies<\/strong>: Ensure that useEffect<\/code> and useCallback<\/code> dependencies are well managed to avoid excessive re-renders.<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        JavaScript<\/strong><\/h2>\n\n\n\n
        How to Access DOM Elements in JS<\/strong><\/h3>\n\n\n\n
        JavaScript Code Example:<\/strong><\/p>\n\n\n\n
        const elementById = document.getElementById('myId');\nconst elementByClassName = document.getElementsByClassName('myClass')[0];\nconst elementByTagName = document.getElementsByTagName('div')[0];\nconst elementByQuerySelector = document.querySelector('.myClass');\nconst elementsByQuerySelectorAll = document.querySelectorAll('.myClass');<\/code><\/pre>\n\n\n\n
        What is Iframe<\/strong><\/h3>\n\n\n\n
        An <iframe><\/code> element allows you to embed another HTML document within the current document.<\/p>\n\n\n\n
        Example HTML Code:<\/strong><\/p>\n\n\n\n
        <iframe src=\"https:\/\/www.example.com\" width=\"600\" height=\"400\"><\/iframe><\/code><\/pre>\n\n\n\n
        How to Access an Element from Iframe<\/strong><\/h3>\n\n\n\n
        JavaScript Code Example:<\/strong><\/p>\n\n\n\n
        const iframe = document.getElementById('myIframe');\nconst iframeDocument = iframe.contentDocument || iframe.contentWindow.document;\nconst elementInIframe = iframeDocument.getElementById('elementId');<\/code><\/pre>\n\n\n\n
        What is the Difference Between Window and Document<\/strong><\/h3>\n\n\n\n
          \n
        • Window<\/strong>: Represents the browser window or tab, and has properties like alert<\/code>, open<\/code>, and location<\/code>.<\/li>\n\n\n\n
        • Document<\/strong>: Represents the HTML content of the window and has properties like getElementById<\/code>, querySelector<\/code>, and createElement<\/code>.<\/li>\n<\/ul>\n\n\n\n
          What are Timers in JS<\/strong><\/h3>\n\n\n\n
          Timers are functions that allow you to execute code after a delay.<\/p>\n\n\n\n
            \n
          • setTimeout(callback, delay)<\/code><\/strong>: Executes callback<\/code> after delay<\/code> milliseconds.<\/li>\n\n\n\n
          • setInterval(callback, interval)<\/code><\/strong>: Repeatedly executes callback<\/code> every interval<\/code> milliseconds.<\/li>\n<\/ul>\n\n\n\n
            What is Promise in JS<\/strong><\/h3>\n\n\n\n
            A Promise<\/code> represents a value that may be available now, or in the future, or never. It is a way to handle asynchronous operations.<\/p>\n\n\n\n
            JavaScript Code Example:<\/strong><\/p>\n\n\n\n
            const promise = new Promise((resolve, reject) => {\n    \/\/ Asynchronous operation\n    if (true) {\n        resolve('Success');\n    } else {\n        reject('Error');\n    }\n});\n\npromise.then(result => console.log(result)).catch(error => console.log(error));<\/code><\/pre>\n\n\n\n
            Certainly! Let\u2019s dive into the details of deep cloning limitations using JSON.parse(JSON.stringify(obj))<\/code> and explore the concept of closures in JavaScript with an example.<\/p>\n\n\n\n
            \n\n\n\n
            Limitations of Deep Cloning Using JSON.parse(JSON.stringify(obj))<\/code><\/strong><\/h2>\n\n\n\n
            The JSON.parse(JSON.stringify(obj))<\/code> method is a common approach for deep cloning objects in JavaScript, but it has several limitations:<\/p>\n\n\n\n
            **1. *Date<\/code> Objects are Lost<\/em>*:<\/h3>\n\n\n\n
            When you use JSON.stringify<\/code>, Date<\/code> objects are converted to strings. The resulting Date<\/code> information is lost after parsing.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const original = { date: new Date() };\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(original.date);  \/\/ Output: Date object\nconsole.log(clone.date);    \/\/ Output: String representation of the Date object\nconsole.log(clone.date instanceof Date); \/\/ Output: false<\/code><\/pre>\n\n\n\n
            **2. *Functions<\/code> are Not Cloned<\/em>*:<\/h3>\n\n\n\n
            Functions cannot be cloned using JSON.stringify<\/code> because functions are not supported in JSON format.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const original = { func: () => console.log('Hello') };\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(clone.func);  \/\/ Output: undefined<\/code><\/pre>\n\n\n\n
            **3. *undefined<\/code>, Infinity<\/code>, and NaN<\/code> Values are Ignored<\/em>*:<\/h3>\n\n\n\n
            These values are not represented in JSON, so they are lost in the cloning process.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const original = { a: undefined, b: Infinity, c: NaN };\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(clone.a);  \/\/ Output: undefined\nconsole.log(clone.b);  \/\/ Output: null (because Infinity is not represented in JSON)\nconsole.log(clone.c);  \/\/ Output: null (because NaN is not represented in JSON)<\/code><\/pre>\n\n\n\n
            **4. *RegExp<\/code> Objects are Lost<\/em>*:<\/h3>\n\n\n\n
            Regular expressions are not preserved through JSON.stringify<\/code>.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const original = { regex: \/test\/ };\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(clone.regex);  \/\/ Output: undefined\nconsole.log(clone.regex instanceof RegExp); \/\/ Output: false<\/code><\/pre>\n\n\n\n
            **5. *Symbol<\/code> Properties are Ignored<\/em>*:<\/h3>\n\n\n\n
            Properties keyed by Symbol<\/code> are not included in the JSON representation.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const sym = Symbol('mySymbol');\nconst original = { [sym]: 'value' };\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(clone[sym]);  \/\/ Output: undefined<\/code><\/pre>\n\n\n\n
            **6. *Circular References are Not Supported<\/em>*:<\/h3>\n\n\n\n
            JSON.stringify<\/code> cannot handle objects with circular references.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            const a = {};\na.b = a;\n\ntry {\n    const clone = JSON.parse(JSON.stringify(a));\n} catch (error) {\n    console.error(error);  \/\/ Output: TypeError: Converting circular structure to JSON\n}<\/code><\/pre>\n\n\n\n
            **7. *Prototype Chain is Not Cloned<\/em>*:<\/h3>\n\n\n\n
            Only the properties of the object are cloned, not its prototype chain.<\/p>\n\n\n\n
            Example:<\/strong><\/p>\n\n\n\n
            function MyClass() {\n    this.name = 'example';\n}\nMyClass.prototype.greet = function() { return 'Hello'; };\n\nconst original = new MyClass();\nconst clone = JSON.parse(JSON.stringify(original));\n\nconsole.log(clone.greet);  \/\/ Output: undefined<\/code><\/pre>\n\n\n\n
            \n\n\n\n
            What is the Usage of Closure? Show an Example<\/strong><\/h2>\n\n\n\n
            What is a Closure?<\/strong><\/h3>\n\n\n\n
            A closure is a feature in JavaScript where an inner function retains access to the variables of its outer function even after the outer function has finished executing. This allows for the creation of private variables and functions, and it supports data encapsulation and function factories.<\/p>\n\n\n\n
            Usage of Closures<\/strong><\/h3>\n\n\n\n
              \n
            1. Data Encapsulation<\/strong>: Protect data from being accessed directly from outside the function.<\/li>\n\n\n\n
            2. Function Factories<\/strong>: Create functions with specific configurations.<\/li>\n\n\n\n
            3. Maintaining State<\/strong>: Keep track of state across function calls.<\/li>\n<\/ol>\n\n\n\n
              Example of a Closure<\/strong><\/h3>\n\n\n\n
              1. Data Encapsulation Example:<\/strong><\/p>\n\n\n\n
              function createCounter() {\n    let count = 0;  \/\/ `count` is a private variable\n    return function() {\n        count++;\n        return count;\n    };\n}\n\nconst counter = createCounter();\nconsole.log(counter());  \/\/ Output: 1\nconsole.log(counter());  \/\/ Output: 2\nconsole.log(counter());  \/\/ Output: 3<\/code><\/pre>\n\n\n\n
              In this example, count<\/code> is a private variable that is only accessible through the returned inner function.<\/p>\n\n\n\n
              2. Function Factory Example:<\/strong><\/p>\n\n\n\n
              function multiplyBy(factor) {\n    return function(num) {\n        return num * factor;\n    };\n}\n\nconst double = multiplyBy(2);\nconsole.log(double(5));  \/\/ Output: 10\n\nconst triple = multiplyBy(3);\nconsole.log(triple(5));  \/\/ Output: 15<\/code><\/pre>\n\n\n\n
              Here, multiplyBy<\/code> is a function factory that creates functions for multiplying numbers by a specific factor.<\/p>\n\n\n\n
              3. Maintaining State Example:<\/strong><\/p>\n\n\n\n
              function createCounter(initialValue) {\n    let count = initialValue;\n    return {\n        increment() {\n            count++;\n            return count;\n        },\n        decrement() {\n            count--;\n            return count;\n        },\n        getValue() {\n            return count;\n        }\n    };\n}\n\nconst myCounter = createCounter(10);\nconsole.log(myCounter.getValue());  \/\/ Output: 10\nconsole.log(myCounter.increment()); \/\/ Output: 11\nconsole.log(myCounter.decrement()); \/\/ Output: 10<\/code><\/pre>\n\n\n\n
              In this example, myCounter<\/code> maintains the state of the count variable through multiple function calls.<\/p>\n\n\n\n
              \n\n\n\n
              Summary Table of Closures<\/strong><\/h3>\n\n\n\n
              Feature<\/strong><\/th>Description<\/strong><\/th>Example<\/strong><\/th><\/tr><\/thead>
              Data Encapsulation<\/strong><\/td>Hide private data from the outside world<\/td>const counter = createCounter();<\/code><\/td><\/tr>
              Function Factory<\/strong><\/td>Generate functions with customized behavior<\/td>const double = multiplyBy(2);<\/code><\/td><\/tr>
              Maintaining State<\/strong><\/td>Preserve state between function calls<\/td>const myCounter = createCounter(10);<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
              \n","protected":false},"excerpt":{"rendered":"
              Deep Copy vs Shallow Copy Shallow Copy A shallow copy creates a new object with a new reference, but the properties of the new object refer to the same memory locations as the properties of the original object. JavaScript Code Example: const original = { a: 1, b: { c: 2 } }; const shallowCopy …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-136374","post","type-post","status-publish","format-standard","","category-uncategorized"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-ztA","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136374"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=136374"}],"version-history":[{"count":3,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136374\/revisions"}],"predecessor-version":[{"id":136377,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136374\/revisions\/136377"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=136374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=136374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=136374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}