How to put Try/catch in ES6 format?

Asked

Viewed 72 times

-1

Code:

 this.boxes.forEach(box => document.body.removeChild(box) );

In ES5 it would be:

 this.boxes.forEach(function (box) {
                try {
                return document.body.removeChild(box);
                } catch(e){
                    //erros
                }
            });

ES6 Arrow Function file:

 hideResizers() {
        // stop listening for image deletion or movement
        document.removeEventListener('keyup', this.checkImage);
        this.quill.root.removeEventListener('input', this.checkImage);
        // reset user-select
        this.setUserSelect('');
        this.setCursor('');
        // remove boxes
        this.boxes.forEach(box => document.body.removeChild(box) );
        // release memory
        this.dragBox = undefined;
        this.dragStartX = undefined;
        this.preDragWidth = undefined;
        this.boxes = [];
    }

How it was compiled:

function hideResizers() {
            // stop listening for image deletion or movement
            document.removeEventListener('keyup', this.checkImage);
            this.quill.root.removeEventListener('input', this.checkImage);
            // reset user-select
            this.setUserSelect('');
            this.setCursor('');
            // remove boxes
            this.boxes.forEach(function (box) {
              return document.body.removeChild(box);
            });
            // release memory
            this.dragBox = undefined;
            this.dragStartX = undefined;
            this.preDragWidth = undefined;
            this.boxes = [];
        }

The mistake:

inserir a descrição da imagem aqui

javascript ecmascript-6

  • I see no profit in using the Arrow Function of ES6 in this case. Why not keep the function?

  • Because sometimes there’s a mistake in the gift... I wanted to know how to do too, just for learning.

  • I wanted to see something like, I don’t know; this.boxes.forEach(box => try => catch { document.body.removeChild(box) } => e);

  • I didn’t quite understand the question. If you’re doing a foreach means that boxes are an existing array, so why check the code document.body.removeChild(box) will return error?

  • If you already know the mistake happens when box is not the type Node, And you want to write that code faster, because it doesn’t this.boxes.forEach(box => box instanceof Node && document.body.removeChild(box) ) ?

2 answers

4


The notation of Arrow Function entered in ES6 is basically a syntactic sugar for when you need to define a 1:1 ratio of the input with the output of the function, extremely useful for mapping functions.

In your case the ratio is not 1:1, as there will be the exception treatment too, so there is no advantage in using such notation.

But in case you’re just curious how it would look:

this.boxes.forEach(box => {
  try {
    return document.body.removeChild(box)
  } catch(e) {
    ...
  }
});

I mean, the difference is between typing function or =>. For exception handling there is no different syntax in ES6, so it remains the same as it already existed in ES5.

  • So I know how to do, I wanted to see in the ES6 syntax...

  • 1

    @Ivanferrer This is the ES6 syntax.

  • No, I think there are more summarized ways to do that.

  • How could it be more summarized than that?

  • I don’t know... that’s my question. KKKK, if I knew I wouldn’t have the question.

  • The answer is that there is no different syntax for this in ES6. The exception treatment is the same as in ES5. The only thing that could change there is to pass the anonymous function to a function Arrow, even without making sense the change.

  • I’m gonna choose your answer, because from what I read, it’s like, thanks!

  • Only one addendum to the answer, the main difference (and advantages) of Arrow functions is the context of the object, for example if you pass an anonymous function to a foreach of an array the context this of this function is the array in question, but with Arrow this continues to be the current context.

  • @Exact Kaduamaral, but for the context of the question I judged that this would not be relevant by, since this also would not justify the use of Arrow.

Show 4 more comments

0

In fact I solved so:

try {
     this.boxes.forEach(box => document.body.removeChild(box) );
   } catch(e) {
   //...
}o pli

The problem is that I made a method that removes the element when I changed my page route, and keeps the selection by smearing the other screen, and plugin could not find this element, because it had already been removed... so I needed to put a try { } catch () {} just so he can pass right by when there’s no.

  • But this does not exactly the same as the question code. In this case, if this.boxes have 100 items and give error in the first, the other 99 will not be processed. With the try/catch in each item, within the loop, you treat the error of each item separately.

  • Yes, indeed, but that’s what I’m saying, I don’t need to deal with errors alone, I just need to abandon the rule... when there’s no more use for it. Is a Gambi!

Browser other questions tagged javascript ecmascript-6

You are not signed in. Login or sign up in order to post.