A software development professional with expertise in design, marketing and sales Zola 2021-10-23T19:00:57+02:00 https://mish.co/atom.xml 2021-10-23T19:00:57+02:00 2021-10-23T19:00:57+02:00 Unknown https://mish.co/posts/sum-and-average-array-of-objects-in-js/ <h2 id="1-the-task">1. The task</h2> <p>Take this array of objects:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>[{ x:</span><span style="color: #005CC5;"> 0</span><span>, y:</span><span style="color: #005CC5;"> 0</span><span>, z:</span><span style="color: #005CC5;"> 0</span><span> }, { x:</span><span style="color: #005CC5;"> 1</span><span>, y:</span><span style="color: #005CC5;"> 1</span><span>, z:</span><span style="color: #005CC5;"> 1</span><span> }, { x:</span><span style="color: #005CC5;"> 2</span><span>, y:</span><span style="color: #005CC5;"> 2</span><span>, z:</span><span style="color: #005CC5;"> 2</span><span> }, { x:</span><span style="color: #005CC5;"> 3</span><span>, y:</span><span style="color: #005CC5;"> 3</span><span>, z:</span><span style="color: #005CC5;"> 3</span><span> }, { x:</span><span style="color: #005CC5;"> 4</span><span>, y:</span><span style="color: #005CC5;"> 4</span><span>, z:</span><span style="color: #005CC5;"> 4</span><span> }]</span></span></code></pre> <p>Sum the values together and reduce the array to following:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 10</span><span> }</span></span></code></pre> <p>Additionally, we might want to calculate the average of all the values:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 2</span><span> }</span></span></code></pre><h2 id="2-approaches">2. Approaches</h2> <p>Depending on the data structure there are two different ways of approaching the problem</p> <h3 id="data-structure-is-known">Data structure is known</h3> <p>Assuming we have data structure, where we know the keys:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="typescript"><span class="giallo-l"><span style="color: #D73A49;">interface</span><span style="color: #6F42C1;"> sampleObject</span><span> {</span></span> <span class="giallo-l"><span style="color: #E36209;"> x</span><span style="color: #D73A49;">:</span><span style="color: #005CC5;"> number</span></span> <span class="giallo-l"><span style="color: #E36209;"> y</span><span style="color: #D73A49;">:</span><span style="color: #005CC5;"> number</span></span> <span class="giallo-l"><span style="color: #E36209;"> z</span><span style="color: #D73A49;">:</span><span style="color: #005CC5;"> number</span></span> <span class="giallo-l"><span>}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> sample</span><span style="color: #D73A49;">:</span><span style="color: #6F42C1;"> sampleObject</span><span>[]</span><span style="color: #D73A49;"> =</span><span> [{ x:</span><span style="color: #005CC5;"> 0</span><span>, y:</span><span style="color: #005CC5;"> 0</span><span>, z:</span><span style="color: #005CC5;"> 0</span><span> }, { x:</span><span style="color: #005CC5;"> 1</span><span>, y:</span><span style="color: #005CC5;"> 1</span><span>, z:</span><span style="color: #005CC5;"> 1</span><span> }, { x:</span><span style="color: #005CC5;"> 2</span><span>, y:</span><span style="color: #005CC5;"> 2</span><span>, z:</span><span style="color: #005CC5;"> 2</span><span> }, { x:</span><span style="color: #005CC5;"> 3</span><span>, y:</span><span style="color: #005CC5;"> 3</span><span>, z:</span><span style="color: #005CC5;"> 3</span><span> }, { x:</span><span style="color: #005CC5;"> 4</span><span>, y:</span><span style="color: #005CC5;"> 4</span><span>, z:</span><span style="color: #005CC5;"> 4</span><span> }]</span></span> <span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;">:</span><span style="color: #6F42C1;"> sampleObject</span></span></code></pre> <p>(expressed in TypeScript)</p> <h4 id="solution">Solution</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span style="color: #D73A49;"> return</span><span> {</span></span> <span class="giallo-l"><span> x: previous.x</span><span style="color: #D73A49;"> +</span><span> current.x,</span></span> <span class="giallo-l"><span> y: previous.y</span><span style="color: #D73A49;"> +</span><span> current.y,</span></span> <span class="giallo-l"><span> z: previous.z</span><span style="color: #D73A49;"> +</span><span> current.z</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="output">Output</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 10</span><span> }</span></span></code></pre><h4 id="explanation">Explanation</h4> <p>Call the <a rel="noopener nofollow noreferrer external" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">.reduce</a> function, on the <em>sample</em> Array</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span></code></pre> <p>Return an Object, in which <em>previous</em> x, y, z values were added to <em>current</em> x, y, z values</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;"> return</span><span> {</span></span> <span class="giallo-l"><span> x: previous.x</span><span style="color: #D73A49;"> +</span><span> current.x,</span></span> <span class="giallo-l"><span> y: previous.y</span><span style="color: #D73A49;"> +</span><span> current.y,</span></span> <span class="giallo-l"><span> z: previous.z</span><span style="color: #D73A49;"> +</span><span> current.z</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h3 id="data-structure-is-unknown">Data structure is unknown</h3> <p>Assuming we have data structure in which the Object structure is unknown or are in a use-case, where expressing the structure is not necessary or inconvenient:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="typescript"><span class="giallo-l"><span style="color: #D73A49;">interface</span><span style="color: #6F42C1;"> sampleObject</span><span> {</span></span> <span class="giallo-l"><span> [</span><span style="color: #E36209;">key</span><span style="color: #D73A49;">:</span><span style="color: #005CC5;"> string</span><span>]</span><span style="color: #D73A49;">:</span><span style="color: #005CC5;"> number</span></span> <span class="giallo-l"><span>}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> sample</span><span style="color: #D73A49;">:</span><span style="color: #6F42C1;"> sampleObject</span><span>[]</span><span style="color: #D73A49;"> =</span><span> [{ x:</span><span style="color: #005CC5;"> 0</span><span>, y:</span><span style="color: #005CC5;"> 0</span><span>, z:</span><span style="color: #005CC5;"> 0</span><span> }, { x:</span><span style="color: #005CC5;"> 1</span><span>, y:</span><span style="color: #005CC5;"> 1</span><span>, z:</span><span style="color: #005CC5;"> 1</span><span> }, { x:</span><span style="color: #005CC5;"> 2</span><span>, y:</span><span style="color: #005CC5;"> 2</span><span>, z:</span><span style="color: #005CC5;"> 2</span><span> }, { x:</span><span style="color: #005CC5;"> 3</span><span>, y:</span><span style="color: #005CC5;"> 3</span><span>, z:</span><span style="color: #005CC5;"> 3</span><span> }, { x:</span><span style="color: #005CC5;"> 4</span><span>, y:</span><span style="color: #005CC5;"> 4</span><span>, z:</span><span style="color: #005CC5;"> 4</span><span> }]</span></span> <span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;">:</span><span style="color: #6F42C1;"> sampleObject</span></span></code></pre> <p>(expressed in TypeScript)</p> <h4 id="traditional-way">Traditional way</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> {}</span></span> <span class="giallo-l"><span>sample.</span><span style="color: #6F42C1;">forEach</span><span>((</span><span style="color: #E36209;">entry</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span style="color: #D73A49;"> for</span><span> (</span><span style="color: #D73A49;">let</span><span> key</span><span style="color: #D73A49;"> in</span><span> entry) {</span></span> <span class="giallo-l"><span style="color: #D73A49;"> if</span><span> (</span><span style="color: #D73A49;">!</span><span>result[key]) result[key]</span><span style="color: #D73A49;"> =</span><span> entry[key]</span></span> <span class="giallo-l"><span style="color: #D73A49;"> else</span><span> result[key]</span><span style="color: #D73A49;"> +=</span><span> entry[key]</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="output-1">Output</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 10</span><span> }</span></span></code></pre><h4 id="explanation-1">Explanation</h4> <p>Create an empty Object, called <em>result</em>:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> {}</span></span></code></pre> <p>Iterate each <em>entry</em> in the <em>sample</em> Array:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>sample.</span><span style="color: #6F42C1;">forEach</span><span>((</span><span style="color: #E36209;">entry</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span></code></pre> <p>Create a for loop to iterate each <em>key</em> in <em>entry</em> Object:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;"> for</span><span> (</span><span style="color: #D73A49;">let</span><span> key</span><span style="color: #D73A49;"> in</span><span> entry) {</span></span></code></pre> <p>If the <em>key</em> is not in the <em>result</em> Object, add it and the entry’s value into the <em>result</em> Object:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;"> if</span><span> (</span><span style="color: #D73A49;">!</span><span>result[key]) result[key]</span><span style="color: #D73A49;"> =</span><span> entry[key]</span></span></code></pre> <p>If the <em>key</em> is in the <em>result</em> Object, add its value to current entry value:</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;"> else</span><span> result[key]</span><span style="color: #D73A49;"> +=</span><span> entry[key]</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="preferred-way">Preferred way</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span> Object.</span><span style="color: #6F42C1;">keys</span><span>(current).</span><span style="color: #6F42C1;">forEach</span><span>(</span><span style="color: #E36209;">key</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span> current[key]</span><span style="color: #D73A49;"> +=</span><span> previous[key]</span></span> <span class="giallo-l"><span> })</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;"> return</span><span> current</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="output-2">Output</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 10</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 10</span><span> }</span></span></code></pre><h4 id="explanation-2">Explanation</h4> <p>Call the <a rel="noopener nofollow noreferrer external" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">.reduce</a> function, on the <em>sample</em> Array</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span></code></pre> <p>Iterate over <em>current</em> Object keys using <a rel="noopener nofollow noreferrer external" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span> Object.</span><span style="color: #6F42C1;">keys</span><span>(current).</span><span style="color: #6F42C1;">forEach</span><span>(</span><span style="color: #E36209;">key</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span></code></pre> <p>Add current <em>key</em> value to previous <em>key</em> value</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span> current[key]</span><span style="color: #D73A49;"> +=</span><span> previous[key]</span></span> <span class="giallo-l"><span> })</span></span></code></pre> <p>Return <em>current</em> Object</p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;"> return</span><span> current</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h2 id="4-calculating-the-average">4. Calculating the average</h2> <p>Modify previous examples to calculate the average</p> <h3 id="when-data-structure-is-known">When data structure is known</h3> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span style="color: #D73A49;"> let</span><span> x</span><span style="color: #D73A49;"> =</span><span> previous.x</span><span style="color: #D73A49;"> +</span><span> current.x</span></span> <span class="giallo-l"><span style="color: #D73A49;"> let</span><span> y</span><span style="color: #D73A49;"> =</span><span> previous.y</span><span style="color: #D73A49;"> +</span><span> current.y</span></span> <span class="giallo-l"><span style="color: #D73A49;"> let</span><span> z</span><span style="color: #D73A49;"> =</span><span> previous.z</span><span style="color: #D73A49;"> +</span><span> current.z</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;"> if</span><span> (index</span><span style="color: #D73A49;"> ===</span><span> array.</span><span style="color: #005CC5;">length</span><span style="color: #D73A49;"> -</span><span style="color: #005CC5;"> 1</span><span>) {</span></span> <span class="giallo-l"><span> x</span><span style="color: #D73A49;"> /=</span><span> array.</span><span style="color: #005CC5;">length</span></span> <span class="giallo-l"><span> y</span><span style="color: #D73A49;"> /=</span><span> array.</span><span style="color: #005CC5;">length</span></span> <span class="giallo-l"><span> z</span><span style="color: #D73A49;"> /=</span><span> array.</span><span style="color: #005CC5;">length</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;"> return</span><span> {x, y, z}</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="output-3">Output</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 2</span><span> }</span></span></code></pre><h4 id="explanation-3">Explanation</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="diff"><span class="giallo-l"><span> const result = sample.reduce((previous, current, index, array) =&gt; {</span></span> <span class="giallo-l"><span style="color: #B31D28;background-color: #FFEEF0;">- return {</span></span> <span class="giallo-l"><span style="color: #B31D28;background-color: #FFEEF0;">- x: previous.x + current.x,</span></span> <span class="giallo-l"><span style="color: #B31D28;background-color: #FFEEF0;">- y: previous.y + current.y,</span></span> <span class="giallo-l"><span style="color: #B31D28;background-color: #FFEEF0;">- z: previous.z + current.z</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ let x = previous.x + current.x</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ let y = previous.y + current.y</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ let z = previous.z + current.z</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ if (index === array.length - 1) {</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ x /= array.length</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ y /= array.length</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ z /= array.length</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ return {x, y, z}</span></span> <span class="giallo-l"><span> })</span></span></code></pre> <p>(shown as diff)</p> <p>If current element is the last in the <em>array</em>, divide x, y, z by <em>array</em> length</p> <h3 id="when-data-structure-is-unknown">When data structure is unknown</h3> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> result</span><span style="color: #D73A49;"> =</span><span> sample.</span><span style="color: #6F42C1;">reduce</span><span>((</span><span style="color: #E36209;">previous</span><span>,</span><span style="color: #E36209;"> current</span><span>,</span><span style="color: #E36209;"> index</span><span>,</span><span style="color: #E36209;"> array</span><span>)</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span> Object.</span><span style="color: #6F42C1;">keys</span><span>(current).</span><span style="color: #6F42C1;">forEach</span><span>(</span><span style="color: #E36209;">key</span><span style="color: #D73A49;"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span> current[key]</span><span style="color: #D73A49;"> +=</span><span> previous[key]</span></span> <span class="giallo-l"><span style="color: #D73A49;"> if</span><span> (index</span><span style="color: #D73A49;"> ===</span><span> array.</span><span style="color: #005CC5;">length</span><span style="color: #D73A49;"> -</span><span style="color: #005CC5;"> 1</span><span>) current[key]</span><span style="color: #D73A49;"> /=</span><span> array.</span><span style="color: #005CC5;">length</span></span> <span class="giallo-l"><span> })</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #D73A49;"> return</span><span> current</span></span> <span class="giallo-l"><span>})</span></span></code></pre><h4 id="output-4">Output</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span>{</span><span style="color: #6F42C1;"> x</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> y</span><span>:</span><span style="color: #005CC5;"> 2</span><span>,</span><span style="color: #6F42C1;"> z</span><span>:</span><span style="color: #005CC5;"> 2</span><span> }</span></span></code></pre><h4 id="explanation-4">Explanation</h4> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="diff"><span class="giallo-l"><span> const result = sample.reduce((previous, current, index, array) =&gt; {</span></span> <span class="giallo-l"><span> Object.keys(current).forEach(key =&gt; {</span></span> <span class="giallo-l"><span> current[key] += previous[key]</span></span> <span class="giallo-l"><span style="color: #22863A;background-color: #F0FFF4;">+ if (index === array.length - 1) current[key] /= array.length</span></span> <span class="giallo-l"><span> })</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span> return current</span></span> <span class="giallo-l"><span> })</span></span></code></pre> <p>(shown as diff)</p> <p>If current element is the last in the <em>array</em>, divide the <em>current</em> key by <em>array</em> length</p> <h2 id="5-bonus-calculate-multiple-arrays">5. Bonus: calculate multiple arrays</h2> <p>If you want to calculate on multiple arrays, you can concatenate them using <a rel="noopener nofollow noreferrer external" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">the spread operator</a></p> <pre class="giallo" style="color: #24292E; background-color: #FFFFFF;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #D73A49;">const</span><span style="color: #005CC5;"> sample</span><span style="color: #D73A49;"> =</span><span> [</span><span style="color: #D73A49;">...</span><span>sample_a,</span><span style="color: #D73A49;"> ...</span><span>sample_b]</span></span></code></pre> <p>Now you should be able to understand how to calculate the sum of array of objects and how to calculate the average of array of objects in JavaScript</p> 2021-09-20T00:52:03+02:00 2021-09-20T00:52:03+02:00 Unknown https://mish.co/posts/always-cache-your-website/ <p>Always cache your website, even when not using a CDN, in order to speed up initial response time and reduce server load, which means you’d be able to serve more requests, save money on traffic (if you combine caching with compression) and generate greater revenue, but most importantly reduce carbon footprint!</p> 2021-09-04T15:22:32+02:00 2021-09-04T15:22:32+02:00 Unknown https://mish.co/posts/slaughterhouses/ <p>Slaughterhouses have neither promising ideas nor innovations. The only one thing that happens there is violence. Perpetrators of violence are common in prisons, unless they are powerful, lobbying companies violent against animals</p> 2020-03-26T17:55:00+01:00 2020-03-26T17:55:00+01:00 Unknown https://mish.co/posts/build-ship-forget-repeat/ <p>Build. Ship. Forget. Repeat</p> <p>While the words build, ship and repeat make sense, what does <em>forget</em> mean in the context of <strong>successful</strong> startup bootstrapping?</p> <p>Let me explain that</p> <hr /> <p>Many startups i come around today are suffering from unreasonable over-investment, sometimes even unaware of that</p> <p>Their teams and founders are investing resources into the project and do not get a equal return, if any</p> <p>They think there’s something wrong with the product and start pushing harder and investing even more in it to make it work, which is a common mistake</p> <hr /> <p>Don’t fall into that trap don’t expect a miracle to happen because it won’t</p> <p>That’s the case with unrequited love it’s gonna take all your time, money and soul and you gonna end up with is <strong>nothing</strong></p> <p>Now, just stop and think</p> <p><em>is my value proposition any good? does my project do what it promises?</em> <em>does it come with a reasonable pricing</em>?</p> <p>And regardless of the answer the best thing you can do is not do anything</p> <p>Relax buddy you’ve done amazing job already now forget what you’ve just did</p> <p>and move on!</p> 2019-12-09T00:00:00+01:00 2019-12-09T00:00:00+01:00 Unknown https://mish.co/posts/become-rich/ <blockquote> <p>All are valuable, but some are more valuable than others</p> </blockquote> <p>Rich provide more value to others</p> <p>The more you have, the more you can offer. If you have a car, you can create value, by just investing into it and selling for a higher price, or on the other side, you could drive people around; this way you are creating a value for people, who need a ride</p> <p class="has-background">Your goal should not be to become rich, but to look around and identify, where you can provide the most. What makes you useful?</p> <p>Almost everyone can walk, so why not become a dog-sitter and walk with dogs? Everyone learns a second language in school, why not level up and become a translator? Some people even master a music instrument, so why not become a street musician? Some don’t have any of those, but are really entertaining, why not try out to be a comedian?You can even provide value only by your looks, this way you could become a model</p> <p>There’s nothing embarrassing about showing off your skills and expertise. If you don’t tell us, how do we know?</p> <p>Focus on one thing you do well and improve over time. The more competent you are, the more people would prefer you over others</p> <p>Don’t ever loose confidence and never give up If you should be a hero, you will be, no matter what everyone says and thinks. It’s just a useless noise. Turn off the noise and listen to yourself, to your heart, this is the only way you know what to do next…</p> 2019-12-04T00:00:00+01:00 2019-12-04T00:00:00+01:00 Unknown https://mish.co/posts/founder-manifesto/ <p>Being founder myself and having met hundreds of founders all over the world, they seem to have some common characteristics, that i want to share with you</p> <h3 id="what-makes-a-founder">What makes a founder?</h3> <ol> <li><strong>Strength</strong> Founders are strong enough to resist, reject and stand up for themselves, even if they are pressured by peers and loved ones</li> <li><strong>Craziness</strong> Founders are crazy by nature. They take enormous risks, even when they are likely to fail. They deeply believe, that it’s in their power to change the way things are. They spend resources, they are never going to get back</li> <li><strong>Youth</strong> Founders are young, sometimes not biologically. By being young, founders are getting unique opportunity to replace the old. They have nothing yet to lose</li> <li><strong>Talent</strong> Founders have talents, sometimes even those, that don’t contribute to their life as a founder</li> <li><strong>Honesty and responsibility</strong> Founders are honest to themselves and others. Founders take full responsibility for any accident and admit their mistakes openly</li> <li><strong>Curiosity</strong> Founders are curious, they like to explore and try out new things</li> <li><strong>Kindness</strong> Founders are kind to themselves and others. Founders offer help, where it’s needed, even if they are not asked about it</li> </ol> <p>As a closing note, i want to remind the founders, that you will have plenty of time to rest when you are dead, so until then, keep fighting!</p>