You can use slice() method to create a deep copy of an array in Typescript. So how to do it? Let’s go into detail now.
Create a deep copy of an array in TypeScript
Use slice method
The slice method will help you return an array with all elements you selected.
Syntax:
array.slice(start, end)
Parameters:
- start: The start position of the element that you want to select.
- end: The end position of the element that you want to select.
If we don’t pass any value to the slice method, the slice method will return us an exact array like the origin array.
Example:
type infor = { name: string; age: number; address: string };
const inforList: infor[] = [
{
name: "James",
age: 29,
address: "Iceland",
},
{
name: "Anna",
age: 20,
address: "United State",
},
{
name: "Joma",
age: 30,
address: "England",
},
];
// Using the slice method without passing in parameters will copy your entire array
const copyArray: infor[] = inforList.slice();
console.log(copyArray);Output:
[LOG]: [{ "name": "James",
"age": 29, "address": "Iceland" }, { "name": "Anna", "age": 20,
"address": "United State" }, { "name": "Joma", "age": 30,
"address": "England" }] Use spread operator
The spread operator(…) is not easy to understand. You can think it simply helps you to remove the square braces and keep all elements inside. So we can wrap all that elements inside another square brace to make it into another array.
Example:
type infor = { name: string; age: number; address: string };
const inforList: infor[] = [
{
name: "James",
age: 29,
address: "Iceland",
},
{
name: "Anna",
age: 20,
address: "United State",
},
{
name: "Joma",
age: 30,
address: "England",
},
];
// Spread operator will remove array symbol
const copyArray: infor[] = [...inforList];
console.log(copyArray);Output:
[LOG]: [{ "name": "James", "age":
29, "address": "Iceland" }, { "name": "Anna", "age": 20,
"address": "United State" }, { "name": "Joma", "age": 30,
"address": "England" }]Use splice method
The splice method will help you to remove and add a new element to your array. But you can also use splice to create a deep copy of the array.
Syntax:
array.splice(start, deleteCount , item…)
Parameters:
- start: The position that you want to start changing the array.
- deleteCount: Indicate the number of elements in the array that will be deleted.
- item… : All elements that you want to add to the array.
Example:
type infor = { name: string; age: number; address: string };
const inforList: infor[] = [
{
name: "James",
age: 29,
address: "Iceland",
},
{
name: "Anna",
age: 20,
address: "United State",
},
{
name: "Joma",
age: 30,
address: "England",
},
];
// With a parameter equal to 0 the splice method will start from the start to the end
const copyArray: infor[] = inforList.splice(0);
console.log(inforList);
console.log(copyArray);Output:
[LOG]: []
[LOG]: [{ "name": "James",
"age": 29, "address": "Iceland" }, { "name": "Anna", "age": 20,
"address": "United State" }, { "name": "Joma", "age": 30,
"address": "England" }]Here I use the splice method and set position change from 0 but not set the deteteCount, and it will be set default to array length. The side effect is your origin array will be changed.
Summary
In this article, I showed you how to create a deep copy of an array in Typescript. You can use the slice, splice method, or spread operator syntax. It is up to your purpose and what you want. Thanks for reading!
Maybe you are interested:
- How to find an Object in an Array in TypeScript
- Push an object to an Array in TypeScript
- Sort an Array of Strings in Descending order in TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm