Common Array Operations
Explore fundamental array operations in JavaScript such as reading, inserting, updating, and deleting elements. Learn how these operations work, understand the associated time and space complexities, and gain practical skills for efficient array manipulation in real-world problems.
We'll cover the following...
Before writing any algorithm, we need to know what we can actually do with an array. Arrays support a small, fixed set of operations. Each one is simple to learn, but together they cover almost everything we will ever need: reading values, adding new ones, changing them, removing old ones, and scanning through the entire collection.
In this lesson, we will go through each operation one by one.
Access (Read an element)
The most basic thing you can do with an array is read a value stored in it. This is called accessing an element. Think of it like looking up a specific game on our scorecard.
Syntax:
To access an element, we write the array name followed by the index of the element we want to access in square brackets:
Example: Consider the following scores array: [88, 95, 70, 82, 91]. If we want to access the score of game 3, we will use scores[2], which will give us 70.
JavaScript implementation:
The following code shows how to access the score at index 2 from the scores array:
Note: Trying to access an index that does not exist, for example, scores[10] in a five-element array, will raise an error.
Insertion (Add an element)
Insertion means adding a new element to the array. When you insert an element, the array grows by one. However, not all insertions are equal. The cost of insertion depends on where the new element goes in the array.
Insert at the end
Adding an element to the end of the array is the simplest kind of insertion. Because the new element goes into the next empty slot at the end, nothing else in the array needs to move. Think of it like adding a new element to the end of our scorecard and writing the score in.
Syntax:
To append an element to the end, we use the following syntax:
Example: Consider a scores array [88, 95, 70, 82]. A fifth game has been played, and the score 91 needs to be recorded. The visualization below shows how a new element is added to the end of the array:
JavaScript implementation:
The following code adds a new score 91 to the end of the scores array:
The scorecard originally had four games: [88, 95, 70, 82]. A fifth game was played, and the score 91 needs to be recorded. Appending it adds the new score to the end of the scorecard, giving [88, 95, 70, 82, 91]. The four previously recorded scores remain exactly where they were.
Insert in the middle or beginning (requires shifting)
If we want to insert an element somewhere other than the end, the computer first needs to create a gap at the correct position. To do that, it shifts every element from the insertion point onward one position to the right, and then places the new value into the freed-up slot. This is similar to squeezing a new row into the middle of our scorecard and pushing everything below it down.
Syntax:
In JavaScript, to insert an element at a specific position in an array, we commonly use the splice() method. The first argument specifies the index where the insertion should happen, the second argument specifies how many elements to remove (0 for pure insertion), and the third argument is the value to insert.
Example: ...