JavaScript Arrays 101

Arrays are considered non-primitive in JavaScript. The data type of arrays in JavaScript is Object. In JavaScript, objects are counted as non-primitive data types. Non-primitive data types are slightly more complex because they can store multiple values or combinations of primitive data types. Arrays fall into this category because they can store multiple values inside them.

Arrays are represented using square brackets []. Whatever is present inside these brackets is called an element, and the elements are separated by commas. These elements can be of any data type. They can be primitive values like numbers and strings, or they can also be non-primitive values like objects or even other arrays.

The elements are separated by commas. To access or work with elements inside an array, JavaScript provides multiple inbuilt methods such as .filter(), .sort(), .map() etc. These methods help in iterating over arrays and returning elements based on our requirement. Depending on the use case, we decide which method to apply.

In simple terms, an array is a collection of values stored in a particular order. Because the values are stored in order, each element gets a position number. This position is called the index.

Indexing in arrays starts from 0.

So the first element has index 0, the second element has index 1, and it continues in the same manner. If an array has n elements, then the last element will have the index (n-1).

The last element has index n-1 and not n because indexing starts from 0 and not from 1.

How to create an array

Now comes the question of how to create an array. There are multiple ways to create arrays in JavaScript. We will look at some of the most commonly used ones.

1.First method

The first way is to initialize a variable with empty square brackets.

let books = [];

This creates an empty array named books.

NOTE:

1. Why arrays are needed

Example:-

Instead of:

let book1 = "Maths"
let book2 = "Physics"
let book3 = "Chemistry"

We use:

let books = ["Maths", "Physics", "Chemistry"]

2. Accessing array elements using index

Example:

let books = ["Maths", "Physics", "Chemistry"];

console.log(books[0]); // first element ie "Maths"
console.log(books[2]); // third element ie "Physics"

2. Second method

Another way is to directly add elements inside the square brackets, separated by commas.

Example:

let books = ["Maths", "Physics", "Chemistry"];

This creates an array with three elements.

3. Third method

If we want to create an array with a fixed number of empty slots, we can use the Array() constructor.

Example:

let books = Array(3);

This creates an array with a length of 3. Now what this means is that our array will be containing three elements separated by commas. So this way It creates an array with length 3 but no defined values yet.

Another method that is useful for creating an array is Array.of().

What it basically does is create a new array. The important thing to keep in mind is that we need to provide the elements directly inside the argument of Array.of(). In other words, the method will create the array, but the actual elements must be passed as arguments to Array.of().

Example

let books = Array.of("Maths", "Physics", "Chemistry");

console.log(books);

Output:

["Maths", "Physics", "Chemistry"]

In this example, the elements "Maths", "Physics" and "Chemistry" are passed as arguments to Array.of(), and the method creates an array containing these values.

Second method is Array.from() , this is also one way to crete an Array, like if we want to create
the array containing charachters of a particular string, we would be using this method. see the example below to understand

const myString = "hello";
const stringArray = Array.from(myString);

console.log(stringArray);
// Output: ['h', 'e', 'l', 'l', 'o']

Updating elements in an array

In order to update elements in an array, there are multiple ways depending on the use case.

For example, if we want to remove a particular element from an array, we can use the splice() method. How splice() is used depends on the situation and the index we want to modify.

If we want to add or change a value at a particular index, we can directly assign a new value to that index.

let books = ["Biology", "Economics", "History"]

//Now we want to update the books array by removing the last two elements of the array and add the element "English" into the array.

//We use  .splice(index of the element you want to delete , number of elements to be deleted, new element in quotes.

//splice(startIndex, numberOfElementsToDelete, newElement)

books.splice(1, 2, "English")

Output:

books = ["Biology", "English"];

Refer to the Excalidraw diagram below to understand this visually.

Now we will see the use of splice method to not only remove an element but to also add
an element in place of the removed one ie how it swaps. Look at the excalidraw image below:

What we did above is that we replaced the element having "Physics" as string with "Economics". So splice() method can not only delete but also add elements simultaneously
in the array and hence modifies the array in this manner.

Array length property

If we want to know how many elements are present in an array, we use the length property.

arrayName.length

Example:

let books = ["Maths", "Physics", "Chemistry"]

books.length gives us 3 as output, since we are having 3 elements in the Array.

This returns the total number of elements in the array.

Looping over an array

If we want to go through all elements of an array one by one, we use loops. There are multiple ways to do this depending on the situation.

One common way is using a for loop.

Example:

for(let i = 0; i < books.length; i++){
    console.log(books[i]);
}

This loop runs through the array and prints each element one by one.

Another way is using a for...of loop.

Example:

for(let book of books){
    console.log(book);
}

This directly gives us the elements of the array while looping.

NOTE: We dont use for..in loop in Arrays generally bcz it is more apt to be used for iterating over Objects, and we tend to not use them in Arrays. However, Arrays are also Objects and hence for..in loop also works for Arrays.
Here is the code for it :-
Example:

let books = ["Biology", "Economics", "History"];

for (let index in books) {
    console.log(books[index]); // prints the value
}

So this is all you need to know related to Arrays in Javascript. Hope it helps!