JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.
In this article, we’ll look at ways to define and use arrays.
Array Literals
Array literals are the easiest way to define arrays.
We can create one by writing:
const arr = ['foo', 'bar', 'baz'];
Then we can access the content its index:
arr[1]
That’ll return 'bar' since the index of the first entry is 0.
Arrays also has the length property to check the size of an array.
We can write:
arr.length
to get the length of arr , which would be 3.
Object literals with numeric keys are similar to arrays, but we can’t iterate through an object that has numeric keys and the length property.
JavaScript array entries don’t have to be the same type, so we can write:
const arr = ['foo', 1, 'baz'];
And that is a valid array.
Length
Arrays have the length property. JavaScript arrays don’t use length as an upper bound.
We can access any index of an array as long as it’s a non-negative integer.
However, if the array index isn’t associated with any entry, then we get undefined .
We can set the length property explicitly.
Making the length larger doesn’t allocate more space for the array.
However, making the length smaller will cause properties with an index greater than or equal to the next length will be deleted.
Because we can access any index, we can add a new element to an array by writing:
arr[arr.length] = 'baz';
2 other convenient ways to add items to the end of the array are either to use the push method or the spread operator.
To use the push method, we write:
arr.push('baz');
push adds an entry to arr in place.
To use the spread operator, we can write:
arr = [...arr, 'baz'];
arr is spread into a new array and then we add 'baz' to the end of it and then assign it back to arr .
Delete
Since JavaScript arrays are objects, we can use the delete operator to remove an element with the given index.
For instance, we can write:
delete arr[2];
to remove 'baz' from the arr given that arr is:
const arr = ['foo', 1, 'baz'];
However, that will leave a hole in the array.
What we want to do usually to remove the item along with the slot.
We can make this easy by using the splice method.
To remove an array item with the splice method we can write:
arr.splice(1, 1);
The code above will remove one entry from starting from index 1.
Therefore, the only item with index 1 is removed.
splice removed the item in place, so that we remove the item from arr without leaving an empty slot.
Enumeration
We can use the for-in loop to loop through array entries since we can loop through the array indexes as we do with keys.
However, since the order isn’t guaranteed, we can’t use this to loop through the items reliably.
Also, for-in loops through the items in the array’s prototype, which we probably don’t want.
Therefore, it’s not good for looping through arrays.
Instead, we can use the for loop or for-of loop to loop through the items.
For instance, we can write:
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
We initialize i to the starring index and we loop through the array’s length minus 1.
To use the for-of loop, we write:
for (const a of arr) {
console.log(arr);
}
They’re both very convenient choices.
Conclusion
We can create arrays and loop through them easily.
The most convenient way to create an array is to use the array literal notation.
JavaScript array can have any kind of content in it.
To add items to an array, we can use the push method or the spread operator.
To remove an item, we can use the splice method.
To loop through arrays, we can use the for loop or the for-of loop.
They’re both better than the for-in loop for looping through arrays.
