Rakshambika

Posted on Sep 3

Arrays in JS

Rakshambika · 2026-09-03T13:30:00Z

What is Array? Array is a special type of object used to store multiple items under a single variable name. Example: Without an array: let fruit1 = " Apple " ; let fruit2 = " Mango " ; let fruit3 = " Pineapple " ; let fruit4 = " Guava " ; Enter fullscreen mode Exit fullscreen mode With an array: let fruits = [ " Apple " , " Mango " , " Pineapple " , " Guava " ]; Enter fullscreen mode Exit fullscreen mode Characteristics: Zero-indexed : The first element starts at index 0 . Dynamic size : Arrays can automatically grow or shrink . Heterogeneous : They can hold mixed data types (numbers, strings, objects, or other arrays). Mutable : Arrays are mutable. Creating a Array: The most common way to create an array is using array literals []. // Creating array const students = [ " Raksha " , " Rakshan " , " Ranjani " , " Varun " ]; console . log ( students ); Enter fullscreen mode Exit fullscreen mode [ 'Raksha', 'Rakshan', 'Ranjani', 'Varun' ] Enter fullscreen mode Exit fullscreen mode Accessing Array Elements : Elements in the array are accessed using their index. Index starts from 0. let fruits = [ " Apple " , " Mango " , " Pineapple " , " Guava " ]; console . log ( fruits [ 0 ]); console . log ( fruits [ 1 ]); console . log ( fruits [ 2 ]); console . log ( fruits [ 3 ]); Enter fullscreen mode Exit fullscreen mode Apple Mango Pineapple Guava Enter fullscreen mode Exit fullscreen mode Updating Array Elements: We can update an array element by accessing its index and assigning a new value to it. Example: let fruits = [ " Apple " , " Mango " , " Pineapple " , " Guava " ]; fruits [ 3 ] = " Banana " ; console . log ( fruits ); Enter fullscreen mode Exit fullscreen mode Output: [ 'Apple', 'Mango', 'Pineapple', 'Banana' ] Enter fullscreen mode Exit fullscreen mode Here, the fruits[3]="Guava" is changed to "Banana". Finding the Array Length: The length property returns the number of elements in the array. Example: let fruits = [ " Apple " , " Mango " , " Pineapple " , " Guava " ]; console . log ( fruits . length ); Enter fullscreen mode Exit fullscreen mode Output: 4 Enter fullscreen mode Exit fullscreen mode Arrays can store heterogeneous data: What is heterogeneous array? Heterogeneous data means storing different types of values in the same array. Example: let data = [ " Raksha " , 23 , true , 10.5 , null ]; console . log ( data ); Enter fullscreen mode Exit fullscreen mode Output: [ 'Raksha', 23, true, 10.5, null ] Enter fullscreen mode Exit fullscreen mode Here the array contains different data types: Value Data Type "Raksha" String 23 Number true Boolean 10.5 Number null Null Loop for Arrays: for Loop The traditional for loop is used when you want to access the index of each array element. Example: let fruits = [ " Apple " , " Mango " , " Pineapple " , " Guava " ]; for ( let i = 0 ; i < fruits . length ; i ++ ) { console . log ( fruits [ i ]); } Enter fullscreen mode Exit fullscreen mode Output: Apple Mango Pineapple Guava Enter fullscreen mode Exit fullscreen mode Adding Elements to an Array Without Functions: We can add an element to an array without using a function by assigning a value to an index that is equal to or greater than the current array length. Example: // Adding element without functions let zoo = [ " Lion " , " Tiger " , " Parrot " , " Peacock " , " Monkey " ]; console . log ( zoo ); zoo [ zoo . length ] = " King cobra " ; console . log ( zoo ); Enter fullscreen mode Exit fullscreen mode Output: [ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey' ] [ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey', 'King cobra' ] Enter fullscreen mode Exit fullscreen mode How does zoo[zoo.length] work? Initially: Index: 0 1 2 3 4 ↓ ↓ ↓ ↓ ↓ Value: Lion Tiger Parrot Peacock Monkey Enter fullscreen mode Exit fullscreen mode The array has 5 elements, so: zoo.length =5 Therefore: zoo[zoo.length] = "King cobra"; is equivalent to: zoo[5] = "King cobra"; Now: After adding "King cobra": Index: 0 1 2 3 4 5 ↓ ↓ ↓ ↓ ↓ ↓ Value: Lion Tiger Parrot Peacock Monkey King cobra Enter fullscreen mode Exit fullscreen mode

#webdev #frontend #javascript #array

What is Array?

Array is a special type of object used to store multiple items under a single variable name.

Example:

Without an array:

let fruit1 = "Apple";
let fruit2 = "Mango";
let fruit3 = "Pineapple";
let fruit4 = "Guava";

With an array:

let fruits=["Apple", "Mango", "Pineapple", "Guava"];

Characteristics:

Zero-indexed: The first element starts at index 0.
Dynamic size: Arrays can automatically grow or shrink.
Heterogeneous: They can hold mixed data types (numbers, strings, objects, or other arrays).
Mutable: Arrays are mutable.

Creating a Array:

The most common way to create an array is using array literals [].

// Creating array

const students=["Raksha" , "Rakshan" , "Ranjani" , "Varun"];
console.log(students);

[ 'Raksha', 'Rakshan', 'Ranjani', 'Varun' ]

Accessing Array Elements :

Elements in the array are accessed using their index.
Index starts from 0.

let fruits = ["Apple", "Mango", "Pineapple" , "Guava"];

console.log(fruits[0]); 
console.log(fruits[1]); 
console.log(fruits[2]); 
console.log(fruits[3]);

Apple
Mango
Pineapple
Guava

Updating Array Elements:

We can update an array element by accessing its index and assigning a new value to it.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];

fruits[3] = "Banana";

console.log(fruits);

Output:

[ 'Apple', 'Mango', 'Pineapple', 'Banana' ]

Here, the fruits[3]="Guava" is changed to "Banana".

Finding the Array Length:

The length property returns the number of elements in the array.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];
console.log(fruits.length);

Output:

Arrays can store heterogeneous data:

What is heterogeneous array?

Heterogeneous data means storing different types of values in the same array.

Example:

let data = ["Raksha", 23, true, 10.5, null];

console.log(data);

Output:

[ 'Raksha', 23, true, 10.5, null ]

Here the array contains different data types:

Value	Data Type
`"Raksha"`	String
`23`	Number
`true`	Boolean
`10.5`	Number
`null`	Null

Loop for Arrays:

for Loop

The traditional for loop is used when you want to access the index of each array element.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];

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

Output:

Apple
Mango
Pineapple
Guava

Adding Elements to an Array Without Functions:

We can add an element to an array without using a function by assigning a value to an index that is equal to or greater than the current array length.

Example:

// Adding element without functions

let zoo=["Lion" , "Tiger" , "Parrot" , "Peacock" , "Monkey"];
console.log(zoo);
zoo[zoo.length]="King cobra";
console.log(zoo);

Output:

[ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey' ]

[ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey', 'King cobra' ]

How does zoo[zoo.length] work?

Initially:

Index:    0        1        2         3         4
          ↓        ↓        ↓         ↓         ↓
Value:   Lion     Tiger    Parrot    Peacock   Monkey

The array has 5 elements, so: zoo.length =5

Therefore:

zoo[zoo.length] = "King cobra";

is equivalent to:

zoo[5] = "King cobra";

Now:

After adding "King cobra":

Index:    0        1        2         3         4          5
          ↓        ↓        ↓         ↓         ↓          ↓
Value:   Lion     Tiger    Parrot    Peacock   Monkey    King cobra

Top comments (2)

Jon Randy 🎖️ • Sep 4

The length property returns the number of elements in the array.

This is not really correct.

Jon Randy 🎖️

Aug 18

Array.length Is NOT What You Think It Is

#javascript #beginners #webdev

3 min read

Rakshambika • Sep 5

Thanks for the correction! You're right—length represents the number of slots in the array, which may differ from the actual number of elements in sparse arrays.