When we start learning programming, we usually store values in variables.
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
This works fine for a few values.
But what if we need to store 20 fruits? 100 student marks? 1000 tasks?
Creating separate variables for each value becomes messy and hard to manage.
This is where arrays help us.
What is an Array?
An array is a collection of data elements that can be of the same or different types. In an array, the individual elements of data are referred to as elements.
Example:
let fruits = ["Apple", "Banana", "Mango"];
Why Do We Need Arrays?
Arrays help us when we want to store multiple values together.
Common examples:
List of fruits
Student marks
Shopping list
Tasks in a to-do list
Comments on a post
Example:
let marks = [78, 85, 92, 67, 88];
Instead of 5 variables, we store everything in one array.
How to Create an Array
In JavaScript, arrays can be created using multiple ways:
- square brackets
[] (beginner-friendly)
Example:
let fruits = ["Apple", "Banana", "Mango"];
let numbers = [10, 20, 30, 40];
let data = ["Ashish", 22, true];
- Using the
Array Constructor. You can also use the new Array() constructor.
const emptyArrayConstructor = new Array();
- Array with initial values
const fruitsConstructor = new Array("apple", "banana", "cherry");
- Array with a specified length: If a single number is passed, it creates an array with that number of empty slots, not a single-element array.
const newArray = new Array(3);
// Creates an array with 3 empty slots, not [3]
// But accessing newArray[0] gives undefined.
Array.of(): The Array.of() static method creates a new Array instance from a variable number of arguments, regardless of the number or type of the arguments.
const singleNumberArray = Array.of(8); // Creates [8]
const multipleElementsArray = Array.of(1, 2, 3); // Creates [1, 2, 3]
Array.from(): The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.
// Create an array from a string
const fromString = Array.from("word"); // Creates ["w", "o", "r", "d"]
// Create an array with sequential numbers
const range = Array.from({ length: 5 }, (v, i) => i); // Creates [0, 1, 2, 3, 4]
Understanding Array Index
Every element in an array has a position number called an index.
Array indexing starts from 0.
Example:
const arr = ['Apple', 'Banana', 'Mango'];
Index: 0 1 2
----------------------
Array: Apple Banana Mango
Accessing Array Elements
If we want a specific element of an array we can access it by its index using square brackets.
Example:
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango
So,
fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element
Updating Array Elements
We can use the index of the element to update the array.
Example:
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits); // ["Apple", "Orange", "Mango"]
In this case we replaced Banana with Orange.
Array Length Property
Every array has a built-in property called length. This property tells us how many elements there are inside of the array.
Example:
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length); // 3
Looping Through an Array
If we don't want to manually print each element, we can use a loop.
Example:
let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:
// Apple
// Banana
// Mango
Explanation:
This allows us to easily work with arrays of any size.
Visualizing an Array
You can think of an array like boxes placed next to each other.
Index → 0 1 2
----------------------
Value → Apple Banana Mango
Or like memory blocks:
[0] → Apple
[1] → Banana
[2] → Mango
Each box has:
a position (index)
a value
Assignment
Try solving the following exercises:
Define an array of 5 of your favourite movies
Print the first and the last movies
Update the second movie in the array and print the array
Use a for loop to print all the movies
Final Thoughts
Arrays are one of the most important data structures in JavaScript.
They allow us to:
store a collection of data
access that collection using an index
alter that collection
Easily iterate through that collection
After learning the basics, you can learn to use the various array methods. Learning the basics will help you understand the array methods more easily. Master the basics first, and your future learning will be easier!
Follow the JS series to learn more about Javascript.
