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.