0% completed
Arrays in JavaScript are used to store multiple values in a single variable, providing an efficient way to group and manage data. They are particularly useful for storing lists of items, such as numbers, strings, or objects, where each item can be accessed and manipulated using an index.
Why to Use Arrays?
Arrays provide a way to store multiple items in a single variable, making it easier to collect, access, and manipulate data.
Example: Comparing Variables to an Array
Imagine we want to store a list of fruit names.
Without an array:
let fruit1 = "apple"; let fruit2 = "banana"; let fruit3 = "cherry";
fruit1
,fruit2
, andfruit3
are individual variables each storing a single fruit name.
With an array:
let fruits = ["apple", "banana", "cherry"];
fruits
is an array storing three fruit names.- Using an array allows us to group these items under a single name,
fruits
, making the data easier to handle.
Creating an Array
An array can be created by listing values within square brackets []
.
Example: Creating an Array with Three Colors
colors
is an array that stores strings:"red"
,"green"
, and"blue"
.- Each item in the array is separated by a comma.
- This method of creating an array is known as an array literal.
Accessing Array Elements
Elements in an array are accessed using their index
, a number representing their position in the array, starting from 0
.
Example: Accessing the First Color
colors[0]
accesses the first element in thecolors
array, which is"red"
.- The variable
firstColor
is then assigned the value of the first element of the array. - Indexes in JavaScript arrays start at
0
, not1
.
Changing an Array Element
You can modify any element in an array by accessing it through its index and assigning a new value.
Example: Changing the Last Color to "Purple"
colors[2]
accesses the third element (at index2
) in thecolors
array, which originally contained"blue"
.- Assigning
"purple"
to this position changes the third element of the array to"purple"
. - The array now holds
"red"
,"green"
, and"purple"
as its elements.
Looping Array Elements
Looping through an array allows you to access each element without directly referencing its index.
Example: Printing Each Color Using forEach
- The
forEach
method is used to iterate over each element in thecolors
array. - For each iteration, the
color
parameter represents the current element being processed in the array. - The function inside
forEach
is executed once for each array element, printing each color to the console.
Adding Array Elements
Adding elements to an array can be done in various ways, including using methods like push
for adding elements to the end of an array or unshift
for adding to the beginning.
Example: Adding Elements to an Array
Here's how you can add elements to the end and the beginning of an array.
numbers.push(4)
adds the number4
to the end of thenumbers
array.numbers.unshift(0)
adds the number0
to the beginning of the array.- The final array reflects the additions, showing
[0, 1, 2, 3, 4]
.
JavaScript new Array()
The new Array()
constructor creates a new array. You can specify either the length of the array or the elements themselves.
Example: Creating an Array with new Array()
new Array(5)
creates an array of length 5. The elements are not defined and thus areundefined
.new Array('a', 'b', 'c')
creates an array with the elements'a'
,'b'
, and'c'
.
When to Use Arrays Instead of Objects
Arrays are best used when the order of elements matters, or when you need to store a list of items where each item is accessed by its numerical index
.
Objects, on the other hand, are ideal for collections of items that are accessed by keys and where the order is not important.
Example: Choosing Between an Array and an Object
Consider you're storing a list of fruits in order.
let fruits = ["Apple", "Banana", "Cherry"]; // Array
If you need to store additional details about each fruit, an object might be more suitable.
let fruitDetails = { apple: { color: "red", taste: "sweet" }, banana: { color: "yellow", taste: "sweet" }, cherry: { color: "red", taste: "tart" } }; // Object
- An array,
fruits
, is used to maintain a simple ordered list of fruit names. - An object,
fruitDetails
, associates each fruit with its properties, like color and taste, which is more structured and descriptive compared to an array.
.....
.....
.....
Table of Contents
Contents are not accessible
Contents are not accessible
Contents are not accessible
Contents are not accessible
Contents are not accessible