Difference in whether or not to use the term Function

Asked

Viewed 58 times

0

I’m starting the study with Vue.js and I came across a situation within one of the options and I imagine it serves other options that is the use of the term Function, for example:

var vm = new Vue({
  methods : {

    /* assim */

    enviar() {
      // code
    },

    /* ou assim */

    enviar: function() {
      // code
    },

  }
})

And with that my doubt is whether there is a difference in each of the syntax and browsers?

javascript vue.js syntax

  • I’m working with Vue for over a year, and I never asked myself that question, I always use enviar(), but if I’m not mistaken, you use enviar: function(){} has some problems with the this.

  • So, in the documentation I always saw using the form with funcion(){} and then looking at some videos I saw that it was using without, and then with that I arose the doubt.

  • I believe I don’t have much of a difference, which is something like Arrow Functions, because if you do a test, and try to use this, it will give an error, Voce will have to use let self = this, different if only used with ()

1 answer

3


According to the documentation in Mozilla, enviar despite being the contracted form of enviar: function(), the contracted form is a named function, while the second is an anonymous function.

Note : The shorthand syntax uses named Function Instead of Anonymous functions (as in …foo: function() {}…). Named functions can be called from the Function body (this is Impossible for Anonymous Function as there is no Identifier to refer to). For more Details, see Function.

Source: Method Definitions

However if you execute the code below, you will see that the contracted form behaves as an anonymous function, at least it is this behavior that I am having when executing in Opera.

var teste = {
  nomeada: function nomeada(imprimir) {
    return !imprimir ? nomeada(true) : console.log("nomeada");
  },
  curta(imprimir) {
    return !imprimir ? curta(true) : console.log("curta");
  },
  anomina: function(imprimir) {
    return !imprimir ? anomina(true) : console.log("anomina");
  }
}

try {
  teste.nomeada();
} catch (e) {
  console.error(e.message);
}
try {
  teste.curta();
} catch (e) {
  console.error(e.message);
}
try {
  teste.anomina();
} catch (e) {
  console.error(e.message);
}

Another curious point is that in the Mozilla documentation it says that the contracted form cannot be used as.

Method Definitions are not constructable

All method Definitions are not constructors and will throw a Typeerror if you Try to instantiate them.

Source: Method Definitions

But when executing the code below, I got a different behavior than pointed. At least that’s what happened when running in Opera.

var teste = {
  nomeada: function nomeada() {
    this.nome = "nomeada";
  },
  curta() {
    this.nome = "curta";
  },
  anomina: function() {
    this.nome = "anomina";
  }
}

try {
  console.log(new teste.nomeada);
} catch (e) {
  console.error(e.message);
}
try {
  console.log(new teste.curta);
} catch (e) {
  console.error(e.message);
}
try {
  console.log(new teste.anomina);
} catch (e) {
  console.error(e.message);
}

Another point, as far as browser compatibility is concerned, short functions can only be used in newer/updated browsers. However, since you are using Vuejs, you must be using vue-cli, the gulp-babel or whatever solution transposes your Java ES5 for something compatible with old browser, so this is not a problem.

  • So Tobias, thank you very much for the answer, but I still have doubts about the best way to use, whether short or anonymous, and I’m still not using the Vue-cli or any other solution that transposes the js, just the same pure Vue

  • 1

    @Marcelodiniz I strongly advise you to use at least the gulp-babel. But if you decide to continue without, and you have no control over which browser users will use, then you should avoid the contracted form. plus, there’s no better or worse, the difference here is just style, use what you find most legible.

Browser other questions tagged javascript vue.js syntax

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