JavaScript Arrays 101
Introduction:
One of the most important data structures in JavaScript is the array, which is a collection of elements. In this blog post, we will explore the basics of JavaScript arrays and the various array methods that can be used to manipulate them.
An array in JavaScript is a collection of elements enclosed in square brackets. Elements can be of any data type, including numbers, strings, and other arrays. For example, the following is a valid array in JavaScript:
Instead of creating many variables:
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
We can store them in one place:
let fruits = ["Apple", "Banana", "Mango"];
So an array = collection of items.
In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics:
JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.)
JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes.
JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on - and the last element is at the value of the array's length property minus 1.
JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies).
1. Array Syntax
let arrayName = [item1, item2, item3];
Example:
let numbers = [10, 20, 30, 40];
Arrays can store any data type.
let mixed = ["Mohit", 22, true, null];
2. Accessing Array Elements
Each value has an index.
Index always starts from 0.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
Output:
Apple
Banana
Mango
=== Code Execution Successful ===
Understanding Basic Array Operations in JavaScript:
Arrays are one of the most important data structures in JavaScript. They allow developers to store multiple values inside a single variable and work with them efficiently. Instead of creating separate variables for each value, an array keeps all related values together in an ordered structure.
JavaScript arrays are zero-indexed, meaning the position of the first element starts from 0 instead of 1. Each value in the array can be accessed, modified, or processed using its index.
1. Accessing Elements Using Index:
Every element in an array has a specific position called an index. The index represents the location of the element in the array.
For example:
let fruits = ["apple", "banana", "mango", "orange"];
In this array:
| Index | Element |
|---|---|
| 0 | apple |
| 1 | banana |
| 2 | mango |
| 3 | orange |
To access any element, we use square bracket notation with the index.
Example:
console.log(fruits[0]);
console.log(fruits[2]);
This means the program will retrieve the element stored at that index. If we try to access an index that does not exist in the array, JavaScript returns undefined.
apple
mango
=== Code Execution Successful ===
Example:
console.log(fruits[10]);
Accessing elements using indexes is important when working with loops, conditions, and data processing.
Output:
undefined
=== Code Execution Successful ===
2. Updating Elements in an Array:
Arrays in JavaScript are mutable, which means their values can be changed after creation. Developers can update any element by assigning a new value to a specific index.
Example:
let fruits = ["apple", "banana", "mango"];
fruits[1] = "grapes";
console.log(fruits);
Output:
["apple", "grapes", "mango"]
=== Code Execution Successful ===
In this case, the value at index 1 was replaced with a new value. Updating elements is useful when modifying user data, updating lists, or managing application state.
However, if we assign a value to an index that does not exist yet, JavaScript will create empty slots between the elements.
Example:
let numbers = [1, 2, 3];
numbers[5] = 10;
console.log(numbers);
This will create an array with empty spaces between indexes.
Output:
[ 1, 2, 3, <2 empty items>, 10 ]
=== Code Execution Successful ===
3. Array Length Property:
The length property of an array returns the total number of elements present in the array. It is one of the most frequently used properties when working with arrays.
Example:
let numbers = [10, 20, 30, 40];
console.log(numbers.length);
Output:
4
=== Code Execution Successful ===
The length property is useful for:
Determining how many elements are in the array
Controlling loops
Finding the last element
Example of accessing the last element:
let numbers = [10, 20, 30, 40];
console.log(numbers[numbers.length - 1]);
Output:
40
=== Code Execution Successful ===
The reason we subtract 1 is because array indexing starts from 0.
Another important point is that the length property can also be modified manually.
Example:
let numbers = [1, 2, 3, 4];
numbers.length = 2;
console.log(numbers);
Output:
[1, 2]
=== Code Execution Successful ===
This truncates the array and removes extra elements.
4. Basic Looping Over Arrays:
Looping is a technique used to iterate through each element of an array automatically. It allows developers to perform operations on all elements without writing repetitive code.
One of the most common loops used with arrays is the for loop.
Example:
let fruits = ["apple", "banana", "mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Explanation:
The loop starts from index 0
It continues until the index is less than the array length
Each iteration prints the current element
Output:
apple
banana
mango
=== Code Execution Successful ===
Looping over arrays is extremely useful for tasks like:
Displaying lists of items
Processing data
Performing calculations
Transforming data
JavaScript also provides other methods for looping such as for...of, forEach, and map, which are commonly used in modern JavaScript development.
Example using for...of:
for (let fruit of fruits) {
console.log(fruit);
}
This is an cleaner and more readable way to iterate over array elements.
Compare storing values individually vs using an array:
1. Storing Values Individually:
In this approach, each value is stored in a separate variable.
Example:
let student1 = "Rahul";
let student2 = "Mohit";
let student3 = "Palak";
let student4 = "Aman";
console.log(student1);
console.log(student2);
console.log(student3);
console.log(student4);
Output:
Rahul
Mohit
Palak
Aman
=== Code Execution Successful ===
Problems with This Approach
Not scalable – If there are many values, you need many variables.
Hard to manage – Updating or processing values becomes difficult.
No easy looping – You cannot easily run loops over separate variables.
More code – It increases the amount of repetitive code.
For example, if you have 100 student names, you would need 100 variables, which is not practical.
2. Storing Values Using an Array:
An array allows us to store multiple values in a single variable.
Example:
let students = ["Rahul", "Mohit", "Palak", "Aman"];
console.log(students);
Now all values are stored inside one variable called students.
Accessing Values
console.log(students[0]);
console.log(students[2]);
Output:
Rahul
Palak
=== Code Execution Successful ===
Advantages of Using Arrays
1. Better Organization:
Arrays keep related data together in one structure.
2. Easy Access:
You can access elements using their index.
3. Easy Looping:
Arrays work perfectly with loops.
Create an array of 5 favorite movies:
For example:
let movies = ["Marco","Dhurandhar","Salaar","The Bull","Total Dhamaal"]
console.log(movies)
Output:
[ 'Marco', 'Dhurandhar', 'Salaar', 'The Bull', 'Total Dhamaal' ]
=== Code Execution Successful ===
Print the first and last element:
For example:
let movies = ["Marco","Dhurandhar","Salaar","The Bull","Total Dhamaal"]
console.log("First element:", movies[0]);
console.log("Last element:", movies[4]);
Output:
First element: Marco
Last element: Total Dhamaal
=== Code Execution Successful ===
Change one value and print updated array:
For example:
let movies = ["Marco","Dhurandhar","Salaar","The Bull","Total Dhamaal"]
console.log("Real array:", movies);
movies[2] = "Pushpa"
console.log("Update array:", movies);
Output:
Real array: [ 'Marco', 'Dhurandhar', 'Salaar', 'The Bull', 'Total Dhamaal' ]
Update array: [ 'Marco', 'Dhurandhar', 'Pushpa', 'The Bull', 'Total Dhamaal' ]
=== Code Execution Successful ===
Loop through the array and print all elements:
For example:
let movies = ["Marco","Dhurandhar","Salaar","The Bull","Total Dhamaal"];
for (let i = 0; i < movies.length; i++) {
console.log(movies[i]);
}
Output:
Marco
Dhurandhar
Salaar
The Bull
Total Dhamaal
=== Code Execution Successful ===
Conclusion:
JavaScript arrays are a fundamental part of the language and are widely used to store and manage multiple values in a single variable. Instead of creating many separate variables, arrays allow developers to organize related data in a structured and efficient way.
In this guide, we explored the basics of arrays, including how to create arrays, access elements using indexes, update values, use the length property, and loop through array elements. These concepts form the foundation for working with collections of data in JavaScript.
Understanding these basics is important because arrays are used in almost every real-world application—whether it’s storing user data, product lists, messages, or any group of related information. Once you are comfortable with these fundamentals, you can move on to more advanced array methods like map(), filter(), and reduce(), which make data manipulation even more powerful.
Mastering arrays will make your JavaScript code cleaner, more efficient, and easier to maintain, making them an essential skill for every web developer.
