Object Rest and Spread in TypeScript

[ad_1]

Object rest and spread are features in TypeScript that allow developers to easily manipulate objects in various ways. They are similar to the spread and rest syntax used in arrays, but they are used for objects instead. In this article, we will take a deep dive into object rest and spread, and explore their use cases with examples.

Object rest is a syntax that allows developers to extract the remaining properties of an object and assign them to a new object. This is useful when we want to create a new object that has most of the properties of an existing object, but with some changes. Here’s an example:

const person = {
name: 'John',
age: 30,
city: 'New York',
country: 'USA'
};const { name, ...rest } = person;
console.log(name);  // Output: John
console.log(rest);  // Output: { age: 30, city: 'New York', country: 'USA' }

In the code above, we use object rest to create a new object named rest that contains all the properties of person except name. We do this by using the object destructuring syntax { name, ...rest } = person. The name property is extracted and assigned to the variable name, while the remaining properties are assigned to the new object rest.

Object rest is particularly useful when we want to extract a subset of properties from an object and pass them as arguments to a function. Here’s an example:

function printPersonDetails({ name, age }: { name: string, age: number }) {
console.log(`Name: ${name}, Age: ${age}`);
}const person = {
name: 'John',
age: 30,
city: 'New York',
country: 'USA'
};
printPersonDetails({ ...person });  // Output: Name: John, Age: 30

In the code above, we use object rest to extract the name and age properties from person and pass them as arguments to the printPersonDetails function. This allows us to pass only the required properties to the function, while keeping the original object intact.

Object spread is a syntax that allows developers to copy the properties of one object into another object. This is useful when we want to merge the properties of multiple objects into a new object. Here’s an example:

const person = {
name: 'John',
age: 30,
};const address = {
city: 'New York',
country: 'USA',
};
const newPerson = { ...person, ...address };
console.log(newPerson); // Output: { name: 'John', age: 30, city: 'New York', country: 'USA' }

In the code above, we use object spread to copy the properties of person and address into a new object named newPerson. This creates a new object with all the properties of person and address. If there are properties with the same name in both objects, the value of the property in the second object (address in this case) will overwrite the value in the first object (person in this case).

Object spread is particularly useful when we want to create a new object with most of the properties of an existing object, but with some changes. Here’s an example:

const person = {
name: 'John',
age: 30,
city: 'New York',
country: 'USA'
};const newPerson = { ...person, age: 40 };
console.log(newPerson);  // Output:

In the code above, we use object spread to create a new object named newPerson that contains all the properties of person, but with the age property changed to 40. This creates a new object with most of the properties of person, but with some changes.

Object spread is also useful when we want to create a shallow copy of an object. Here’s an example:

const person = {
name: 'John',
age: 30,
address: {
city: 'New York',
country: 'USA'
}
};const newPerson = { ...person };
console.log(newPerson === person);  // Output: false
console.log(newPerson.address === person.address);  // Output: true

In the code above, we use object spread to create a shallow copy of person. This creates a new object with all the properties of person, but with a new reference in memory. This means that newPerson and person are not the same object, even though they have the same properties. However, the address property still references the same object in memory, because we are only creating a shallow copy. To create a deep copy, we would need to use a library or write our own code to recursively copy all the properties.

Object rest and spread are powerful features in TypeScript that allow developers to easily manipulate objects in various ways. Object rest allows us to extract the remaining properties of an object and assign them to a new object, while object spread allows us to copy the properties of one object into another object. These features are particularly useful when we want to create a new object that has most of the properties of an existing object, but with some changes. They are also useful when we want to extract a subset of properties from an object and pass them as arguments to a function, or when we want to create a shallow copy of an object. Understanding object rest and spread can help us write more efficient and readable code in TypeScript.

I hope you found this article useful. If you have any questions or suggestions, please leave comments. Your feedback helps me to become better.

Don’t forget to subscribe⭐️

Facebook Page: https://www.facebook.com/designTechWorld1

Instagram Page: https://www.instagram.com/techd.esign/

Youtube Channel: https://www.youtube.com/@tech..Design/

Twitter: https://twitter.com/sumit_singh2311

Gear used:

Laptop: https://amzn.to/3yKkzaC

Watch: https://amzn.to/41cialm

You can prefer React Book: https://amzn.to/3Tw29nx

Some extra books related to programing language:

https://amzn.to/3z3tW5s