new myFunction() vs new myClass()

Question

I've been doing some research into OOP in JavaScript and I came across these notes on MDN.

Function syntax

I have created a few classes before, but the syntax I have used has been creating a function. See below.

function myFunction(myProp1, myProp2)
{
    // see if set, otherwise use the default value (after the colon)
    myProp1 = typeof myProp1 !== "undefined" ? myProp1 : 1;
    myProp2 = typeof myProp2 !== "undefined" ? myProp2 : 2;

    // simple function
    this.doSomething = function ()
    {
        return myProp1 + myProp2;
    }
}
var myObj = new myFunction(2, 4);
myObj.doSomething(); // returns 6

Class syntax

Today I found out that it is possible to achieve the same using the following code.

class myClass
{
    constructor(myProp1, myProp2)
    {
        // see if set, otherwise use the default value (after the colon)
        this.myProp1 = typeof myProp1 !== "undefined" ? myProp1 : 1;
        this.myProp2 = typeof myProp2 !== "undefined" ? myProp2 : 2;
    }

    // simple function
    doSomething()
    {
        return this.myProp1 + this.myProp2;
    }
}
var myObj = new myClass(2, 4);
myObj.doSomething(); // returns 6

Now lies the question

Is there truly a difference or is it simply a difference in taste as to which method I use to create new objects?

Edit
For clarification, I will put some queries below.

Questions:

@MasterBob mentioned about support. Is the class way not supported in all browsers? If not, then which browsers aren't supported?
Inheritance. Do either version inherit different properties or are they completely identical?

If you're going to run this in a browser, from a practical perspective I'd say the main difference is that the former will work in IE while the latter won't. — Matti Virkkunen, Mar 21 '17 at 22:21
Duplicate of [*Class vs Prototype*](http://stackoverflow.com/questions/29251388/class-vs-prototype)? — RobG, Mar 21 '17 at 22:41
Possible duplicate of [Class vs Prototype](http://stackoverflow.com/questions/29251388/class-vs-prototype) — behkod, Mar 21 '17 at 22:44
@Carty To answer your questions added on: 1. No. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#compat-desktop 2. What do you mean by that? — MasterBob, Mar 28 '17 at 14:32

score 2 · Accepted Answer · answered Mar 21 '17 at 22:25

There aren't many differences, but here are some:

class myClass extends myClass2

Now, this might be not so problematic, because there is myFunction.prototype = Object.create(myFunction2);, but yes, it may be a bit more complicated.

Browser support.

ECMAScript 6 introduced classes, but how long have constructor functions been around? Quite a long time, of course. Some browsers may not support classes.

So, all in all, you should use constructor functions for the browser support, in my opinion. But if you're going to code this sometime in the far future - classes are neater and easier to read.

score 1 · Answer 2 · answered Mar 21 '17 at 22:23

To quote MDN

JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance.

Further it says

The class syntax is not introducing a new object-oriented inheritance model to JavaScript

I think having that in mind we can say that this is only a difference of taste and depends on at least

ECMAScript 2015 (6th Edition, ECMA-262)

score 1 · Answer 3 · edited May 23 '17 at 12:32

1

One difference that I've found is that it's not really possible to extend builtin classes like Promise using the old syntax, but I think it's going to be possible with the new syntax. I'm not sure about how well it's supported at the moment. More details in this question: Extending a Promise in Javascript.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 21 '17 at 22:30

tobuslieven

1,474
2
14
21

score 0 · Answer 4 · answered Mar 21 '17 at 22:26

0

There are some differences, it is not just a matter of taste. The most important difference between the two: you can forget to use new with your first example, it is required with your second example.

answered Mar 21 '17 at 22:26

Rob M.

35,491
6
51
50

The first can also be written so that calling it with *new* is the same as calling it without *new*. :-) – RobG Mar 21 '17 at 22:42
Yes it can quite easily, but that is not default behavior - which is what I was hoping to differentiate :) – Rob M. Mar 21 '17 at 22:44

new myFunction() vs new myClass()

Function syntax

Class syntax

Now lies the question

4 Answers4