3

Similar question

Above link is a similar question what Im about to ask. But I couldn't find any official reference about that answer.

public uploadImage() {
    const input: HTMLInputElement = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/png';
    const onChange = () => {
      const file = input.files[0];
      const reader = new FileReader();

      const onError = () => {
        reader.abort();
        alert('image loading failed');
      };

      const onLoadEnd = (evt) => {
        if (evt.target.readyState === 2) {
          this.readImageByBase64(evt.target.result as string);
        } else {
          onError();
        }
      };

      reader.addEventListener('loadend', onLoadEnd);
      reader.addEventListener('error', onError);
      reader.readAsDataURL(file);
    };
    input.addEventListener('change', onChange);
    input.click();
}

According to answer to above question, since the input variable and reader variable is function scoped, will event listener be removed from the element and will onLoadeEnd and onError be garbage collected? If yes, are there any background information or reference about it?(more focused about removing event listeners then garbage collection)

Chanwoo Park
  • 216
  • 1
  • 12
  • 1
    There's nothing special about event listeners regarding garbage collection. If the element becomes garbage, anything that it references and can't be accessed any other way also becomes garbage. – Barmar Apr 23 '19 at 02:15
  • I think the other question essentially answers your question. It says what happens when the element is removed from the DOM and there are no other references to it. If the element was never in the DOM in the first place, the situation is the same as soon as there are no other references to it. – Barmar Apr 23 '19 at 02:19
  • I think the `FileReader` object continues to exist independently of the `input` element and its event listener. Is that the point of your question? It's similar to creating a timer object with `setTimeout`. – Barmar Apr 23 '19 at 02:24
  • @Barmar So since nothing is referencing 'the element', it results to garbage collecting 'the element' and consequently since there aren't any other element referencing 'the event listener' , the event listener get garbage collected. Did I understand correctly? – Chanwoo Park Apr 23 '19 at 02:26
  • That's correct. But the listener function itself stays around, because `onError` and `onLoadEnd` are local to it, and they're referenced by `reader`. – Barmar Apr 23 '19 at 02:29
  • @Barmar Can you elaborate more about 'stays around' ? Do you mean it is not garbage collected? (I've edited the code btw, I gave an anonymous function a name). After onChange function finishes it execution, wouldn't variable ```reader``` gets garbage collected and results to garbage collecting ```onError``` and ```onLoadEnd``` as well? – Chanwoo Park Apr 23 '19 at 02:35
  • Garbage collection happens to objects, not variables. Variables are just one of the ways to reference an object, but it can also be referenced as an element of some other object. When the variable goes away, it's just one less reference. But the `FileReader` object persists as long as it's still reading the file. – Barmar Apr 23 '19 at 02:40
  • An easier example to understand is `XMLHttpRequest` objects. When you send the request, the object has to stick around to process the response, even if though the function that created it has ended. Basically, anything that represents an asynchronous action has a reference from the event loop until it completes all its actions. – Barmar Apr 23 '19 at 02:42
  • @Barmar yes ```reader``` meant by ```FileReader```object. reading the file would end up either on error or loading finish. Either way after reading the file, nothing references ```FileReader``` object so wouldn't it be garbage collected and also the ```onError``` ```onLoadEnd``` event handlers? – Chanwoo Park Apr 23 '19 at 02:49
  • Yes, once the file reader has finished its job, everything can be garbage collected. But the `input` element doesn't need to wait for that, it can be GCed immediately after the function returns. – Barmar Apr 23 '19 at 02:50
  • @Barmar Thx for your comments :) any more opions about refactoring that code? – Chanwoo Park Apr 23 '19 at 03:01
  • It looks fine. What problem are you having? Why are you worrying about garbage collection, are you calling this lots of times? – Barmar Apr 23 '19 at 03:08
  • @Barmar our team is just going through refactoring process and I got curious about removing eventisteners and led me here haha thx again – Chanwoo Park Apr 23 '19 at 03:12

0 Answers0