{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-16-group-objects-improved/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"6e1dada3-32ce-5121-bf7c-f6f3d0ff04b2","html":"

Problem

\n

You have an array of objects and want to group them either by a direct property or\nby a nested property (i.e., a combination of recipe 21\nand recipe 22).

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: the groupBy() function that takes a property name as parameter (based on recipe 21, but renamed to groupByPropertyName()) …

    \n
    const groupByPropertyName = (array, property) =>\n   array.reduce((grouped, object) => {\n     let value = object[property];\n     grouped[value] = grouped[value] || [];\n     grouped[value].push(object);\n     return grouped;\n   }, {});
    \n
    2. \n
  2. \n

    … and the groupBy() function that takes a function as parameter (based on recipe 22, but renamed to groupByFunction()).

    \n
    const groupByFunction = (array, fn) =>\n  array.reduce((grouped, object) => {\n    let value = fn(object);\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    3. \n
  3. \n

    The second variant (groupByFunction()) is of course more powerful, since you can group objects by any criterion, e.g.,\na direct property or a nested property:

    \n
    let persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe',\n    address: {\n      city: 'London'\n    }\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe',\n    address: {\n      city: 'Birmingham'\n    }\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith',\n    address: {\n      city: 'Birmingham'\n    }\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith',\n    address: {\n     city: 'London'\n    }\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter',\n    address: {\n      city: 'Birmingham'\n    }\n  }\n]\nlet groupedByFirstName = groupByFunction(persons, person => person.firstName);\nlet groupedByCity = groupByFunction(persons, person => person.address.city);
    \n
    4. \n
  4. \n

    However it would be nice if in case of a direct property we simply could pass the name of that property\ninstead of a function (so that we again have just one function named groupBy()).

    \n
    let groupedByFirstName = groupBy(array, 'firstName');\nlet groupedByCity = groupBy(persons, person => person.address.city);
    \n
    5. \n
  5. For allowing this we simply can combine the two functions groupByPropertyName() and groupByFunction().\nThe plan: check if the parameter is a string (i.e., a property name) or if it is a function and apply\nthe appropriate logic.
    6. \n
  6. \n

    The first thing is to define two functions isString() and isFunction() plus another helper function isOfType(),\nso that we can check the types.

    \n
    const isOfType = type => x => Object.prototype.toString.call(x) === type\nconst isString = x => isOfType('[object String]')(x)\nconst isFunction = x => isOfType('[object Function]')(x)
    \n

    Note: the best and most effective way of checking the type of something is not the typeof operator, but\nthe usage of the Object.prototype.toString method as shown in the listing above.\nThe detailed reason for this will be explained in a later recipe, when we handle type\nchecking in JavaScript, but for the moment you can remember: the typeof-operator is not\nthat precise.

    \n
    7. \n
  7. \n

    Now we change the groupBy() function to check the parameter with the help of the type-checking\nfunctions just created. If the parameter is a string, get the property of the particular object\nwith that name …

    \n
    const groupBy = (array, x) =>\n  array.reduce((grouped, object) => {\n    let value = '';\n    if(isString(x)) {\n      value = object[x];\n    }\n    ...\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    8. \n
  8. \n

    … else if it is a function, call that function passing the particular object …

    \n
    const groupBy = (array, x) =>\n  array.reduce((grouped, object) => {\n    let value = '';\n    if(isString(x)) {\n      value = object[x];\n    } else if(isFunction(x)) {\n      value = x(object);\n    }\n    ...\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    9. \n
  9. \n

    … and in case nothing of that is true throw a type error.

    \n
    const groupBy = (array, x) =>\n  array.reduce((grouped, object) => {\n    let value = '';\n    if(isString(x)) {\n      value = object[x];\n    } else if(isFunction(x)) {\n      value = x(object);\n    } else {\n      throw new TypeError('String or function expected');\n    }\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    10. \n
  10. \n

    Voilá, now we have a function that is able to group objects either by a property name\nor by a function.

    \n
    const isOfType = type => x => Object.prototype.toString.call(x) === type\nconst isString = x => isOfType('[object String]')(x)\nconst isFunction = x => isOfType('[object Function]')(x)\nconst groupBy = (array, x) =>\n  array.reduce((grouped, object) => {\n    let value = '';\n    if(isString(x)) {\n      value = object[x];\n    } else if(isFunction(x)) {\n      value = x(object);\n    } else {\n      throw new TypeError('String or function expected');\n    }\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});\n  let groupedByFirstName = groupBy(persons, 'firstName');\n  let groupedByCity = groupBy(persons, person => person.address.city);
    \n
    11. \n
\n

Notes

\n","fields":{"slug":"/posts/en/2016-07-16-group-objects-improved/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-16T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Group objects by direct property or by nested property"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-16-group-objects-improved/"}}}