Frontend interview - Questions I was asked

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.

Comments

[Stepan Zubashev]

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]

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

[Rajesh Royal]

Masterpiece.

[Truong Phan]

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]

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

[Truong Phan]

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')

[Alejandra Monroy]

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]

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();

[Saurav Behera]

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})

[Saurav Behera]

// let result = [{x: 1}, {x: 2}, {x: 3}];
// res=result.reduce((acc,el)=>acc+el.x,0)

[Saurav Behera]

let value = "5+8=x";
let arr=value.split("=")
arr=arr[0].split("+").map(Number).reduce((acc,e)=>acc+e)
console.log(arr)