If you want to keep the original array untouched but return a new array with the element inserted into a particular index you can use the new .toSpliced() method:

This avoids mutating the array in place:

//                0    1    2
const letters = ["A", "B", "D"];
const insertIndex = 2; // position in the array to insert 
const correctLetters = letters.toSpliced(insertIndex, 0, "C"); // 0 means don't delete any items, just insert. "C" is the item you want to insert.
console.log(correctLetters); // ["A", "B", "C", "D"] (new array contains new char)
console.log(letters); // ["A", "B", "D"] (unmodified)

If you need to insert multiple items into the array, just like its sibling .splice(), you can use .toSpliced() with multiple arguments:

.toSpliced(insertIndex, 0, "C", "D", "E");

The above, for example, will insert "C", "D", and "E" at insertIndex into the array without modifying it, returning a new array instead.

If you want to keep the original array untouched, but return a new array with the element inserted into a particular index, you can use the new .toSpliced() method:

This avoids mutating the array in place:

//                0    1    2
const letters = ["A", "B", "D"];
const insertIndex = 2; // Position in the array to insert
const correctLetters = letters.toSpliced(insertIndex, 0, "C"); // 0 means don't delete any items, just insert. "C" is the item you want to insert.
console.log(correctLetters); // ["A", "B", "C", "D"] (the new array contains a new character)
console.log(letters); // ["A", "B", "D"] (unmodified)

If you need to insert multiple items into the array, just like its sibling .splice(), you can use .toSpliced() with multiple arguments:

.toSpliced(insertIndex, 0, "C", "D", "E");

The above, for example, will insert "C", "D", and "E" at insertIndex into the array without modifying it, returning a new array instead.