title: Store multiple arrays inside objects?
body: <p>In the past, i've created a function, to get multiple Node list's properties. Then, with the properties create visual effets. It looks like this:</p>
  
  <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>var elem, celElem, elemTop = [],
    elemMag = [],
    elemBot = [],
    elemCent = [],
    winTop, winMag, winBot, winCent, i, x, len, elemCsokk = [],
    elemNo = [],
    elemCentValt = [],
    elemCentWinCent = [];
  
  function getElem(el, cEl, fn) {
    if (el.length === undefined) {
      el = [el];
      cEl = [cEl];
    }
    elem = el;
    celElem = cEl;
    winTop = window.pageYOffset;
    winMag = window.innerHeight;
    winBot = winTop + winMag;
    winCent = winTop + (winMag / 2);
    for (i = 0, len = elem.length; i &lt; len; i++) {
      elemTop[i] = 0;
      elemMag[i] = elem[i].offsetHeight;
      elemBot[i] = 0;
      elemCent[i] = 0;
      elemCsokk[i] = 0;
      topMag(elem[i]);
      fn(i);
    }
  
  }
  
  function topMag(y) {
    x = y;
    do {
      elemTop[i] += x.offsetTop;
      x = x.offsetParent;
    }
    while (x !== document.body);
    x = y;
  
    elemBot[i] = elemTop[i] + elemMag[i];
    elemCent[i] = elemTop[i] + (elemMag[i] / 2);
    elemCsokk[i] = (elemBot[i] - winTop) / winMag;
  
  }
  
  function opaCsokk(i) {
    elem[i].style.opacity = elemCsokk[i];
  }
  
  var element = document.querySelectorAll("div")
  
  window.onscroll = function() {
    getElem(element, element, opaCsokk)
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The function works really well, the only problem is, that executing the function every time a scroll happens causes performance issues. So i decided that i rethink the function. What i need to get on every scroll are the properties of the window <code>(winTop, winMag, winCent, winBot)</code>. The properties of the elements aren't changing. What i'm thinking about is that i can create a big array (replacement of the <code>getElem</code> function), storing the node lists and the properties of them. In this way the above example looks like this (getting the <code>elemMag</code> of the first node in the node list):
  <code>bigArray[0]["elemMag"][0]</code>
  with the function:</p>
  
  <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>var bigArray = [];
  
  function addingToBigArray(elem) {
    var element = elem;
    for (var i = 0; i &lt; element.length; i++) {
      bigArray[bigArray.length] = {
        elemMag[i]: element.offsetHeight,
        elemTop[i]: element.offsetTop
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But unfortunately an object's property can't be an array. How can i solve this problem, to get the same result of the above example with the function <code>getElem</code>?</p>