Store multiple arrays inside objects?

Question

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:

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 < 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)
}

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 (winTop, winMag, winCent, winBot). The properties of the elements aren't changing. What i'm thinking about is that i can create a big array (replacement of the getElem function), storing the node lists and the properties of them. In this way the above example looks like this (getting the elemMag of the first node in the node list): bigArray[0]["elemMag"][0] with the function:

var bigArray = [];

function addingToBigArray(elem) {
  var element = elem;
  for (var i = 0; i < element.length; i++) {
    bigArray[bigArray.length] = {
      elemMag[i]: element.offsetHeight,
      elemTop[i]: element.offsetTop
    }
  }
}

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 getElem?

"an object's property can't be an array" — that is totally false. Do you mean "an object's property name can't be an array"? — Pointy
– Pointy, Commented Mar 14, 2018 at 23:51
if you're up to date with javascript, try: { [elemMag[i]]: element.offsetHeight} — Isaac
– Isaac, Commented Mar 14, 2018 at 23:51

Isaac · Accepted Answer · 2018-03-14 23:54:34Z

2

var bigArray = [];

function addingToBigArray(elem) {
  var element = elem;
  for (var i = 0; i < element.length; i++) {
    bigArray[bigArray.length] = {
      [elemMag[i]]: element.offsetHeight
    }
  }
}

See: []

answered Mar 14, 2018 at 23:54

Isaac

11.8k5 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gergő Horváth Over a year ago

Thanks! Here's a problem for me. The solution works, but inside the object, with a property, i can't use another properties values. A simplier example: var x = { first = [0, 1], second = x.first[0]+1 } It doesn't work. :/

Isaac Over a year ago

that isnt a valid javascript object declaration

Gergő Horváth Over a year ago

I can't access a property's value with another property in the same object?

Collectives™ on Stack Overflow

Store multiple arrays inside objects?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related