TypeScript / Propagacion de objetos

Bienvenidos sean a este post, hoy veremos un operador que nos provee una caracteristica muy interesante.

Algo habitual cuando trabajamos con objetos basicos de javascript es la necesidad de copiar propiedades de un objeto a otro, o hacer una mezcla y coincidencias de propiedades entre varios objetos. Una tecnica que podemos usar proviene de ES7 y es la que le da titulo al post, la propagacion de objetos es la que nos permitirra esto. Analicemos el siguiente codigo:

let primero: object = { id: 1, nombre: "primer objeto" };
let segundo: object = { ...primero };
console.log(JSON.stringify(segundo));

Codigo simple donde primero creamos un objeto con dos propiedades, luego creamos otro objeto pero esta vez usaremos el operador de propagacion (…) seguido del primer objeto y finalmente mediante stringify de JSON mostramos el contenido del segundo objeto si lo compilamos veremos lo siguiente:

$ node object.js
{"id":1,"nombre":"primer objeto"}
$

Realizo lo solicitado tomo todos los elementos del primer objeto y los «propago» o copio en el segundo. Pero esto es solo el comienzo, tomemos el codigo anterior y hagamos la siguiente modificacion:

let nombre: object = { nombre: "nombre objeto" };
let id: object = { id: 1 };
let obj = { ...id, ...nombre };

console.log(JSON.stringify(obj));

Aqui definiremos dos objetos donde tendremos dos propiedades distintas y luego en un terceer objeto las usaremos. Para ello aplicaremos el operador de propagacion en cada uno de los objetos anteriores y sera sus respectivas propiedades del nuevo objeto. Por ultimo tenemos una linea para mostrar el contenido del ultimo objeto, veamos como es su salida:

$ node object.js
{"id":1,"nombre":"nombre objeto"}
$

El codigo realizo lo comentado anteriormente aplico las propiedades de los dos objetos en el tercero, por lo tanto mediante este operador podemos agregar todos las propiedades de los objetos que necesitemos.

Trabajar de esta forma siempre se hara de forma incremental pero en algunas ocasiones podemos tener propiedades con el mismo nombre. Cuando esto sucede siempre la ultima propiedad que se repite sera la que tiene la precedencia y esta sera la que quede en el objeto final. Analicemos el siguiente codigo para hablar sobre este tema:

let primero: object = { id: 1, nombre: "nombre objeto" };
let segundo: object = { id: 1001, desc: "es uun objeto" };
let obj = { ...primero, ...segundo };

console.log(JSON.stringify(obj));

En esta oportunidad tenemos dos objetos donde comparten una misma propiedad, id, y despues tenemos uno llamado nombre y otro desc, lo siguiente es un nuevo objeto donde le propagaremos estos dos objetos. Y al igual que en nuestros otros codigos al final mostraremos el resultado del tercer objeto creado. Pasemos a ver como es su salida:

$ node object.js
{"id":1001,"nombre":"nombre objeto","desc":"es uun objeto"}
$

Sucedio lo que comentamos anteriormente. Se agrego los tres campos pero el de id al estar repetido se cumplio lo que dijimos, quedo el ultimo ingresado, esto es algo que deben tener en mente a la hora de hacer esta accion.

Pero esto no es solamente para lo que puede usarse sino que tambien podemos usar la propagacion con arrays. Veamos el siguiente codigo:

let primero = [1, 2, 3];
let segundo = [3, 4, 5];
let arr = [ ...primero, ...segundo ];

console.log(arr);

En lugar de definir dos objetos definimos dos arrays, observen que en la tercer linea definimos un nuevo array y en este almacenaremos la propagacion de los dos arrays anteriores. Compilemos y veamos su salida:

$ node object.js
[ 1, 2, 3, 3, 4, 5 ]
$

En este caso nos unio todos los elementos sin importar si se encuentran repetidos los valores, a su vez podemos usar array de cualquier tipo, vamos a ver un ultimo ejemplo:

let primero = [ { id: 1, nombre: "Primero" } ];
let segundo = [ { id: 2, nombre: "Segundo" } ];

let arr = [ ...primero,
        { id: 3, nombre: "Tercero" },
        ...segundo ];

console.log(JSON.stringify(arr,null,4));

Primero definiremos dos arrays y en ambos casos contendran un objeto de tipo clave-valor con distintas propiedades, luego definiremos otro array donde propagaremos al primero, agregaremos un objeto manual y propagaremos el segundo array. Nuestro ultimo paso sera mostrar el contenido del tercer array mediante stringify, veamos como es su salida:

$ node object.js
[
    {
        "id": 1,
        "nombre": "Primero"
    },
    {
        "id": 3,
        "nombre": "Tercero"
    },
    {
        "id": 2,
        "nombre": "Segundo"
    }
]
$

Observen como nos agrega segun el orden que fuimos agregandolo, tengan esto en cuenta que la propagacion siempre agrega en base a como lo informemos y en el caso de los arrays no aplica le precedencia que vimos al usar objetos de tipo clave-valor. Con esto tenemos las distintas posibilidades que nos brinda typescript para poder propagar objetos de tipo coleccion, es decir clave-valor o arrays, de manera muy sencilla.

En resumen, hoy hemos al operador de propagacion de colecciones, como es, para que sirve, como se usa, sus distintas conductas y unos ejemplos para ver las distintas posibilidades, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.