Referencja do obiektu zwracanego przez funkcję.

Question

Witam. Pytanie zacznę od kodu:

const element = document.querySelector(".my_class");

const getElementDimensions = (htmlElement) => {

    if (htmlElement !== undefined && htmlElement.nodeName) {

      let width = window.getComputedStyle(htmlElement).width;
      let height = window.getComputedStyle(htmlElement).height;
      width = width.substring(0, width.length - 2);
      height = height.substring(0, height.length - 2);
      width = parseInt(width);
      height = parseInt(height);

      return {
        height: height,
        width: width
      };

    } else {
      throw new Error(`${htmlElement} is not a DOM node or is undefined`);
    }

  };

const width = getElementDimensions(element).width;
const height = getElementDimensions(element).height;

Jak widać, funkcja odczytująca wymiary elementu zwraca obiekt. Gdybym wywołał ją w ten sposób:

const width = getElementDimensions(element);

to w stałej "width" będę mieć referencję do obiektu, który został utworzony i siedzi sobie gdzieś w pamięci.

W przypadku takiego wywołania:

const width = getElementDimensions(element).width;

w stałej "width" znajduje się wartość właściwości "width" obiektu. A co z samym obiektem? Czy został on na chwilę utworzony, po to by odczytać jego wartość i z braku referencji do niego zostanie on po chwili usunięty przez garbage collector'a?

Czy może istnieje ryzyko, że pamięć zostanie zaśmiecona nieużywanym obiektem bez referencji? Taki mały wyciek pamięci? Mam tu wątpliwość, więc pytam.

I jeszcze kwestia dobrych praktyk. Czy takie zwracanie wartości jest ok? Czy może jest to niezalecana praktyka z jakichś powodów? Jeżeli tak, to z jakich.

z góry dzięki i pozdrawiam.

Answer 1

const width = getElementDimensions(element).width;
const height = getElementDimensions(element).height;

Ten kod jest bardzo zły ze względu na to że wywołujesz tą samą funkcje dwa razy ;) Możesz użyć operatora rozproszenia z ES6 i zapisać to samo bardziej elegancko :) 

const { width, height } = getElementDimensions(element);

Tak jak mówisz obiekt w pamieć zostanie stworzony i GB powinien się nim zająć :) 

Comments

const element = document.querySelector(".my_class");
 
const getElementDimensions = (htmlElement) => {
 
    if (htmlElement !== undefined && htmlElement.nodeName) {
 
      let { width, height } = window.getComputedStyle(htmlElement);

      return {
        height: parseInt(height),  // funkcja parseInt usunie px z końca ;)
        width:  parseInt(width)
      };
 
    } else {
      throw new Error(`${htmlElement} is not a DOM node or is undefined`);
    }
 
  };
 
const { width, height } = getElementDimensions(element);

Zmieniony kod :) 

---

Dzięki Kolego :)

Mega mi się podoba to rozwiązanie, które mi pokazałeś. Bardzo skraca kod i do tego nauczyłem się nowej rzeczy. Na prawdę super! Dziękuję Ci bardzo za pomoc.

Pozdrawiam :)

---

To jeszcze w poniższej linijce lepiej użyć const zamiast let.

let { width, height } = window.getComputedStyle(htmlElement);

 

---

No właśnie u mnie tak zrobiłem :)