JavaScript Arrays 101
When we write programs we often need to store multiple values.
For example imagine storing movie names.
let movieOne = "Inception"
let movieTwo = "Interstellar"
let movieThree = "Dune: Part Two"
This works for small data, but what if we need to store 50 movies or 100 student marks? Creating variables for each value would become messy.
This is where arrays help us.
Arrays allow us to store multiple values in a single memory reference and access them easily.
What Arrays Are
Arrays are non primitive values and are a special type of object in JavaScript.
Arrays allow us to store multiple values inside a single variable.
These values can be numbers, strings, objects or even other arrays.
How to Create an Array
There are many ways to create arrays in JavaScript.
Simple way
The most common way is using square brackets.
[1, 2, 3, 4, 5]
Just write values between [] and your array is ready.
Example:
const numbers = [1, 2, 3, 4, 5]
Array constructor
Array(6)
This creates:
[ <6 empty items> ]
This creates an array with 6 empty slots.
Array.of()
Array.of(9)
This creates:
[9]
It creates an array containing the provided values. You can also add multiple values separated by commas.
Example:
Array.of(1, 2, 3)
Array.from()
Array.from("six")
This creates:
["s","i","x"]
It converts iterable data into an array.
Here every character of the string becomes an element in the array.
Accessing Elements Using Index
Arrays are 0 based. That means indexing starts from 0.
Example array:
const movies = ["Inception", "Interstellar", "Shawshank Redemption", "Dune: Part Two", "Se7en"]
Indexes look like this:
0 1 2 3 4
To access individual values we use:
variableName[index]
Example:
console.log(movies[0]) // Inception
console.log(movies[1]) // Interstellar
console.log(movies[2]) // Shawshank Redemption
console.log(movies[3]) // Dune: Part Two
console.log(movies[4]) // Se7en
Updating Elements
We can easily update values inside an array by targeting the index.
Example:
movies[0] = "Forrest Gump"
Now print the array.
console.log(movies)
Output:
["Forrest Gump", "Interstellar", "Shawshank Redemption", "Dune: Part Two", "Se7en"]
So we accessed index 0 and updated its value.
Array Length Property
Counting small arrays is easy.
You can just count 1 to 5.
But imagine counting elements of a very large array. That would be difficult.
JavaScript gives us a built in property called length.
Let's use the same movie array because these are some of the best movies.
const movies = ["Inception", "Interstellar", "Shawshank Redemption", "Dune: Part Two", "Se7en"]
console.log(movies.length) // 5
Important thing:
Length and index are not the same.
Length tells how many values exist
Index tells position of each value
Basic Looping Over Arrays
Instead of accessing elements one by one, we can loop through the array.
Here I'm using a simple for loop to print every movie.
const movies = ["Inception", "Interstellar", "Shawshank Redemption", "Dune: Part Two", "Se7en"]
for(let i = 0; i < movies.length; i++){
console.log(movies[i])
}
Output:
Inception
Interstellar
Shawshank Redemption
Dune: Part Two
Se7en
This loop runs from index 0 to the last index and prints each value.
Arrays are one of the most commonly used data structures in JavaScript.
They help us store and manage multiple values easily.
