Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to duplicate elements of an array in the same array with JavaScript?

Javascript Web Development Object Oriented Programming

Duplicating array elements means creating copies of each element within the same array. JavaScript provides several methods to achieve this, with concat() being the most straightforward approach.

Using concat() Method

The concat() method merges arrays and returns a new array. When you concatenate an array with itself, you effectively duplicate all elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duplicate Array Elements</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        .result, .sample {
            font-size: 18px;
            font-weight: 500;
            color: rebeccapurple;
            margin: 10px 0;
        }
        .result {
            color: red;
        }
        .btn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Duplicate Array Elements</h1>
    <div class="sample">Original Array: [1, 2, 3, 4, 'A']</div>
    <button class="btn" onclick="duplicateElements()">Duplicate Elements</button>
    <div class="result"></div>
    
    <script>
        let arr = [1, 2, 3, 4, "A"];
        
        function duplicateElements() {
            let duplicatedArray = arr.concat(arr);
            document.querySelector(".result").innerHTML = 
                "Duplicated Array: [" + duplicatedArray.join(", ") + "]";
        }
    </script>
</body>
</html>

Using Spread Operator

The spread operator provides a modern and concise way to duplicate array elements:

let originalArray = [1, 2, 3, 4, 'A'];
let duplicatedArray = [...originalArray, ...originalArray];

console.log("Original:", originalArray);
console.log("Duplicated:", duplicatedArray);

Original: [ 1, 2, 3, 4, 'A' ]
Duplicated: [ 1, 2, 3, 4, 'A', 1, 2, 3, 4, 'A' ]

Using push() with Spread Operator

To modify the original array instead of creating a new one:

let arr = [1, 2, 3, 4, 'A'];
console.log("Before:", arr);

arr.push(...arr);
console.log("After duplication:", arr);

Before: [ 1, 2, 3, 4, 'A' ]
After duplication: [ 1, 2, 3, 4, 'A', 1, 2, 3, 4, 'A' ]

Comparison of Methods

Method Modifies Original Returns New Array Browser Support
concat() No Yes All browsers
...spread No Yes ES6+
push(...arr) Yes No ES6+

Duplicating Multiple Times

To duplicate elements more than once, you can chain the methods or use a loop:

let arr = [1, 2, 3];
let tripleArray = [...arr, ...arr, ...arr];

console.log("Triple duplicated:", tripleArray);

// Or using a function
function duplicateNTimes(array, times) {
    let result = [];
    for (let i = 0; i < times; i++) {
        result = result.concat(array);
    }
    return result;
}

console.log("5 times:", duplicateNTimes([1, 2], 5));

Triple duplicated: [ 1, 2, 3, 1, 2, 3, 1, 2, 3 ]
5 times: [ 1, 2, 1, 2, 1, 2, 1, 2, 1, 2 ]

Conclusion

Use concat() for broad browser compatibility or the spread operator for modern JavaScript. Choose push(...arr) when you need to modify the original array in place.

Updated on: 2026-03-15T23:18:59+05:30

625 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements