front-end-mock-interview-questions.md

/**
 * Frontend Mock Interview
 * 1. Web APIs and technologies
 * 2. Coding questions
 * 3. Web application frameworks questions
 */

/**
 * 1. Web APIs and technologies
 */

/**
 * a. What's the difference between var, let and const?
 * b. How many types are there in the ECMAScript Standard? Can you name and explain them?
 * c. What's your understanding of using a class selector vs id in CSS?
 */

/**
 * 2. Coding questions
 */
/**
 * a. Given an array with items that are themselves arrays of objects, write a method to flatten the array
 
 input: [[{}]]
 output: [{}]
 */

const collection = [{ id: 1 }, [{ id: 1 }, { id: 2 }], { id: 3 }];
const flatten = items =>
  items.reduce(
    (acc, item) => [...acc, ...(Array.isArray(item) ? item : [item])],
    []
  );

console.log(flatten(collection))

const flattenUniq = items =>
  items.reduce(
    (acc, item) => {
      const exists = (listItem) => acc.find((i) => JSON.stringify(i) === JSON.stringify(listItem))
      return [...acc, ...(Array.isArray(item) ? item.filter((it) => !exists(it)) : [item])]
    },
    []
  );

console.log(flattenUniq(collection))

/**
 * b. Given an array of objects, write a method that groups them by a certain property, maintaining their order in the key / value pair
 
 input: [{}]
 output: {[key]: [{}]}
 */

const items = [{id: 1}, {id: 2}, {id: 1}, {id: 3}]
const groupBy = (list, key) => list.reduce((acc, item) => ({...acc, ...(acc[item[key]] ? {[item[key]]: [...acc[item[key]], item]} : {[item[key]]: [item]}) }), {})

console.log(groupBy(items, 'id'))
/**
 * 3. Web application framework questions
 */

/**
 * a. When to use an application framework like react, vuejs, etc?
 * b. What are your thoughts on application state management with any of these frameworks?
 */