Purpose of using arrow function and function keyword syntax together?

Question

First .then method is using arrow function syntax and the second .then method is using the function keyword syntax. Is this just inconsistent coding style or does it have a purpose?

store
      .dispatch(Actions.LOGIN, values)
      .then(() => {
        Swal.fire({
          text: "Sucess!",
          icon: "success",
          buttonsStyling: false,
          confirmButtonText: "Ok!",
          customClass: {
            confirmButton: "btn fw-bold btn-light-primary",
          },
        }).then(function () {
          // Go to page after successfully login
          router.push({ name: "dashboard" });
        });
      })

I don't think there is a purpose here, except for "just because", or "I forgot arrow functions exist for a sec" — kelsny, Feb 25 '22 at 15:37

smallketchup82 · Accepted Answer · 2022-02-28T06:03:20.247

1

I think that this is just inconsistent coding style, the end result is virtually the same (although in some instances you might be unable to use arrow functions) so it doesn't really matter.

Some developers like to use arrow functions, others like to use normal functions. Sometimes you might forget to use an arrow function, or are copying someone else's code and forget to reformat it to your own coding style.

If this bugs you out, you can use ESLint to enforce a consistent style for your project.

edited Feb 28 '22 at 06:03

answered Feb 25 '22 at 15:42

smallketchup82

135
6

Thank you! The code was "professionally" written so I just wanted to confirm there was not some obscure quirk in JS with chaining/nesting .then methods. The project is using ESLint, but it must not be configured to scrutinize function syntax. – Feb 25 '22 at 15:45
The result is the same, but only in this case because `this` isn't used in `then` callback. The opposite is common, and such questions end up as dupes of this one, https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Estus Flask Feb 25 '22 at 16:33
@DaveHarig Besides `function`, there are nested `then`s, which is an antipattern and can cause issues. Professional or not, there's a place for improvements in this snippet, so your concerns are valid. – Estus Flask Feb 25 '22 at 16:37
@EstusFlask I wondered about the nesting. I'll deep dive that next. Thx again! – Feb 27 '22 at 16:49

gguney · Answer 2 · 2022-02-25T16:32:14.480

0

No, it is not just inconsistency here you can read more.

And some cases you can not use arrow functions.

Also, without a webpack etc or some kind of packager it may not work for all browsers.

edited Feb 25 '22 at 16:32

answered Feb 25 '22 at 15:58

gguney

2,512
1
12
26

It's inconsistency in this case. – Estus Flask Feb 25 '22 at 16:31
Thank you both for helping a noob. Inconsistency in this case and I took mental note for consideration of .this keyword treatment based on function type used. And for now I am just going to rely on Webpack/Polyfill magic to always save me from older browsers. – Feb 27 '22 at 16:29

Purpose of using arrow function and function keyword syntax together?

2 Answers2