JavaScript Arrays 101

An array is not a unique feature of JavaScript; almost every programming language supports arrays. An array is a data type that allows us to store multiple values inside a single variable. In simple terms, it helps us group and manage multiple pieces of data together in an organized way.

What arrays are and why we need them

An array is a data type in JavaScript, just like number or string. But instead of storing only one value, an array acts like a container that can hold multiple values inside a single variable.

The values stored inside an array are called elements.

In JavaScript, we can add new elements to an array or remove existing ones after creating it. This makes arrays flexible and very useful when working with lists of data.

JavaScript arrays are not associative like objects. That means we cannot access elements using names or keys. Instead, each element has a numeric position called an index, and indexing starts from 0. To access an element, we use its index number.

How to create an array

Before learning array methods, we first need to understand the basic syntax for creating an array.

Since an array is a data type, we must store it inside a variable.

To create an array:

1. Create a variable.

2. Use square brackets [].

3. Place the elements inside the brackets, separated by commas.

Example:

let fruits = ["Apple", "Banana", "Mango"];

• fruits is the variable.

• ["Apple", "Banana", "Mango"] is the array.

• Each value inside the brackets is called an element.

Printing the Array

To print the entire array, we use console.log() and pass the variable name:

console.log(fruits);

If you want to print a specific element, you must use its index number. The first element always has an index 0 , the second has an index 1.

Example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); //output - Apple

Here "Apple" is an element0 is its index

Accessing Elements Using Index

After creating an array, the next step is learning how to access its values.

Each value inside an array has a position called an index. In JavaScript, indexing always starts from 0. That means the first element is at index 0, the second is at index 1, and the third is at index 2.

For example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana

If you try to access an index that does not exist, JavaScript will return undefined.

Updating Elements

Arrays are flexible, which means we can change their values whenever we want.

To update an element, we use its index and assign a new value to it.

Example:

let fruits = ["Apple", "Banana", "Mango"];

fruits[1] = "Orange";

console.log(fruits);

Here, "Banana" is replaced with "Orange". The value at index 1 is changed.

Array Length Property

Every array has a built-in property called length. This tells us how many elements are inside the array.

Example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.length); // 3

If the length is 3, the last index will be 2 because indexing starts from 0. The last position is always length minus 1.

Looping Through an Array

When working with arrays, we often need to access all elements one by one. Instead of writing multiple console.log statements, we use a loop.

The most basic way is to use a for loop.

let fruits = ["Apple", "Banana", "Mango"];

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

The loop starts from index 0 and continues until it reaches the length of the array. It prints each element one by one.

Conclusion

Arrays allow us to store multiple values inside a single variable in an organized way. We can access elements using index numbers, update them when needed, check the total number of elements using the length property, and use loops to work with all elements easily.

Understanding arrays clearly is very important because they are used everywhere in JavaScript.