title: Creating an array from object properties with Object.keys() vs Object.values()
body: <p>Here's an object of cat breeds, and the number of cats in each:</p>
  
  <pre><code>const cats = {
    abyssinian: {
      number: 23
    },
    persian: {
      number: 12
    },
    siamese: {
      number: 7
    }
  };
  </code></pre>
  
  <p>Suppose I wanted to calculate the total sum of cats. I'll use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" rel="nofollow noreferrer"><code>reduce</code></a> to calculate the sum of array values.</p>
  
  <p>But to create an array from the object above, I have two options:</p>
  
  <ol>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel="nofollow noreferrer"><code>Object.keys()</code></a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values" rel="nofollow noreferrer"><code>Object.values()</code></a></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// object
  const cats = { abyssinian: { number: 23 }, persian: { number: 12 }, siamese: { number: 7 } };
  
  // sum array values with reduce
  const total = numbers =&gt; numbers.reduce((acc, cur) =&gt; acc + cur);
  
  // 1.
  // create array with Object.keys()
  const numbersByKeys = Object.keys(cats).map(breed =&gt; cats[breed].number);
  console.log(`Sum with Object.keys(): ${total(numbersByKeys)}`);
  
  // 2.
  // create array with Object.values()
  const numbersByValues = Object.values(cats).map(breed =&gt; breed.number);
  console.log(`Sum with Object.values(): ${total(numbersByValues)}`);</code></pre>
  </div>
  </div>
  </p>
  
  <p>When would I choose one over the other? What are the best practices here?</p>