Entendiendo el método Object.assign() en JavaScript

El Object.assign() Se introdujo un método en ES6 que copia todas las propiedades enumerables propias de una o más fuentes objetos a un objetivo objeto y devuelve el objeto de destino.

El Object.assign() El método invoca a los captadores en los objetos de origen y a los establecedores en el objeto de destino. Solo asigna propiedades, no copia ni define nuevas propiedades.

Las propiedades del objeto de destino se sobrescriben con las propiedades de los objetos de origen si tienen la misma clave. Del mismo modo, las propiedades de los objetos de origen posteriores se sobrescriben con las anteriores.

El Object.assign() el método maneja null y undefined valores de origen correctamente y no genera ninguna excepción.

Sintaxis

Así es como la sintaxis de Object.assign() parece:

Object.assign(target, ...sources)

• target — El objeto de destino que se modifica y se devuelve después de aplicar las propiedades de las fuentes.
• sources — Los objetos de origen que contienen las propiedades que desea aplicar al objeto de destino.

Clonar un objeto

El Object.assign() El método es una de las cuatro formas, que expliqué anteriormente, de clonar un objeto en JavaScript.

El siguiente ejemplo demuestra cómo puede usar Object.assign() para clonar un objeto:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    peach: '🍑',
    melon: '🍈',
    banana: '🍌'
};

const moreFruits = Object.assign({}, fruits);

console.log(moreFruits);

// {
//     mango: '🥭️',
//     apple: '🍎',
//     peach: '🍑',
//     melon: '🍈',
//     banana: '🍌'
// }

Recuerda que Object.assign() solo crea un clon superficial del objeto y no un clon profundo.

Para crear un clon profundo, puede usar métodos JSON o una biblioteca de terceros como Lodash.

Combinar objetos

El Object.assign() El método también puede fusionar varios objetos de origen en un objeto de destino. Si no desea modificar el objeto de destino, simplemente pase un vacío ({} ) objeto como objetivo como se muestra a continuación:

const div = {
    width: '45px',
    height: '45px'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

Si los objetos de origen tienen mismas propiedades , se sobrescriben con las propiedades de los objetos más adelante en el orden de los parámetros:

const div = {
    width: '45px',
    height: '45px',
    color: 'green'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// The `color` property is overwritten by later object
// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

Convertir una matriz en un objeto

Por último, también podría usar el Object.assign() método para convertir una matriz en un objeto en JavaScript. Los índices de matriz se convierten en claves de objeto y los valores de matriz se convierten en valores de objeto:

const foods = ['🍪', '🎂', '🍰', '🍩', '🍨'];

// convert array to an object
const obj = Object.assign({}, foods);

console.log(obj);

// {
//     '0': '🍪',
//     '1': '🎂',
//     '2': '🍰',
//     '3': '🍩',
//     '4': '🍨'
// }

Compatibilidad con navegadores

Como Object.assign() es parte de ES6, solo funciona en navegadores modernos. Para admitir navegadores más antiguos como IE, puede usar un polyfill disponible en MDN.

Para obtener más información sobre objetos, prototipos y clases de JavaScript, consulte esta guía.

Leer a continuación: Entendiendo el método Array.from() en JavaScript