Common React Coding Interview Questions

 Coding Interview Questions


1. Remove Duplicates in below array of objects

const persons = [

    {name: "rakesh", age: 25, salary: 10000, id: 1},

    {name: "rakesh", age: 25, salary: 10000, id: 1},

    {name: "mahesh", age: 37, salary: 100000, id: 2},

    {name: "mahesh", age: 37, salary: 100000, id: 2},

    {name: "mahesh", age: 37, salary: 100000, id: 2},

    {name: "rakesh", age: 32, salary: 70000, id: 3},

    {name: "rakesh", age: 32, salary: 70000, id: 3},

    {name: "ramesh", age: 30, salary: 60000, id: 4},

    {name: "ramesh", age: 30, salary: 60000, id: 4},

    {name: "ramesh", age: 30, salary: 60000, id: 4},

    {name: "sukesh", age: 29, salary: 40000, id: 5},

    {name: "sukesh", age: 29, salary: 40000, id: 5},

    {name: "sukesh", age: 29, salary: 40000, id: 5}

]


Solution:


const uniqueArr = [];


const seenIds = {};


for(let person of persons){

if(!seenIds[person.id]){

seenIds[person.id] = true;

uniqueArr.push(person)

}

}


console.log(uniqueArr)


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


2. Remove duplicates in array of strings 1st way


Solution:


const alphabets = ["a", "b", "c", "a", "b", "c"]


const uniqueAlphabets = [...new Set(alphabets)]


console.log(uniqueAlphabets);


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


3. Remove Duplicates in array 2nd way


Solution:


const letters = ["a", "b", "c", "a", "b", "c"]


const uniqueArr = []

                       

for(let letter of letters){

if(!uniqueArr.includes(letter)){

uniqueArr.push(letter)

}

}


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


4. Sort an array of strings


const fruits = ["mango", "grapes", "apples", "banana"]


const sortedArr = fruits.sort()


console.log(sortedArr)


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


5. Sort in ascending & descending order


Solution:


const numbers = [1, 543, 65, 76, 43]


const ascendingSortedNumbers = numbers.sort((a, b) => a-b)


const descendingSortedNumbers = numbers.sort((a, b) => b-a)


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


6. Sort by salary of persons in descending and ascending order for below array of objects


const arr = [{name: "rakesh", age: 25, salary: 10000}, {name: "mahesh", age: 28, salary: 100000}, {name: "ramesh", age: 29, salary: 70000}, {name: "mukesh", age: 27, salary: 60000}]


const sortByAsc = arr.sort((a,b) => a.salary - b.salary)


const sortByDsc = arr.sort((a,b) => b.salary - a.salary)


console.log(sortByAsc)

console.log(sortByDsc)


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


Conversion of String to Array and Array to String


let string = "rajesh"


const array = [...string]


console.log(array) // Output: ["r", "a", "j", "e", "s", "h"]


const newArray = ["r", "a", "m", "e", "s", "h"]


const str = newArray.join("")


console.log(str) // Output: "ramesh"


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Object Methods


const obj = {

name: "rajesh",

age: 28

}


Object.keys(obj) // Output: ["name", "age"]

Object.values(obj) // Output: ["rajesh", "28"]

Object.entries(obj) // Output: [["name", "rajesh"], ["age", "28"]]

Object.freeze(obj) // Used to avoid mutating the original object

Object.seal(obj) // Used to mutate the original object but not allowed additional properties

Object.isFrozen(obj) // Returns true/false if it is freezed/unfreezed

Object.isSealed(obj) // Returns true/false if it is sealed/unsealed

Object.hasOwn(obj, 'age') // Return true/false if the property exists


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Ways to Deep clone of Array and Objects


const arr = [1, 2, 3, 4, 5]


const arr1 = [...arr]

const arr2 = JSON.parse(JSON.stringify(arr))


const arr3 = structuredClone(arr)


import cloneDeep from "lodash/cloneDeep";


const arr4 = cloneDeep(arr)


Comments

Post a Comment

Popular posts from this blog

insightsoftware vue js

CSS 1. Specificity What is CSS specificity? It’s the priority system CSS uses when multiple rules target the same element. Higher specificity wins. Order (low → high): Element selectors ( div , p , span ) → 0,0,1 Class / attribute / pseudo-class ( .btn , [type="text"] , :hover ) → 0,1,0 ID selectors ( #main ) → 1,0,0 Inline style ( style="color:red" ) → 1,0,0,0 (highest among normal) !important overrides normal specificity (but try to avoid it). Example: p { color: blue; } /* element */ .text { color: green; } /* class */ #intro { color: red; } /* id */ For <p id="intro" class="text">Hello</p> → color will be red . 2. How to show scroll: overflow-y: auto vs scroll overflow-y: auto Shows vertical scrollbar only when content is taller than container. Cleaner UI (no scrollbar if not needed). .container { max-height: 200px; overflow-y: auto; } overflow-y: scroll Scrollbar is...
Read more

Apexon React.js Interview

1. What are features developed in your career 2. What are the custom components and have you created any. 3. Find the largest difference between numbers from a numeric array. const numberArray = [5, 12, 4, 8, 3, 9]; Without any in built method: Approach I: const largestDiff = (arr) => {     let result;     let maxItem;     let minItem;     for(let i = 0; i < numberArray.length; i++){         maxItem = numberArray[0]         minItem = numberArray[0]         for(let j = 0; j < numberArray.length; j++){             if(maxItem < numberArray[j]){                 maxItem = numberArray[j]             }else if(minItem < numberArray[j]){                 minItem = minItem             }else{       ...
Read more

TCS vue js

 1st round 1. Shallow vs deep copy 2.  string reverse input 'js' output 'sj' 3. Arrow function uses 4. foreach vs map 5. virtual DOM  2nd round 1. Vuex vs pinina 2. inject provide 3. inject provide vs store management 4. center an element  5..classA, .classB what it will do 6. .classA .classB what it will do 7. let a =[10],b b=a a.push[3] console.log(a,b) 8. sum(a,b) , sum(a,b,c) how function will received those arguments 9. rest vs spread 10. object de structuring 11. compare object in js 12. remove duplicate in array 13. how will you delete an data in object 14. event bubbling        1. Shallow Copy vs Deep Copy Shallow Copy : Creates a new object but copies only the references to nested objects. Changes made to nested objects in the copied object affect the original. Used with methods like   Object.assign()   or spread operator   {...obj }   in JavaScript. let original = { a: 1, b: { c: 2 } }; let shallowCopy = {...original ...
Read more