How to Clone an Array in TypeScript ?

A cloned array is an array that contains all the items or elements contained by an already existing array in the same order. A cloned array does not affect the original array. If there is any change made in the cloned array it will not change that item in the original array.

We can use the following methods to clone an array in TypeScript:

Using Array.slice() method

The Array.slice() method can be used to create a copy or clone of the already existing array in another array.

Syntax:

const clonedArrayName = originalArray.slice();

Example: The below code example implements the slice() method to make the clone an array.

Javascript

const initialArr: any[] = [
    {
        emp_name: "Sushant Rana",
        company: "GeeksforGeeks"
    },
    {
        emp_name: "Raghav Chadda",
        company: "Company 1"
    },
    {
        emp_name: "Christina Kaur",
        company: "Company 2"
    }
];
const clonedArr: any[] = initialArr.slice();
console.log(clonedArr);

Output:

[{   emp_name: "Sushant Rana",   company: "GeeksforGeeks" }, 
{   emp_name: "Raghav Chadda",   company: "Company 1" }, 
{   emp_name: "Christina Kaur",   company: "Company 2" }] 

Using Spread Operator

The spread operator can also be used to create the clone of an array using the three dots syntax (…) before the name of the original array inside the square brackets.

Syntax:

const clonedArrayName = [...originalArray];

Example: The below code example will explain the use of the spread operator to create a clone of the array.

Javascript

const initialArr: any[] = [
    {
        emp_name: "Sushant Rana",
        company: "GeeksforGeeks"
    },
    {
        emp_name: "Raghav Chadda",
        company: "Company 1"
    },
    {
        emp_name: "Christina Kaur",
        company: "Company 2"
    }
];
const clonedArr: any[] = [...initialArr];
console.log(clonedArr);

Output:

[{   emp_name: "Sushant Rana",   company: "GeeksforGeeks" }, 
{   emp_name: "Raghav Chadda",   company: "Company 1" }, 
{   emp_name: "Christina Kaur",   company: "Company 2" }] 

Using JSON.stringify() and JSON.parse() methods together

The JSON.stringify() method will change the array into a JSON string and then the JSON.parse() method will be used to parse and create a cloned array from that JSON string.

Syntax:

const clonedArrayName = JSON.parse(JSON.stringify(existingArray)) as typeof existingArray;

Example: The below code example uses the above approach to create a clone of the existing array.

Javascript

const initialArr: any[] = [
    {
        emp_name: "Sushant Rana",
        company: "GeeksforGeeks"
    },
    {
        emp_name: "Raghav Chadda",
        company: "Company 1"
    },
    {
        emp_name: "Christina Kaur",
        company: "Company 2"
    }
];
const clonedArr: any[] =
JSON.parse(JSON.stringify(initialArr)) as typeof initialArr;
console.log(clonedArr);

Output:

[{   emp_name: "Sushant Rana",   company: "GeeksforGeeks" }, 
{   emp_name: "Raghav Chadda",   company: "Company 1" }, 
{   emp_name: "Christina Kaur",   company: "Company 2" }] 

Using the Object.assign() method

The Object.assign() method can also be used to create an cloned array of the existing array.

Syntax:

const clonedArrayName = Object.assign([], originalArray);

Example: The below code example practically implements the Object.assign() method to clone an array in TypeScript.

Javascript

const initialArr: any[] = [
    {
        emp_name: "Sushant Rana",
        company: "GeeksforGeeks"
    },
    {
        emp_name: "Raghav Chadda",
        company: "Company 1"
    },
    {
        emp_name: "Christina Kaur",
        company: "Company 2"
    }
];
const clonedArr: any[] = Object.assign([], initialArr);
console.log(clonedArr);

Output:

[{   emp_name: "Sushant Rana",   company: "GeeksforGeeks" }, 
{   emp_name: "Raghav Chadda",   company: "Company 1" }, 
{   emp_name: "Christina Kaur",   company: "Company 2" }] 

Using Array.from() method

The Array.from() method can also be use dot clone an array in TypeScript.

Syntax:

const clonedArrayName = originalArray.from();

Example: The below code example illustrates the use of the Array.from() method to clone an array in TypeScript.

Javascript

const initialArr: any[] = [
    {
        emp_name: "Sushant Rana",
        company: "GeeksforGeeks"
    },
    {
        emp_name: "Raghav Chadda",
        company: "Company 1"
    },
    {
        emp_name: "Christina Kaur",
        company: "Company 2"
    }
];
const clonedArr: any[] = Array.from(initialArr);
console.log(clonedArr);

Output:

[{   emp_name: "Sushant Rana",   company: "GeeksforGeeks" }, 
{   emp_name: "Raghav Chadda",   company: "Company 1" }, 
{   emp_name: "Christina Kaur",   company: "Company 2" }]