Rajesh Royal

Posted on May 10, 2021 • Updated on May 21, 2021

Frontend interview - Questions I was asked

#interview #javascript #frontend #questions

These are the questions I was asked In a frontend interview for a ReactJS position.

If you ask me to clone Netflix UI I will do It in shortest possible time, but if you ask me evaluate and string expression without eval(). I might not able to do this.

Hope you guys will find these questions useful.

BTW I failed miserably 👶👶 because I was desperate to get the job and It leads to nervousness which killed my performance.

I will say

Be eager but never be desperate.

let result = [{x: 1}, {x: 2}, {x: 3}];

reduce this array and result should be 6; You are suggested to use arr.reduce() function.

Input:
people = [
  { name: 'Alice', age: 21, gender: "female" },
  { name: 'Max', age: 20, gender: "male" },
  { name: 'Jane', age: 20, gender: "female" }
  { name: 'Jon', age: 21, gender: "male" },
  { name: 'Alex', age: 20, gender: "male" }
]

output: 
{
 male: [
  { name: 'Max', age: 20, },
  { name: 'Jon', age: 21, },
  { name: 'Alex', age: 20, }
],
female: [
 { name: 'Alice', age: 21 },
{ name: 'Jane', age: 20 }
]
}

Input: 
let value = "5+8=x";

Output should be 13 (type should be number);

comment section is yours fellows. 🙏🙏🙏

Thanks.

Top comments (11)

Stepan Zubashev • May 10 '21

result.reduce((acc, item) => acc + item.x, 0)

people.reduce((acc, item) => {
  if (item.gender === 'male') acc.male.push(item);
  else acc.female.push(item);
  return acc;
}, { male: [], female: [] });

eval(value.split('=')[0])

Diogo Goncalves • May 11 '21

people.reduce(...) answer is a masterpiece 👏🏻

Rajesh Royal • May 11 '21 • Edited

Masterpiece.

Alejandra Monroy • Oct 18 '22 • Edited

const sortBy = (arr, attribute) => {
  const set = new Set();
  arr.map((element) => set.add(element[attribute]));

  const sorted = {};

  set.forEach(
    (setElement) => (sorted[setElement] = arr.filter((element) => element[attribute] === setElement))
    .forEach(element => delete element[attribute]),
  );

  return sorted;
};

Antonijo Galic • May 14 '21

Using .filter for the second task

const output = () => {
  const male = people.filter(person => person.gender === 'male');
  const female = people.filter(person => person.gender === 'female');

  return { male: male, female: female };
};

output();

Truong Phan • May 13 '21

A more generic solution to group by any property:

Array.prototype.groupBy = function (p) {
    return this.reduce((g, i) => {
        g[i[p]] = g[i[p]] || [];
        g[i[p]].push(i);
        return g;
    }, {});
};

Rajesh Royal • May 14 '21

Didn't understand It can you explain a little more.

Truong Phan • May 15 '21 • Edited

I may use the implicit variables so that you could read easily, see my comments for the explanations

// get the input property to group by, we attach the function to the prototype object
Array.prototype.groupBy = function (prop) {
    // then apply reduce
    return this.reduce((group, item) => {
        // create new property for the group object if not existed, if yes, reassign from the accumulator 
        group[item[prop]] = group[item[prop]] || [];
        // add new item to the group of property (in this  case, a list) we want to group
        group[item[prop]].push(item);
        return group;
   // create initial empty object to implement reduce
    }, {});
};

Then we can use people.groupBy('gender') or people.groupBy('age')

Saurav Behera • Sep 10 '22

people = [
// { name: 'Alice', age: 21, gender: "female" },
// { name: 'Max', age: 20, gender: "male" },
// { name: 'Jane', age: 20, gender: "female" },
// { name: 'Jon', age: 21, gender: "male" },
// { name: 'Alex', age: 20, gender: "male" }
// ]
// const male=people.filter((el)=>el.gender=="male")
// const female=people.filter((el)=>el.gender=="female")
// console.log({male:male,female:female})