JavaScript Arrays — PBA Institute Tutorial
Chapter 05 · JavaScript Programming Series
12 min read Beginner

JavaScript Arrays

Arrays are ordered lists used to store many values in one variable. JavaScript arrays can hold numbers, strings, objects — even other arrays — and come with a rich set of built-in methods.

What is an Array?

An array is a single variable that stores multiple values. Each value has an index starting from 0. Arrays are perfect for lists like students, products, marks, messages, or any group of related items.

Why Use Arrays?

📦

Store Many Values

Keep dozens or thousands of items in one variable.

🔢

Indexed Access

Get any item instantly using its index.

🔁

Easy Iteration

Loop through items using for, for-of, forEach.

🧰

Built-In Methods

push, pop, map, filter, reduce, sort and many more.

🧩

Mixed Types

Arrays can hold numbers, strings, objects together.

📚

Foundation

Arrays are the base for tables, 2D grids, and lists in apps.

Basic Features

  • Arrays are zero-indexed: first item is at index 0.
  • array.length gives the total number of items.
  • Arrays are objects in JavaScript, so they can hold any type of value.
  • Methods like push, pop, shift, unshift change the original array.

Arrays in JavaScript

Arrays in JavaScript are used to store multiple values inside a single variable. Arrays help developers organize, process, and manipulate data efficiently.

What is an Array ?

An array is a special variable that stores multiple values in sequential order using indexes.

  • Arrays can store numbers, strings, objects, and more.
  • Array index always starts from 0.
  • Arrays are dynamically sized in JavaScript.
  • JavaScript arrays support many built-in methods.

Array Syntax

Array Declaration
// Literal
let nums = [10,20,30,40];

// Constructor
let names =
new Array(
"Riya",
"Ravi",
"Sam"
);

// Access
nums[0];

// Update
nums[1] = 99;

// Length
nums.length;

Important Array Methods

Method Purpose Example
push() Add to end a.push(5)
pop() Remove from end a.pop()
shift() Remove from start a.shift()
unshift() Add to start a.unshift(0)
filter() Filter values a.filter(x=>x>10)
map() Transform array a.map(x=>x*2)
reduce() Combine values a.reduce(...)

Your First Array Program

Print All Array Items
<script>

let fruits = [

"Apple",
"Banana",
"Mango"

];

for(let i=0;
i<fruits.length;
i++){

    document.write(
    fruits[i]+" "
    );

}

</script>
Output Apple Banana Mango

Example 1 : Sum & Average

Sum and Average Program
<script>

var a = [1,2,3];

var s = 0;

for(var i=0;
i<a.length;
i++){

    s = s + a[i];

}

var avg =
s/a.length;

document.write(
"Sum = " + s
);

document.write(
"<br>Average = "
+ avg
);

</script>
Output Sum = 6
Average = 2

Example 2 : Largest Number

Largest Element Program
<script>

let arr = [

5,22,9,41,18

];

let max = arr[0];

for(let v of arr){

    if(v > max){

        max = v;

    }

}

document.write(
"Largest = " + max
);

</script>
Output Largest = 41

Example 3 : Fahrenheit to Celsius

Temperature Conversion
<script>

let f = [

50,100,80

];

for(let i=0;
i<f.length;
i++){

    let c =

    (f[i]-32)*0.56;

    document.write(

    "Celsius = "

    + c +

    "<br>"

    );

}

</script>

Example 4 : Bubble Sort

Bubble Sort Program
<script>

var a = [

1,5,3,2,4

];

for(i=0;i<5;i++){

    for(j=0;j<4;j++){

        if(a[j]>a[j+1]){

            temp = a[j];

            a[j] = a[j+1];

            a[j+1] = temp;

        }

    }

}

document.write(
"Sorted Array:<br>"
);

for(i=0;i<5;i++){

    document.write(
    a[i]+" "
    );

}

</script>
Output Sorted Array:
1 2 3 4 5

Example 5 : map() Method

Square Every Number
<script>

let nums = [

1,2,3,4,5

];

let sq = nums.map(

x => x*x

);

document.write(sq);

</script>
Output 1,4,9,16,25

Example 6 : filter() Method

Even Numbers Only
<script>

let nums = [

1,2,3,4,5,6,7,8

];

let evens =

nums.filter(

x => x%2==0

);

document.write(
evens
);

</script>
Output 2,4,6,8

Example 7 : reduce() Method

Total Price Calculator
<script>

let prices = [

99,45,120,30

];

let total =

prices.reduce(

(s,p)=>s+p,0

);

document.write(

"Total = ₹"

+ total

);

</script>
Output Total = ₹294

Real Life Use Cases

🛒

Shopping Cart

Store products and calculate totals.

📋

To-Do List

Manage daily tasks dynamically.

📊

Charts

Plot graphs using numeric arrays.

Important Notes

  • Array indexes start from 0.
  • Arrays can hold different data types together.
  • Use map(), filter(), and reduce() for modern JavaScript coding.
  • Arrays are widely used in web development.

Conclusion

Arrays are one of the most powerful data structures in JavaScript. They help developers store, organize, and manipulate collections of data efficiently.

JavaScript All Chapters

Continue Learning

Previous

Go to Loops Chapter

Next

Go to Function Chapter