What is the efficient way to shallow clone an object using JavaScript?

Question

//function for creating a shallow object and remove the multiple spaces
export const getTrimmedValues = (values) => {
  const shallowValues = {
    ...values,
  };
  for (const key in shallowValues.primaryInformation) {
    const currentValue = shallowValues.primaryInformation[key];
    if (typeof currentValue === 'string') {
      shallowValues.primaryInformation[key] = currentValue.replace(/\s+/g, ' ').trim();
    }
  }
  return shallowValues;
};


//Original Object
const values = {
    otherObject: {}
    otherArray: []
    primaryInformation: {
        email: "[email protected]"
        externalId: "DSB-External test"
        firstName: "Dave External test    test"
        isGood: true
        isHeaven: false
        lastName: "Bacay External"
        userId: 656555
    }
}

//calling the function
getTrimmedValues(values)

I want to create a shallow object from the original object and edit the string to remove the multiple spaces by using shallow object and for loop, I think I implemented it in a wrong way.

All advices and comments are appreciated.

Does this answer your question? How do I correctly clone a JavaScript object? — Dexygen
– Dexygen, Commented May 10, 2022 at 17:09
There is no such term as a "shallow object" in JavaScript, as you found out in the tags. And indeed, clicking on the tags will produce a list of questions about "shallow cloning" in JavaScript. But it's not clear that you are doing a shallow clone, since you actually descend into the subobject, which would be deeper than the typical "shallowness". — Heretic Monkey
– Heretic Monkey, Commented May 10, 2022 at 17:09
You've initially tagged the question with reactjs, would this other question answers yours? — Emile Bergeron
– Emile Bergeron, Commented May 10, 2022 at 17:12

Ganesh Patil · Accepted Answer · 2022-05-10 17:14:57Z

1

Here we can take advantage of JSON.stringify function has a second parameter as a replacer function is internally iterating on every key of object. Please check the below code.

//Original Object
const values = {
  otherObject: {},
  otherArray: [],
  primaryInformation: {
      email: "[email protected]",
      externalEmployeeId: "DSB-External test   ",
      firstName: "Dave External test    test",
      isActive: true,
      isExternal: false,
      lastName: "Bacay External",
      userId: 656555,
  }
};

function getTrimmedValues(obj) {
  let str = JSON.stringify(obj, (key, value) => {
    if(typeof value === 'string') {
      return value.replace(/\s+/g, ' ').trim()
    }
    return value;
  });
  return JSON.parse(str);
}
console.log(getTrimmedValues(values));

answered May 10, 2022 at 17:14

Ganesh Patil

111 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Emile Bergeron Over a year ago

While it works in this case, JSON.stringify will fail on circular references and non-serializable values (e.g. Set, Date, etc.).

Ganesh Patil Over a year ago

Thanks, @EmileBergeron for the tip, I will keep it in the mind. Can you please tell me how we can create a circular reference in the js object? I am trying but didn't create. codesandbox.io/s/new-frog-0mwu5z?file=/src/index.js

Emile Bergeron Over a year ago

values.values = values would throw TypeError: Converting circular structure to JSON.

Collectives™ on Stack Overflow

What is the efficient way to shallow clone an object using JavaScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related