Array

In Javascript, you can create variables to store values like strings and numbers. However, if you need to store many values, creating separate variables for each value could be inconvenient. For instance, if you have to keep the marks of 60 students, you would need to create 60 different variables. But what if each student takes five subjects? In that case, you would need to create 300 variables to store all the other marks, which could be tedious.

As you can imagine, creating all these variables would be a very frustrating and time-consuming experience. Also, debugging any problems would require a lot of effort.

In this topic, you will learn about arrays, which can be used to solve this issue.

What is an array?

Arrays are used to store multiple elements in a single variable. They are a special type of object in JavaScript. The typeof operator in JavaScript returns object for Arrays.

To resolve the issue described in the introduction, we can create an Array of marks for each student to store in a single variable.

Next, let's see how to declare Arrays.

How to declare an array?

In JavaScript, there are two ways to declare an Array:

let marks = new Array(); // Method 1

let marks = []; // Method 2

Method 2 is preferred over Method 1. Now, let's look at how the initializing arrays differs when using these two methods.

Initialization of arrays

If an array is declared using Method 2, it can be initialized in the following way:

// Method 2

// Declaring and initializing the Array at the same time.

let marksOne = [45, 50, 44, 30, 29] // Only integers

let marksTwo = ["forty-five", "fifty", 44, 30, "twenty-nine"] // Strings and integers

Note that a single Array can contain elements of different data types.

Next, let's see how to initialize Arrays using Method 1:

// Method 1

// Declaring and initializing the Array at the same time.

let marksOne = new Array(45, 50, 44, 30, 29); // Creates an array of marks with five elements

let marksTwo = new Array(5); // Creates an array of five undefined elements 

let marksThree = new Array("45"); // Creates an array containing one string element, which is "45"

As you can see, marksOne is an array of five integers, and marksTwo is an array of five undefined elements. This syntax can be confusing, so it's best not to use Method 1 when working with numbers. Fortunately, as shown, the same problem doesn't apply to strings — marksThree is an Array containing the "45" string.

If you declare an Array of undefined elements like this:

let marks = new Array(5);

You can initialize them one by one:

marks[0] = "forty-five";
marks[1] = "fifty";
marks[2] = 44;
marks[3] = 30;
marks[4] = "twenty-nine";

Index positions

You might be wondering about the numbers in brackets used after the variable name in the above example: marks[0], marks[1], etc. This is the syntax for accessing or assigning values to the individual elements in an array using index positions.

Array indexes start from 0, so we can use the index numbers shown in the example to access the first five elements. Attempting to access an element with an index beyond the bounds of an Array will return undefined. The same will happen if you try to access an element within an Array's bounds that hasn't been initialized. Let's look at an example to help illustrate this point:

let marks = [45, 50, 44, 30, 29];
marks[10] = 65;
console.log(marks);

The output of the above code is:

We get this output because 65 was assigned to the index position 10, which is greater than the initial size of the array. So, array indexes 5, 6, 7, 8, and 9 remain empty as they haven't been initialized and will return undefined if you attempt to access them.

Array length

The length property returns the number of elements that it contains, as shown in the below example:

const languages = ["C", "C++", "Python", "Java", "JavaScript"];

let len = languages.length; // 5

Let's look at another example:

const colors = ['orange', 'blue', 'red', 'pink', 'magenta'];

This array has five elements. You already know that you can access the first one using colors[0], the second with colors[1], and so on. What if you want to get the array's last element but don't know its length? You can use the length property in this situation, as you can see below:

const lastItem = colors[colors.length - 1]; // "magenta"

isArray()

The isArray() method returns true if an object is an array; otherwise false.

The full syntax is Array.isArray(obj) .

The below examples show how to use this method:

let marks = [45, 50, 44, 30, 29];

Array.isArray(marks); // true

let marksOne = "45";

Array.isArray(marksOne); // false

Conclusion

In conclusion, arrays are a powerful tool in JavaScript that allows us to store multiple elements in a single variable. They are a special object in JavaScript and can be initialized using two methods. The second method is preferred due to its simplicity and readability. The index positions are used to access or assign values to the individual elements in an array. We also learned about the array length property, which returns the number of elements in an array. Additionally, we saw how to check whether an object is an array or not using the isArray() method. By using arrays, you can simplify your code and make it more efficient.