Arrays are extensions of objects that hold ordered collections of data. They have key-value pairs, but the keys are numeric indices. The values, on the other hand, can be of any data type. (TypeScript helps address some drawbacks when working with arrays.) Arrays include methods designed for managing ordered data and have a length property. Since arrays are specifically structured for ordered data, developers should use them accordingly. Additionally, arrays are objects, so they are copied by reference, not by value.
Syntax
let arr = new Array();
let arr = [];
Example:
let arr = ["apple", "banana", "peach",];
arr[0]; // "apple"
arr[3]; // undefined
arr.length; // 3
Using let arr = []; is preferred because it is shorter and less prone to bugs.
For example:
let arr = new Array(2); // will it create an array of [2] ?
alert( arr[0] ); // undefined! no elements.
alert( arr.length ); // length 2
The Modern JavaScript Tutorial
Pop, Push, Shift, Unshift
pop: Extracts the last element of the array and returns it
push: Appends an element to the end of the array
shift: Extracts the first element of the array and returns it
unshift: Appends an element to the beginning of the array
shift and unshift are slower than pop and push because each element is indexed, and all the indexes need to be renumbered.
Loops with Arrays
A for..loop works with arrays, and so does a for..of, as it iterates over the values of the array. While a for..in may seem to work because arrays are objects, it actually iterates over all enumerable properties, including non-index properties like length. Additionally, a for..in loop is not optimized for arrays and should be avoided.
Methods
Arrays have many methods we use daily, and not all of them are explained here. However, here are some notes for myself on concepts I often find confusing.
slice(start, end)
Returns a new array with items from start to end (exclusive). It does not modify the original array.
let arr = ["apple", "banana", "peach", "orange", "grapes"];
let arr2 = arr.slice(1, 3);
console.log(arr2); // ["banana", "peach"]
console.log(arr); // ["apple", "banana", "peach", "orange", "grapes"];
It can be used to duplicate the original array if start and end are not specified, which means all elements are included.
let arr = ["apple", "banana", "peach", "orange", "grapes"];
let arr3 = arr.slice();
console.log(arr3);
splice(pos, deleteCounts, ... items)
Used for removing, inserting, or replacing items in an array.
Remove: Removes the specified number of items (deleteCounts) starting from the given position
let arr = ["apple", "banana", "peach", "orange", "grapes"];
arr.splice(2, 2);
console.log(arr); // ["apple", "banana", "grapes"];
Return: Returns the removed items
let arr = ["apple", "banana", "peach", "orange", "grapes"];
let removedItems = arr.splice(2, 2);
console.log(removedItems); // ["peach", "orange"];
Insert: Adds new items (...items) at the given position without deleting
let arr = ["apple", "banana", "peach", "orange", "grapes"];
arr.splice(1, 0, "strawberry");
console.log(arr); // ["apple", "strawberry", "banana", "peach", "orange", "grapes"];
Replace: Removes and inserts simultaneously
let arr = ["apple", "banana", "peach", "orange", "grapes"];
arr.splice(1, 2, "strawberry", "mango");
console.log(arr); // ["apple", "strawberry", "mango", "orange", "grapes"];
split(delimiter) and join(glue)
split: Splits a string into an array based on the given delimiter
join: Joins an array into a string, separated by glue
let str = "apple, banana, peach";
let arr = str.split(", ");
console.log(arr); // ["apple", "banana", "peach"];
let arr = ["apple", "banana", "peach"];
let str = arr.join("; ");
console.log(str); // "apple; banana; peach"
When I first learned about arrays and how to access their elements, I learned arr[1] as it is. After gaining a deeper understanding of objects, I realized that square brackets must be used because the index is a number! Dot notation can't be used. As I continue learning, I discover how everything is connected and why it works this way. It's fun.
Top comments (0)