JavaScript Arrays

If you need to create 3 tasks in a program, you have to initialize 3 variables separately. It would look like:

let task1 = "writing"
let task2 = "reading"
let task3 = "working out"

Now if there are a large number of tasks ( let’s say 100 or 1000) the code will look messy and unreadable if we do like this. And also accessing a particular element will be very difficult. To solve this problem we need to use the data structure ARRAY.

1. What arrays are and why we need them?

Arrays are a collection of values stored in a single variable.

Example:

const subject= ["English", "Bio", "Math"];

Here subject→ array name & "English", "Math" etc → elements of the array

Key Idea: Array stores multiple values in order.

---

2. Why do we need Array?

Without array we need to declare each element separately. It is not possible when the number of elements are a lot.

let sub1="English";
let sub2="Bio";
let sub3="Math";
let sub4="Physics";

With the help of array, it can be written in a single line of code.

const subject= ["English", "Bio", "Math", "Physics"];

Using the array the code becomes :

• cleaner

• easy to manage effectively

• easier to access or modify or delete a particular elements

---

3. How to Create an Array?

There are multiple ways to create an array. Here I am discussing some of the ways.

Note: It is very common practice to declare arrays with the const keyword.

Way 1: Declaring within the square bracket.

const subject= ["English", "Bio", "Math", "Physics"];

Way 2: Create an empty array and provide elements later.

const subject=[];

subject[0]="English";
subject[1]="Bio";
subject[2]="Math";
subject[3]="Physics";

Way 3: Declare using the new keyword.

const subject= new Array("English", "Bio", "Math", "Physics");

Output of Way 1,2,3( Same Outputs ):

console.log(subject);

// English Bio Math Physics

---

4. Accessing Elements using Index.

In an array, elements are accessed by its position, i.e. Index.

Note: Array indexing starts from 0.

const subject= ["English", "Bio", "Math", "Physics"];

console.log(subject[1]); // Bio

---

5. Updating Array Elements using Index.

NOTE: Arrays are mutable, i.e. values can be changed.

const subject= ["English", "Bio", "Math", "Physics"];

console.log(subject);  //[ 'English', 'Bio', 'Math', 'Physics' ]

subject[1]="Chemistry";
console.log(subject);  //[ 'English', 'Chemistry', 'Math', 'Physics' ]

---

6. Array Length Property.

The length property helps to know how many elements are there in the array.

const subject= ["English", "Bio", "Math", "Physics"];
console.log(subject.length); //4

NOTE: As in case of array indexing is 0 based, so

last element = subject[subject.length-1]

---

7. Looping Through the Array.

If we need to access all the elements in the array, to print or to do. Operations we use for loop mostly. Many other loops like - for of loops, while loop, do while loop, etc is also used to loop through a array in JS.

const subject= ["English", "Bio", "Math", "Physics"];

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

//Output
//---------------
//English
// Bio
// Math 
// Physics

here i starts from 1st element( 0th index) & Stops at last index and each. And after each traversal i increases by 1.

Quick Revision Section (Very Important)

Array Definition

Array = collection of values stored in order

Key Points

Concept	Important Rule
Index starts	0
Access element	array[index]
Update element	array[index] = value
Total elements	array.length
Loop	for loop