{"componentChunkName":"component---src-templates-index-template-js","path":"/page/3","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"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/","categorySlug":null},"frontmatter":{"title":"Group objects by direct property or by nested property","date":"2016-07-16T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You have an array of objects and want to group them by a nested property.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array of objects (e.g., persons) with nested properties (e.g., address.city) …

    \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]
    \n
    2. \n
  2. \n

    … and our implementation of the groupBy() function from yesterday’s recipe.

    \n
    const groupBy = (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
    3. \n
  3. \n

    Change that function to accept a function (fn) as second parameter instead of a property name …

    \n
    const groupBy = (array, fn) =>              // This line changed.\n  array.reduce((grouped, object) => {\n    ...\n  }, {});
    \n
    4. \n
  4. \n

    … and inside the callback of reduce() determine the value for the group\nby calling this function with the particular object.

    \n
    const groupBy = (array, fn) =>\n  array.reduce((grouped, object) => {\n    let value = fn(object);                 // This line changed.\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    5. \n
  5. \n

    Voilá, now you can use the groupBy() function to group objects by a nested property. For example\nto group by the property city of the address property you would simply pass the function\nperson => person.address.city as parameter:

    \n
    const groupBy = (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  }, {});\nlet 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 groupedByCity = groupBy(persons, person => person.address.city);\nconsole.log(groupedByCity);\n/* looks like this:\n{\n  \"London\": [\n    {\n      \"firstName\": \"John\",\n      \"lastName\": \"Doe\",\n      \"address\": {\n        \"city\": \"London\"\n      }\n    },\n    {\n      \"firstName\": \"Dave\",\n      \"lastName\": \"Smith\",\n      \"address\": {\n        \"city\": \"London\"\n      }\n    }\n  ],\n  \"Birmingham\": [\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\": \"Jane\",\n      \"lastName\": \"Carpenter\",\n      \"address\": {\n        \"city\": \"Birmingham\"\n      }\n    }\n  ]\n}\n*/
    \n
    6. \n
\n

Notes

\n","fields":{"slug":"/posts/en/2016-07-15-group-objects-by-nested-property/","categorySlug":null},"frontmatter":{"title":"Group objects by a nested property","date":"2016-07-15T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You have an array of objects and want to group them by a certain property.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array of objects (e.g., persons) …

    \n
    let persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter'\n  }\n]
    \n
    2. \n
  2. \n

    … and you want to group those objects by a property (e.g., by firstName).

    \n
    let groupedByFirstName = groupBy(persons, 'firstName');\nconsole.log(groupedByFirstName);\n// should look like this:\n/*\n{\n  \"John\": [\n    {\n      \"firstName\": \"John\",\n      \"lastName\": \"Doe\"\n    }\n  ],\n  \"Jane\": [\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Doe\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Smith\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Carpenter\"\n    }\n  ],\n  \"Dave\": [\n    {\n      \"firstName\": \"Dave\",\n      \"lastName\": \"Smith\"\n    }\n  ]\n}\n*/
    \n
    3. \n
  3. \n

    Create a function named groupBy() that accepts an array and the name of a property\n(we will use the arrow function style for defining that function).

    \n
    const groupBy = (array, property) => {}
    \n
    4. \n
  4. \n

    Call the reduce() method on the array of objects and pass in an empty object as second parameter ({}).\nThis object will be the result object containing the grouped objects of the array.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    ...\n  }, {});
    \n
    5. \n
  5. \n

    In the callback function of the reduce() method for every object get the value of the given property.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    ...\n  }, {});
    \n
    6. \n
  6. \n

    Initialize the array for that value in the result object (grouped) if it wasn’t initialized yet …

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    if(!grouped[value]) {\n      grouped[value] = [];\n    }\n    ...\n  }, {});
    \n
    7. \n
  7. \n

    … which can also be written like this:

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    grouped[value] = grouped[value] || [];\n    ...\n  }, {});
    \n
    8. \n
  8. \n

    Push the current object to that array.

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

    … and return the result object.

    \n
    const groupBy = (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
    10. \n
  10. \n

    Voilá, a tasteful helper function for grouping objects by property.

    \n
    const groupBy = (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  }, {});\nlet persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter'\n  }\n]\nlet groupedByFirstName = groupBy(persons, 'firstName');\nconsole.log(groupedByFirstName);\n/* looks like this:\n{\n  \"John\": [\n    {\n      \"firstName\": \"John\",\n      \"lastName\": \"Doe\"\n    }\n  ],\n  \"Jane\": [\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Doe\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Smith\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Carpenter\"\n    }\n  ],\n  \"Dave\": [\n    {\n      \"firstName\": \"Dave\",\n      \"lastName\": \"Smith\"\n    }\n  ]\n}\n*/
    \n
    11. \n
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-14-group-objects-by-property/","categorySlug":null},"frontmatter":{"title":"Group objects by property","date":"2016-07-14T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You want to create a generic function to promisify asynchronous functions.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an asynchronous function …

    \n
    const add = (x, y, z, callback) => {\n  setTimeout(() => {\n    callback(    // Remember:\n      null,      // First argument: the error\n      x + y + z  // Second argument: the result\n    );\n  }, 5000);\n}
    \n
    2. \n
  2. \n

    … that we call like this …

    \n
    add(2,3,4, (error, result) => {\n  if(error) {\n    console.error(error);\n  } else {\n    console.log(result));\n  }\n}
    \n
    3. \n
  3. \n

    … but what we really want is this:

    \n
    const promisifiedAdd = promisify(add);\npromisifiedAdd(2,3,4)\n  .then(result => console.log(result))\n  .catch(error => console.error(error));
    \n
    4. \n
  4. \n

    So let’s get started! First create a function promisify() that takes a function …

    \n
    function promisify(fn) {\n  ...\n}
    \n
    5. \n
  5. \n

    … and returns another function (that uses rest parameters).

    \n
    function promisify(fn) {\n  return function (...args) {\n    ...\n  }\n}
    \n
    6. \n
  6. \n

    Let this function return a Promise object.

    \n
    function promisify(fn) {\n  return function (...args) {\n    return new Promise((resolve, reject) => {\n      ...\n    });\n  }\n}
    \n
    7. \n
  7. \n

    And inside the callback of the Promise object, call the original function,\npassing the rest parameters to it (using the spread operator) and a callback function.

    \n
    function promisify(fn) {\n  return function (...args) {\n    return new Promise((resolve, reject) => {\n      fn(...args, (error, result) => {\n        ...\n      });\n    });\n  }\n}
    \n
    8. \n
  8. \n

    Inside the callback function of the Promise object check if there is an error. If so,\nthen call the method reject() passing the object object as argument.

    \n
    function promisify(fn) {\n  return function (...args) {\n    return new Promise((resolve, reject) => {\n      fn(...args, (error, result) => {\n        if(error) {\n          return reject(error);\n        }\n      });\n    });\n  }\n}
    \n
    9. \n
  9. \n

    Otherwise call the method resolve() passing the result object as argument.

    \n
    function promisify(fn) {\n  return function (...args) {\n    return new Promise((resolve, reject) => {\n      fn(...args, (error, result) => {\n        if(error) {\n          return reject(error);\n        } else {\n          return resolve(result);\n        }\n      });\n    });\n  }\n}
    \n
    10. \n
  10. \n

    Optimization: combine the last two steps.

    \n
    function promisify(fn) {\n  return function (...args) {\n    return new Promise((resolve, reject) => {\n      fn(...args, (error, result) => {\n        return error ? reject(error) : resolve(result);\n      });\n    });\n  }\n}
    \n
    11. \n
  11. \n

    Optimization: replace function-style functions by arrow functions.

    \n
    const promisify = (fn) => {\n  return (...args) => {\n    return new Promise((resolve, reject) => {\n      fn(...args, (error, result) => {\n        return error ? reject(error) : resolve(result);\n      });\n    });\n  }\n}
    \n
    12. \n
  12. \n

    Optimization: replace the return keywords and the brackets where possible.

    \n
    const promisify = fn =>                         // take the original function\n  (...args) =>                                  // return another function\n  new Promise((resolve, reject) =>              // that returns a promise\n  fn(...args, (error, result) =>                // which calls the original\n  error ? reject(error) : resolve(result)));    // and handles the results
    \n
    13. \n
  13. \n

    Voilá, a perfect generic function for converting asynchronous functions to promises.

    \n
    const promisify = fn =>\n  (...args) =>\n  new Promise((resolve, reject) =>\n  fn(...args, (error, result) =>\n  error ? reject(error) : resolve(result)));\n\nconst add = (x, y, z, callback) => {\n  setTimeout(() => {\n    callback(null, x + y + z);\n  }, 5000);\n}\n\nconst promisifiedAdd = promisify(add);\npromisifiedAdd(2,3,4)\n  .then(result => console.log(result))\n  .catch(error => console.error(error));
    \n
    14. \n
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-13-promisify/","categorySlug":null},"frontmatter":{"title":"Create a generic function to promisify asynchronous functions","date":"2016-07-13T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You want to create a generic function to convert array-like objects into arrays (see also recipe 2).

\n
\n
Array-like objects
\n
An array-like object is an object, which behaves like an array, but which isn't one.\n Array-like objects have a property length and elements can be accessed using indexes,\n but they typically don't have methods like forEach() etc. Two popular examples for\n array-like objects are instances of NodeList and the arguments object.
\n
\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array-like object that should be converted.

    \n
    function someFunction() {\n  var arrayLike = arguments;           // An Array-like object\n  var array = toArray(arrayLike);      // Our goal: convert it to an array ...\n  array.forEach(function(argument) {   // ... so that we can apply array methods.\n    console.log(argument);\n  });\n}\nsomeFunction(2,3,4,5,6,7);
    \n
    2. \n
  2. \n

    Create a function toArray() that accepts an object.

    \n
    function toArray(object) {\n}
    \n
    3. \n
  3. \n

    Now we need to check if the object is array-like. For that get the length property of the object …

    \n
    function toArray(object) {\n  var length = object.length;\n}
    \n
    4. \n
  4. \n

    … and check if the value associated with the length property is a number and not less than 0.

    \n
    function toArray(object) {\n  var length = object.length;\n  var isArrayLike = typeof length == 'number' && length >= 0;\n}
    \n
    5. \n
  5. \n

    Optionally, but recommended: extract this code into a separate function isArrayLike().

    \n
    function isArrayLike(object) {\n  var length = object.length;\n  return typeof length == 'number' && length >= 0;\n}\nfunction toArray(object) {\n  if(isArrayLike(object)) {\n    ...\n  }\n}
    \n
    6. \n
  6. \n

    Back in the toArray() method: borrow the slice() method to convert the object into an array.

    \n
    function isArrayLike(object) {\n  var length = object.length;\n  return typeof length == 'number' && length >= 0;\n}\nfunction toArray(object) {\n  if(isArrayLike(object)) {\n    return Array.prototype.slice.call(object);\n  }\n}
    \n
    7. \n
  7. \n

    Before checking if the object is array-like it makes sense to check if the object is already an array\n(using Array.isArray()).

    \n
    function isArrayLike(object) {\n  var length = object.length;\n  return typeof length == 'number' && length >= 0;\n}\nfunction toArray(object) {\n  if(Array.isArray(object)) {\n    return object;\n  } else if(isArrayLike(object)) {\n    return Array.prototype.slice.call(object);\n  }\n}
    \n
    8. \n
  8. \n

    If the object is neither an array nor array-like: throw an error.

    \n
    function isArrayLike(object) {\n  var length = object.length;\n  return typeof length == 'number' && length >= 0;\n}\nfunction toArray(object) {\n  if(Array.isArray(object)) {\n    return object;\n  } else if(isArrayLike(object)) {\n    return Array.prototype.slice.call(object);\n  } else {\n    throw new TypeError('Argument could not be converted.');\n  }\n}
    \n
    9. \n
  9. \n

    Voilá, a tasteful helper function for converting array-like objects into arrays (and one for\ntesting if an object is array-like).

    \n
    function isArrayLike(object) {\n  var length = object.length;\n  return typeof length == 'number' && length >= 0;\n}\nfunction toArray(object) {\n  if(Array.isArray(object)) {\n    return object;\n  } else if(isArrayLike(object)) {\n    return Array.prototype.slice.call(object);\n  } else {\n    throw new TypeError('Argument could not be converted.');\n  }\n}\nfunction someFunction() {\n  var arrayLike = arguments;           // Array-like object\n  var array = toArray(arrayLike);      // Convert to array\n  array.forEach(function(argument) {   // Apply array method\n    console.log(argument);\n  });\n}\nsomeFunction(2,3,4,5,6,7);
    \n
    10. \n
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-12-array-like-to-array/","categorySlug":null},"frontmatter":{"title":"Create a generic function to convert array-like objects into arrays","date":"2016-07-12T08:00:00.000Z","category":null,"description":null}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"currentPage":3,"postsLimit":5,"postsOffset":15,"prevPagePath":"/page/2","nextPagePath":"/page/4","hasPrevPage":true,"hasNextPage":true}}}