What is the difference (if any) between the different function declarations within JavaScript objects?

Question

I have a JavaScript object:

var methods = {

  classStyle() {
    console.log('Class style function');
  },

  traditionalStyle: function() {
    console.log('Traditional style function');
  },

  arrowStyle: () => {
    console.log('Arrow style function');
  }

};

methods.classStyle();
methods.traditionalStyle();
methods.arrowStyle();

The output is as expected:

(index):70 Class style function
(index):74 Traditional style function
(index):78 Arrow style function

My questions are:

Is there any difference at all between these different methods of declaration?
Is it down to personal preference? Or do the inner workings change?
Are there any considerations to take when using the different styles?

Have a look at [this](https://stackoverflow.com/q/48891399/1048572) and [that](https://stackoverflow.com/q/31095710/1048572) — Bergi, May 16 '18 at 20:00
Please do at least a little reading about [an arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). It IS different from the other two. — jfriend00, May 17 '18 at 02:08

Michał Perłakowski · Accepted Answer · 2018-05-16T20:24:01.993

5

The "class style function" (shorthand method) is very similar to a regular function. The only difference is that it can't be used as a constructor (i.e. called with new), and because of that it doesn't have a prototype property. As for arrow functions, see Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?. In a nutshell, arrow functions don't bind their own this and arguments, and can't be used with new.

Is it down to personal preference? Or do the inner workings change?

In ES6+ there's no reason to use the traditional function syntax in objects, because the shorthand methods syntax is simpler and safer, because if you accidentally try to use a method as a constructor, you'll get an error. As for arrow functions, you can use them only if you don't need to access the object using this.

edited May 16 '18 at 20:24

answered May 16 '18 at 19:21

Michał Perłakowski

88,409
26
156
177

@maerics No, as `this` works with dynamic dispatch very unlike an arrow function. They're really three different things. – Bergi May 16 '18 at 20:03
"class-style" is also allowed to use `super.foo` where the function expression can't, and the arrow would depend on if the parent scope allowed `super.foo` – loganfsmyth May 16 '18 at 20:43
@loganfsmyth Does it have any real-world use though? A plain object doesn't have a parent class anyway, unless you set it manually with `Object.setPrototypeOf()`. – Michał Perłakowski May 16 '18 at 21:09
You can certainly declare an object literal with `__proto__` too. Either way the object ends up with a parent, and `super.foo` works fine. It may not be common, but it is very much a difference. – loganfsmyth May 16 '18 at 21:32

AnilRedshift · Answer 2 · 2018-05-16T22:53:02.097

1

arrowStyle is different due to the differences in arrow functions. See below for differences in this:

var methods = {

  classStyle() {
    console.log('class this is', this);
  },

  traditionalStyle: function() {
    console.log('traditional this is', this);
  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  }

};

methods.classStyle.call(5);
methods.traditionalStyle.call(5);
methods.arrowStyle.call(5);

edited May 16 '18 at 22:53

answered May 16 '18 at 19:24

AnilRedshift

7,937
7
35
59

Also see the link that @Michał Perłakowski posted – AnilRedshift May 16 '18 at 19:25

score 1 · Answer 3 · answered May 16 '18 at 20:35

Just as a complement, as it was mentioned, first and second are not the same. One major difference is where and how they are available. See this snippet, you'll see that method definitions are available when the object is created, but not the function declaration.

This means that when you define with the traditionnal style, you cannot use it elsewhere in the object, it's going to be undefined. Class style will be available, which is a huge difference.

methods = {
  classStyle() {

    //console.log('class this is', this);
    return 'class';
  },

  traditionalStyle: function() {
    //console.log('traditional this is', this);
    return 'tradition';

  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  },

  testFn() {
    console.log('class is', this.classStyle);
    console.log('traditionnal is', this.traditionnalStyle);
  },

  get classProp() {
    return this.classStyle();
  },

  get traditionnalProp() {
    return this.traditionnalStyle();
  }

};



methods.testFn();
console.log(methods.classProp);
console.log(methods.traditionnalProp);

What is the difference (if any) between the different function declarations within JavaScript objects?

3 Answers3

Linked

Related