2

In TypeScript I have a base object as a template and I want to replicate that object changing just the one property similar to below:

interface user {
    name: string, 
    jobTitle: string
}

const employee: user = {name: 'Liane', jobTitle: 'Web Dev'}

const newEmployee1 = employee;
newEmployee1.name = 'James';
const newEmployee2 = employee;
newEmployee2.name = 'John';

However when I view the results in the console every employees name is 'John' as shown below:

{name: 'John', jobTitle: 'Web Dev'}
{name: 'John', jobTitle: 'Web Dev'}
{name: 'John', jobTitle: 'Web Dev'} 

I do understand this is due to object referencing, however I don't want to reference the base employee I want to clone it as it own object independant from the other users. So when I console log the objects I'll get:

{name: 'Liane', jobTitle: 'Web Dev'}
{name: 'James', jobTitle: 'Web Dev'}
{name: 'John', jobTitle: 'Web Dev'}

Is there any way for me to do this?

2 Answers 2

6

2025 Update

There's loads of options here (more than the ones I've listed).
Most of them are very readable; beyond that, each have their own pros and cons around performance, availability, and functionality.
I'll go through each that I list below:

  1. Spread Operator (...)
  2. Object.assign
  3. Structured Clone (structuredClone

Spread Operator (...)

The spread syntax is probably the most general purpose syntax of all the options, this can be used on Functions, Arrays, and Objects:

// Functions
myFunction(a, ...iterableObj, b)
// Arrays
[1, ...iterableObj, '4', 'five', 6]
// Objects
{ ...obj, key: 'value' }

(Source: Docs)
This is quite an easy syntax to read but can be slower compared to other methods - this answer discusses that more.
Caniuse

Object.assign

Unlike spread, Object.assign is focussed on Objects ({}) only, but it carries a warning around deep-copying (where it recommends structuredClone).
You can also use it to copy multiple objects at once:

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

(Source: Docs)
Caniuse

Structured Clone (structuredClone)

I recently learnt about this method from this answer; structuredClone looks like a great method for making deep-copies of object.
Note that there a slightly different expectations when using the method for something like an ArrayBuffer, see Transferring an Object

We can use the buffer in the cloned object, but if we try to use the original buffer we will get an exception.

// Create an ArrayBuffer with a size in bytes
const buffer1 = new ArrayBuffer(16);

const object1 = {
  buffer: buffer1,
};

// Clone the object containing the buffer, and transfer it
const object2 = structuredClone(object1, { transfer: [buffer1] });

// Create an array from the cloned buffer
const int32View2 = new Int32Array(object2.buffer);
int32View2[0] = 42;
console.log(int32View2[0]);

// Creating an array from the original buffer throws a TypeError
const int32View1 = new Int32Array(object1.buffer);

(Source: Docs)
Caniuse

Original Answer

If you want to clone an existing object, I'd recommend the "spread operator"

// interface user {
//     name: string, 
//     jobTitle: string
// }

// const employee: user = {name: 'Liane', jobTitle: 'Web Dev'}
const employee = {name: 'Liane', jobTitle: 'Web Dev'}

const newEmployee1 = {
  ...employee,
  name: 'James'
};

const newEmployee2 = {
  ...employee,
  name: 'John'
};

console.log(employee)
console.log(newEmployee1)
console.log(newEmployee2)

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

Comments

2

The easiest way would be to use either the spread operator:

const newEmployee1 = {
  ...employee,
  name: 'James',
};
const newEmployee2 = {
  ...employee,
  name: 'John',
};

Or with an Object.assign():

const newEmployee1 = Object.assign({}, employee);
newEmployee1.name = 'James';

const newEmployee2 = Object.assign({}, employee);
newEmployee2.name = 'John';

Keep in mind that neither of these are a deep clone, and non-primitive values share the same reference.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.