{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-12-array-like-to-array/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"e06e4fc2-5790-59de-b141-551d40ede77b","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/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-12T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create a generic function to convert array-like objects into arrays"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-12-array-like-to-array/"}}}