11

Qual é a diferença detalhada de se usar Object.assign e o spread operator (...) para o espalhamento de propriedades de objetos?

Por exemplo, ao editar um objeto para novos valores, é a mesma saída:

const cursoNaDB = {
  abreviacao: "ES5",
  nome: "EcmaScript5",
  ano: "2009",
  categoria: "INICIANTE"
}

const cursoParaAlterarNaDB = {
  abreviacao: "ES6",
  nome: "EcmaScript6",
  ano: "2015",
  categoria: "AVANÇADO"
}

console.log(Object.assign(cursoNaDB, cursoParaAlterarNaDB));

console.log({ ...cursoNaDB, ...cursoParaAlterarNaDB });

1 Resposta 1

12

Existem algumas diferenças sutis:

Diferença na definição de propriedades

A primeira delas é que Object.assign utiliza a operação interna [[Set]] para definir as propriedades. A notação de espalhamento (spread operator) simplesmente irá definir as propriedades. Assim, Object.assign chamará os setters, mas o spread operator não. Veja um exemplo:

const target = {
  set foo(val) {
    console.log('Chamou o set:', val);
  }
};
const other = { foo: 123 };

// Object.assign chama o setter:
console.log(
  Object.assign(target, other)
);

console.log('---');

// Spread operador não chama o setter:
console.log(
  { ...target, ...other }
);

Note, no exemplo acima, que como o spread operator nem sequer chamou o setter, a propriedade foo foi definida como 123 no objeto resultante. Contudo, ao utilizarmos Object.assign, o valor que definimos para foo não fica persistido no objeto resultante, já que o setter não faz nada com ele (além de imprimi-lo no console).

Assim, pode-se afirmar que o Object.assign funciona de forma similar ao operador de atribuição (=), que também executa a operação interna [[Set]] (o que invoca os setters, se existirem). O spread operator funciona de modo mais similar ao Object.defineProperty, que não executa setters:

const obj = {
  set foo(val) {
    console.log('Chamou o setter: ', val);
  }
};

// Object.assign se assemelha a isto:
obj.foo = 123;
console.log(obj); // { foo: undefined }

console.log('---');

// Spread operator se assemelha a isto:
Object.defineProperty(obj, 'foo', {
  value: 123
});
console.log(obj); // { foo: 123 }

Possível diferença no construtor do objeto resultante

Uma outra diferença é que o protótipo e construtor do objeto resultante poderá ser diferente de Object ao utilizar Object.assign. Ao utilizarmos o spread operator, o construtor do objeto resultante é, sempre, Object:

class DifferentThanObject {
  a = 1;
  b = 2;
}

const instance = new DifferentThanObject();
const other = { c: 3, d: 4 };

const obj1 = Object.assign(instance, other);
console.log(obj1.constructor.name); // DifferentThanObject

const obj2 = { ...instance, ...other };
console.log(obj2.constructor.name); // Object

Para entender, precisamos estar cientes da assinatura de Object.assign:

Object.assign(target, ...sources)

A diferença de construtores se dá, então, já que Object.assign "copia" todas as propriedades enumeráveis de cada um dos objetos source (passados do segundo argumento para frente) para o destino (target, o primeiro argumento). Assim, o construtor do objeto resultante será sempre o mesmo do objeto target.

Conforme vimos no exemplo acima, como instance (passado como target para o Object.assign) é uma instância de DifferentThanObject, a saída também será uma instância de DifferentThanObject.

A especificação da linguagem para Object.assign deixa isso excepcionalmente claro (referir ao link para o algoritmo completo):

Perform ? Set(to, nextKey, propValue, true).

Sendo to o objeto que foi passado como target, nextKey a chave da propriedade a ser definida e propValue o valor desta.

Isso evidencia que um novo objeto nem chega a ser criado. Para cada propriedade dos objetos source, será executada a operação [[Set]] no target. Ou seja, o mesmo objeto que entra como target é aquele que sai, só que com propriedades setadas a mais.

No entanto, sempre que utilizarmos o spread operator para fazer essa "transferência" de propriedades, o construtor do objeto resultante será Object. Isso acontece porque sempre criamos um novo objeto literal (que é, por definição, construído por Object):

const literal = {};
console.log(literal.constructor.name); // Object

A diferença pode ser melhor entendida se tentarmos imitar o comportamento de Object.assign e do spread operator explicitamente:

class DifferentThanObject {
  a = 1;
  b = 2;
}

const instance = new DifferentThanObject();
const other = { c: 3, d: 4 };

// ------- "Imitando" `Object.assign`:
// Object.assign(instance, other);

const resulting1 = instance;
resulting1.c = other.c;
resulting1.d = other.d;

console.log(resulting1);

// ------- "Imitando" spread operator:
// { ...instance, ...other };

const resulting2 = {};
Object.defineProperty(resulting2, 'a', { value: instance.a, enumerable: true });
Object.defineProperty(resulting2, 'b', { value: instance.b, enumerable: true });
Object.defineProperty(resulting2, 'c', { value: other.c, enumerable: true });
Object.defineProperty(resulting2, 'd', { value: other.d, enumerable: true });

console.log(resulting2);

Note que, ao utilizarmos o spread operator, somos "obrigados" a criar um novo objeto literal (com a notação {}) para que, sobre ele, as propriedades sejam espalhadas. O Object.assign irá simplesmente setar as propriedades a qualquer valor passado ao seu primeiro argumento.

Você pode passar um objeto vazio como target no Object.assign se quiser garantir que somente as propriedades próprias e enumeráveis serão transferidas, deixando de "transferir" o construtor e propriedades do protótipo do objeto target:

class DifferentThanObject {
  // Métodos são anexados ao protótipo:
  method() {
    // noop
  }
  
  // Propriedades da instância:
  a = 1;
}

const instance = new DifferentThanObject();
const other = { b: 2 };

const resulting1 = { ...instance, ...other };
console.log(resulting1.constructor.name); // Object
console.log(typeof resulting1.method); // undefined //=> Métodos do protótipo NÃO são "transferidos".
console.log(resulting1); // { a: 1, b: 2 }

console.log('---');

const resulting2 = Object.assign(instance, other);
console.log(resulting2.constructor.name); // DifferentThanObject
console.log(typeof resulting2.method); // function //=> Métodos do protótipo são "transferidos".
console.log(resulting2); // { a: 1, b: 2 }

console.log('---');

//        Objeto literal "vazio" ↓↓
const resulting3 = Object.assign({}, instance, other);
console.log(resulting3.constructor.name); // Object
console.log(typeof resulting3.method); // undefined //=> Métodos do protótipo NÃO são "transferidos".
console.log(resulting3); // { a: 1, b: 2 }

Isso acontece porque, nesse último exemplo, target é um objeto literal (cujo construtor é Object) e, como vimos, o Object.assign resulta no próprio target, só que com as propriedades dos outros objetos (sources) setadas.

Vale a pena ler Qual é a diferença entre criar um objeto a partir da forma literal ou a partir de uma função construtora? para entender melhor.

Conclusão

No seu caso, como você não está lidando com setters e os objetos têm o mesmo construtor (Object, já que ambos foram criados de forma literal), não há nenhuma diferença real.

A única ressalva é que Object.assign é um pouco mais suportado que o spread operator para o espalhamento de propriedades de objetos. Isso porque Object.assign foi introduzido no ECMAScript 2015 (ES6), enquanto o spread operator só ganhou a habilidade de espalhar propriedades de objetos no ECMAScript 2018.

2
  • 1
    Legal, por isso que o Object.assign funciona bem com o Vue. 10/11/2020 às 18:31
  • 1
    Ótima resposta! perfeitamente descrita a questão da instância do objeto e sobre o acionamento do setter. Me ajudou muito
    – user201180
    22/09/2022 às 9:04

Você deve fazer log-in para responder a esta pergunta.