Create a New Javascript Object by Destructuring Existing Objects

I learned some new Javascript methods this week which I think are very useful.

const object = {
  name: `Eva`,
  breed: `Labrador`
};
console.log(object);

// Object to arrays of properties
const objectToEntries = Object.entries(object); 
console.log(objectToEntries);

// Arrays back to properties of an object
const entriesBackToObject = Object.fromEntries(objectToEntries); 
console.log(entriesBackToObject);

Imagine a scenario where you have an object of customer and object of a shopping item, in the example below, an Adidas T-shirt. You can deconstruct the properties from the two objects and combine them to create an order object.

const customer = {
  id: `173463`,
  name: `Steve`
};

const item = {
  category: `shirt`,
  name: `Black Hoodie`,
  brandN: `Adidas`,
  price: 10000
};

let customerEntries = Object.entries(customer);

let itemEntries = Object.entries(item);

let order = [];
order.push(...customerEntries, ...itemEntries);

let orderObject = Object.fromEntries(order);
console.log(orderObject); 

// Output: Object {id: "173463", name: "Black Hoodie", category: "shirt", brandN: "Adidas", price: 10000}

The code above is not quite right though since both customer and item objects have a property called name. The name property of ...itemEntries overwrites the name property of ...customerEntries. You can read more about spread operator here.

There are a few other ways to combine customerEntries and itemEntries without having to use the spread operator. I find this explanation here useful to read. There also seems to be quite a popular old discussion on Stack Overflow on how to achieve the same goal.

Now how do you make sure that the property name will not be overwritten by the second array? There must be an elegant way of achieving this, but here is what I have in mind.

let customerEntries = Object.entries(customer);
let [, customerName] = customerEntries;
customerName[customerName.indexOf(`name`)] = `customerName`;

let itemEntries = Object.entries(item);
let [, itemName, ...restOfItemEntries] = itemEntries;
itemName[itemName.indexOf(`name`)] = `itemName`;

The final solution looks like this:

const customer = {
  id: `173463`,
  name: `Steve`
};

const item = {
  category: `shirt`,
  name: `Black Hoodie`,
  brand: `Adidas`,
  price: 10000
};

let customerEntries = Object.entries(customer);
let [, customerName] = customerEntries;
customerName[customerName.indexOf(`name`)] = `customerName`;

let itemEntries = Object.entries(item);
let [, itemName, ...restOfItemEntries] = itemEntries;
itemName[itemName.indexOf(`name`)] = `itemName`;

let order = [];
order.push(...customerEntries, customerName, ...itemEntries);

let orderObject = Object.fromEntries(order);
console.log(orderObject); 
//Object {id: "173463", customerName: "Steve", category: "shirt", itemName: "Black Hoodie", brand: "Adidas"…}

In summary, you can create a new object by deconstructing other objects. What you need to keep in mind is to prevent overwriting object properties whose names are shared between two different objects.