JavaScript Arrays: Insertion, Deletion, and Other Key Concepts
1. Array Insertion in JavaScript
In JavaScript, arrays are dynamic, which means you can insert elements at any index
using different methods. An array is a collection of elements, often of the same type,
stored in a single variable. In JavaScript, arrays are ordered and can hold elements of
any type, including numbers, strings, objects, or other arrays.
Here are the main ways to insert elements into an array:
a) Using push()
Description: Adds an element to the end of the array.
Syntax: [Link](element)
Example:
let fruits = ['apple', 'banana'];
[Link]('orange'); // Adds 'orange' at the end
[Link](fruits); // ["apple", "banana", "orange"]
b) Using unshift()
Description: Adds one or more elements to the beginning of the array.
Syntax: [Link](element)
Example:
let fruits = ['apple', 'banana'];
[Link]('mango'); // Adds 'mango' at the start
[Link](fruits); // ["mango", "apple", "banana"]
c) Using splice()
Description: Adds/removes elements from any position in the array.
Syntax: [Link](index, 0, element)
o index: The position to insert the new element.
o 0: Number of elements to remove (0 in this case means no deletion).
o element: The element to add at the specified index.
Example:
let fruits = ['apple', 'banana'];
[Link](1, 0, 'orange'); // Inserts 'orange' at index 1
[Link](fruits); // ["apple", "orange", "banana"]
2. Array Deletion in JavaScript
Just like insertion, deletion in JavaScript arrays can be achieved through different
methods.
a) Using pop()
Description: Removes the last element of the array.
Syntax: [Link]()
Example:
let fruits = ['apple', 'banana', 'orange'];
[Link](); // Removes 'orange'
[Link](fruits); // ["apple", "banana"]
b) Using shift()
Description: Removes the first element of the array.
Syntax: [Link]()
Example:
let fruits = ['apple', 'banana', 'orange'];
[Link](); // Removes 'apple'
[Link](fruits); // ["banana", "orange"]
c) Using splice()
Description: Can also be used for removal of elements from any position in the
array.
Syntax: [Link](index, numberOfItemsToRemove)
o index: The index from where the deletion will start.
o numberOfItemsToRemove: The number of elements to remove from the
array.
Example:
let fruits = ['apple', 'banana', 'orange'];
[Link](1, 1); // Removes 1 element starting at index 1
[Link](fruits); // ["apple", "orange"]
3. Array Length in JavaScript
The length property is used to determine the number of elements in an array.
Description: The length property returns the number of elements in the array. It
is automatically updated when elements are added or removed.
Syntax: [Link]
Example:
let fruits = ['apple', 'banana', 'orange'];
[Link]([Link]); // 3
[Link]('mango');
[Link]([Link]); // 4
[Link]();
[Link]([Link]); // 3
Note: The length property always reflects the highest index + 1, even if there are empty
slots in the array.
4. Sparse Arrays
Description: An array is called "sparse" when it has empty slots between
elements. This happens when elements are deleted or when you explicitly set an
array slot to undefined or leave it uninitialized.
Example:
let fruits = ['apple', , 'banana'];
[Link]([Link]); // 3
[Link](fruits); // ["apple", <1 empty slot>, "banana"]
let sparse = [1, , , 4]; // Undefined slots
In the example above, there's an empty slot between 'apple' and 'banana'. These empty
slots are not undefined, but rather uninitialized elements.
How sparse arrays affect performance:
Sparse arrays can negatively affect performance because JavaScript engines
optimize dense arrays differently than sparse ones.
The length of a sparse array still counts the empty slots.
5. Multidimensional Arrays
A multidimensional array is an array of arrays, where each element of the main array
is itself an array.
a) Creating Multidimensional Arrays
You can create an array of arrays using nested square brackets.
Example:
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
[Link](matrix[0][1]); // 2 (first row, second column)
b) Accessing Multidimensional Array Elements
You access elements by providing multiple indices: the first for the main array,
the second for the sub-array, and so on.
[Link](matrix[2][0]); // 7 (third row, first column)
c) Manipulating Multidimensional Arrays
You can use all array methods (like push, splice, etc.) with multidimensional
arrays to modify them.
Example:
let matrix = [
[1, 2],
[3, 4]
];
matrix[1].push(5); // Adds '5' to the second sub-array
[Link](matrix); // [[1, 2], [3, 4, 5]]