How to insert an item into an array at a specific index (JavaScript)

Creating an insert ninja aka enhanced method

Extending basic array methods (Anthony Joshua style)

For more professional use, you should try extending the Array.prototype. This way, you can add ((...items) like a pro:

Array.prototype.insert = function(index, ...items) {
  this.splice(Math.min(index, this.length), 0, ...items);
  return this; // Sweet! Now you can chain methods (aka freeway for methods).
};

// Usage
let fruits = ['Apple', 'Banana'];
fruits.insert(1, 'Orange'); // Guess what! Orange just cut in line before Banana


Bringing immutability to the party

Want to maintain the purity of your array while performing an insertion? Mix slice and spread into your array cocktail:

const insertImmutable = (arr, index, ...newItems) => [
  ...arr.slice(0, index),
  ...newItems,
  ...arr.slice(index)
];

// Usage
const immutableFruits = insertImmutable(fruits, 1, 'Orange'); // Fruits got a new member, but the old gang is still intact.


Performing an insert operation with a garnished insertImmutable method helps you skip extending Array.prototype, diminish side-effects and increase code clarity. Basically, it's like cleaning your room.

Wresting with nested arrays (WWE style)

Nested arrays can be tricky, but a recursive power move can win the match:

function deepInsert(arr, index, value) {
  if (Array.isArray(arr[index])) {
    return arr[index] = deepInsert(arr[index], ...value);
  } else {
    arr.splice(index, 0, ...value);
  }
  return arr; // And the array has been deep-insert-slammed!
}

// Usage
let nestedArray = [1, [2, 3], 4];
deepInsert(nestedArray, 1, [1.5]); // Inserting an "undercover" element


Dealing with high volume insertions (Cyber Monday style)

Method chaining (Railway for methods)

For multi-level operations, returning this from your custom insert method can come in handy:

Array.prototype.insert = function(index, ...items) {
  this.splice(Math.min(index, this.length), 0, ...items);
  return this; // High five! You can chain now!
};

let chainableArray = [];
chainableArray.insert(0, 'Hello').insert(1, 'world!'); // Inserting two words, zero hassle!


Using spread operator (Butter on toast)

Entering a lot of elements? The spread operator to the rescue:

let largeArray = new Array(1000).fill(0);
largeArray.insert(500, ...new Array(100).fill('Data')); // Massive data dump– we're gonna need a bigger server!


Performance and principle of least surprise

Keeping the index safe (Guard on duty!)

You can prevent out-of-bounds issues by using this safe method:

const safeInsert = (arr, index, ...items) => {
  const safeIndex = Math.min(index, arr.length); //Safety first!
  return [...arr.slice(0, safeIndex), ...items, ...arr.slice(safeIndex)];
};


Mindful of memory and performance (Budget constraints)

Directly using splice is more memory-friendly than methods that create temporary arrays:

// Slightly extravagant
const newArray = [...arr.slice(0, index), newItem, ...arr.slice(index)];

// Budget-friendly  
arr.splice(index, 0, newItem); // Inserts without creating new array, minimal memory footprint.


Considerations and watch-outs

Sparse arrays

Beware of sparse arrays where the indices might not represent the actual layout. It's like expecting snakes but seeing ladders:

let sparseArray = [];
sparseArray[5] = 'Exists'; // This is not the element you're looking for!
sparseArray.insert(3, 'Inserted'); // Plot twist! There's a secret mission for 'Inserted'.


Compatibility guide for browsers (United Nations!)

While all modern browsers have brought their spread syntax and apply methods to the party, older browsers might feel left out. To ensure your code is universally accepted, verify support or use Babel to transcribe your modern code into something manageable by older browsers.