What is the difference in the usage of these two JavaScript OOP Syntax?

Question

So I have created an object using two different ways.

First way:

const sprite = () => {
    let obj = {
        hp: 100,
        damage: () => {
            obj.hp -= 25;
        },
        heal: () => {
            obj.hp += 25;
        }
    }
    return obj;
}

let sprite1 = sprite();

Second way:

const sprite = () => {

    let obj = {};

    obj.hp = 100;

    obj.damage = () => {
        obj.hp -= 25;
    }

    obj.heal = () => {
        obj.hp += 25;
    }

    return obj;
}

let sprite1 = sprite();

I tested both of these syntax and they both work, but I see only the second way being used more often.

So my question is:

Is it ok to use the syntax in the first way? Is there a reason why the first way syntax is not widely used? Is it bad practice, if so Why?

I am just a bit new to OOP in JS and looking for some clarification.

Thanks!

[You probably shouldn't be using arrow functions in objects](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch). — Andy, Jan 17 '19 at 21:57
First: You're creating a deep object, Second: You're creating an object and then you're adding properties/values to it. Otherwise there is no difference. — kemicofa ghost, Jan 17 '19 at 22:01

Garrett Motzner · Accepted Answer · 2019-01-21T22:53:46.510

A few differences between the two styles:

Mutation: the second way changes the object over time. So if you somehow got access to the object before you finished defining it, it could look different. the first way doesn't create the object until after it is fully defined. That gives you a nice guarantee at the syntax level that you can't mess as much up, and is a big reason I prefer that method. I tend to try and avoid mutation when I can.
Scope: in the first way, the scope of definitions is slightly different. in the second, the scope is the function the object is created in. In the first, the scope is the object being created. See Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?
Terseness: the second way is slightly longer than the first.
Iterability and fancy properties: in certain cases, the first way allows you to create special property definitions that behave slightly differently than obj.foo = bar. You can use Object.defineProperty() to do the same thing though.

However, in your specific example, they are identical (as long as you don't use this or arguments in any of it's functions), and just a matter of preference.

Michael Sandoval · Answer 2 · 2019-01-17T23:56:14.200

1

The second one is semantically right in JavaScript it isn't in TypeScript, some Linters may ask you for an interface or something, but it's not an error problem but an style issue. At the end they both do the same thing.

edited Jan 17 '19 at 23:56

answered Jan 17 '19 at 22:13

Michael Sandoval

136
5

2

Hm. What would `this` be in those arrow functions? – Andy Jan 17 '19 at 22:15
@Andy right? Yeah, I'm not sure off the top of my head (pretty sure it's the object, but I would want to make sure I hadn't misremembered it and the scope was actually the creating function). Even more confusing, what does `arguments` refer to? – Garrett Motzner Jan 17 '19 at 22:21
@Andy When run directly in the browser console, `this` inside the arrow functions is the `Window` object. – Herohtar Jan 17 '19 at 22:42
3

I know the answer :) I was checking that michael knew. It's covered in that link in my first comment under the question. – Andy Jan 17 '19 at 22:44
Sorry! I copied it wrong, you're right, when TS is translated this refers to actual context, in this case window. I'll fix it @Andy – Michael Sandoval Jan 17 '19 at 23:55

What is the difference in the usage of these two JavaScript OOP Syntax?

2 Answers2