Is there a difference in creating objects and adding properties with literal notation or with`new Object` in Javascript?

Asked

Viewed 86 times

5

I have a question. Do this here:

let meuCarro = new Object();
meuCarro.fabricacao = 'Ford';
meuCarro.modelo = 'Mustang';
meuCarro.ano = 1969;
console.log(meuCarro.fabricacao);
console.log(meuCarro.modelo);
console.log(meuCarro.ano);

It’s the same thing as doing this?

let meuCarro = { 
    fabricacao: 'Ford',
    modelo: 'Mustang',
    ano: 1969,
}
console.log(meuCarro.fabricacao);
console.log(meuCarro.modelo);
console.log(meuCarro.ano);

Is there any difference between using {} and new Object to create Javascript objects?

javascript characteristic-language objects

  • Yes, but in the second way, in the manufacturing key you are assigned an array instead of a string. recommend using the second form, it is more succinct, although there is no why not do in the first way

2 answers

7

There is no difference in relation to building object, but the semantics of how properties are added is different.

Literal objects in Javascript are syntactic sugar for building objects Object.

Therefore, do:

const obj = new Object();

It’s exactly the same as this:

const obj = {};

In this sense, the difference is merely syntactic. And of course, you can already define properties directly in literal notation.

However, there is a difference when adding properties to the object (although this rarely makes a significant difference).

When adding the properties directly to the literal object, the same semantics of the function is used Object.defineProperty - that is, semantics of definition of properties. When defining a property, no Setter will be activated.

Behold:

// Modificarei o protótipo para demonstrar que nenhum setter é invocado.
Object.defineProperty(Object.prototype, 'foo', {
  set: function(val) {
    console.log(`Called setter 'foo' with value '${val}'.`);
  }
});

const myObj = {
  foo: 'Bar' // Nenhuma mensagem será impressa ao se definir esta propriedade.
};

However, when using the allocation operator (=), the semantics of assignment active the setters, if they exist. See:

// Modificarei o protótipo para demonstrar que o setter é invocado
Object.defineProperty(Object.prototype, 'foo', {
  set: function(val) {
    console.log(`Called setter 'foo' with value '${val}'.`);
  }
});

const myObj = {};
myObj.foo = 'Bar'; // Uma mensagem será impressa ao se setar esta propriedade.

But note that at this point, the difference is no longer about the literal form or new Object. The difference, in this sense, is the way the properties are added.

In short, in Javascript, the semantics of defining properties is different from the semantics of assigning properties.

-2

Yes, they are equivalent. The two methods are declaring the object and defining its properties, but in the second way, you stated fabricacao as an array, not as a string.

Doing the second way is more recommended, makes your code cleaner and easier to understand.

Browser other questions tagged javascript characteristic-language objects

You are not signed in. Login or sign up in order to post.