Defining methods/functions on Javascript Objects

Question

Is this:

saveUpdate() {
   // Some code
}

The same as:

saveUpdate: function() {
   // Some code
}

Is there a best practice (ES6) way to define methods on objects (specifically, Vue.js components)?

More context: I am having trouble in my Vue.js application with the methods triggering properly in productions. The methods I have defined seem to work fine in development - but once compiled for production they do not seem to behave in the same way. I have read in the Vue.js documentation that all methods need to be defined as NEW separate functions, and I am now wondering if the way I am defining the methods; is actually not correct.

broader example:

...,
methods: {
  saveUpdate() {
   // Some code
  }
},
...

should I be doing something like:

...,
methods: {
  saveUpdate: () => {
   // Some code
  }
},
...

What is the modern, best practice or accepted way to do this? Or am I looking in the wrong place and my declarations are just fine the way they are?

_"should I be doing something like "_ no. See [Use arrow function in vue computed does not work](https://stackoverflow.com/questions/42971081/use-arrow-function-in-vue-computed-does-not-work) — Phil, Jun 27 '19 at 01:39

Jack Bashford · Accepted Answer · 2019-06-27T01:44:37.317

3

Yes, this:

saveUpdate() {
   // Some code
}

Is syntactic sugar for:

saveUpdate: function() {
   // Some code
}

There's nothing different between the two bar the syntax. If you want an arrow function, I believe you need to use the second form:

saveUpdate: () => {
   // Some code in a lexical `this` scope (not useful in Vue computed).
}

Also note that the -> syntax is invalid - it's a fat arrow =>. Although as Phil pointed out in the comments, you most likely won't want to use arrow functions in a Vue project as you'd lose the binding to this which is how you interact with your component.

edited Jun 27 '19 at 01:44

answered Jun 27 '19 at 01:40

Jack Bashford

43,180
11
50
79

It's highly unlikely to want an arrow function for any Vue instance function (computed / method / etc) since you would lose the all-important `this` reference to the instance itself – Phil Jun 27 '19 at 01:41
I see @Phil (not familiar with Vue) - I'll add that. – Jack Bashford Jun 27 '19 at 01:43
Are they also the same as: saveUpdate: new function() { ... }? – Ash Jun 27 '19 at 01:45
1

No, `new` is used with a constructor. – Jack Bashford Jun 27 '19 at 01:45
1

@LawrenceCherone No, it is a shorthand function - but with the same functionality, hence it's purely visual. – Jack Bashford Jun 27 '19 at 01:45
@LawrenceCherone Jack's right on this one, it's just shorthand ~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions – Phil Jun 27 '19 at 01:47
Just spent so much time looking for that @Phil :) – Jack Bashford Jun 27 '19 at 01:48
but without `,` between its invalid, so be a destructuring shorthand convention – Lawrence Cherone Jun 27 '19 at 01:49
@LawrenceCherone comma between what, exactly? – Phil Jun 27 '19 at 01:49
1

Without a comma it's invalid, because object properties are *always* separated by commas, as are array elements - it's **always** there. – Jack Bashford Jun 27 '19 at 01:51

score 2 · Answer 2 · edited Jul 15 '22 at 22:51

saveUpdate() {...} is ES6 shortcut for saveUpdate: function() {...}, so yes they are the same. Since Vue applications are commonly transpiled, there is no reason to not use the first option.

If a function is reused within application, it can be declared separately:

export function saveUpdate() {...}

...

export default {
  methods: { saveUpdate }
}

Arrows shouldn't be used for functions that expect to access Vue instance as this.

As the documentation explains:

All lifecycle hooks are called with their this context pointing to the Vue instance invoking it.

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Defining methods/functions on Javascript Objects

2 Answers2