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!

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
– kemicofa, Commented Jan 17, 2019 at 22:01

Garrett Motzner · Accepted Answer · 2019-01-21 22:53:46Z

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 · Accepted Answer · 2019-01-17 23:56:14Z

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, 2019 at 23:56

answered Jan 17, 2019 at 22:13

Michael Sandoval

1465 bronze badges

5 Comments

Andy Over a year ago

Hm. What would this be in those arrow functions?

Garrett Motzner Over a year ago

@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?

Herohtar Over a year ago

@Andy When run directly in the browser console, this inside the arrow functions is the Window object.

Andy Over a year ago

I know the answer :) I was checking that michael knew. It's covered in that link in my first comment under the question.

Michael Sandoval Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related