JavaScript Arrays
An array stores a list of values in one variable.
Creating an Array
Write the items inside square brackets, separated by commas:
Example
javascript
const fruits = ["Mango", "Banana", "Guava"];
const marks = [78, 91, 66, 85];Reading and Changing Items
Each item has a position number called an index. The first index is 0.
Example
html
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const cities = ["Karachi", "Lahore", "Islamabad", "Peshawar"];
cities[1] = "Multan"; // change the second item
document.getElementById("demo").innerHTML =
"First: " + cities[0] + "<br>" +
"Second: " + cities[1] + "<br>" +
"Count: " + cities.length + "<br>" +
"Last: " + cities[cities.length - 1];
</script>
</body>
</html>Output
First: Karachi Second: Multan Count: 4 Last: Peshawar
Adding and Removing Items
| Method | What it does |
|---|---|
push(x) | Add to the end |
pop() | Remove from the end |
unshift(x) | Add to the start |
shift() | Remove from the start |
splice(i, n) | Remove n items from index i |
Example
javascript
const queue = ["Ali", "Sara"];
queue.push("Usman"); // ["Ali", "Sara", "Usman"]
queue.shift(); // ["Sara", "Usman"]
queue.unshift("Hina"); // ["Hina", "Sara", "Usman"]
console.log(queue.join(", "));Output
Hina, Sara, Usman
Searching
Example
javascript
const colours = ["red", "green", "blue"];
console.log(colours.includes("green")); // true
console.log(colours.indexOf("blue")); // 2
console.log(colours.indexOf("pink")); // -1 (not found)Sorting
sort() sorts strings alphabetically. For numbers, give it a compare function, or 10 will come before 9.
Example
javascript
const names = ["Zain", "Ahmed", "Maria"];
names.sort(); // ["Ahmed", "Maria", "Zain"]
const prices = [450, 90, 1200, 300];
prices.sort((a, b) => a - b); // [90, 300, 450, 1200]
prices.reverse(); // [1200, 450, 300, 90]Looping With forEach
forEach runs a function once for every item:
Example
javascript
const items = ["Pen", "Notebook", "Bag"];
items.forEach((item, index) => {
console.log(index + 1 + ". " + item);
});Output
1. Pen 2. Notebook 3. Bag
map, filter, reduce and find
These four methods are used everywhere in modern JavaScript. map and filter return new arrays and leave the original as it is.
| Method | Returns |
|---|---|
map(fn) | A new array with every item changed by fn |
filter(fn) | A new array with only the items where fn is true |
reduce(fn, start) | One value made from all items, like a total |
find(fn) | The first item where fn is true |
Example
html
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const prices = [1200, 450, 3000, 800];
const withDelivery = prices.map(p => p + 150);
const cheap = prices.filter(p => p < 1000);
const total = prices.reduce((sum, p) => sum + p, 0);
const firstBig = prices.find(p => p > 1000);
document.getElementById("demo").innerHTML =
"With Rs 150 delivery: " + withDelivery.join(", ") + "<br>" +
"Under 1000: " + cheap.join(", ") + "<br>" +
"Total: " + total + "<br>" +
"First over 1000: " + firstBig;
</script>
</body>
</html>Output
With Rs 150 delivery: 1350, 600, 3150, 950 Under 1000: 450, 800 Total: 5450 First over 1000: 1200
Arrays of Objects
Real data is often a list of objects:
Example
javascript
const students = [
{ name: "Ali", marks: 82 },
{ name: "Ayesha", marks: 95 },
{ name: "Bilal", marks: 47 }
];
const passed = students.filter(s => s.marks >= 50).map(s => s.name);
console.log(passed);Output
[ 'Ali', 'Ayesha' ]
A const array can still change its items with push() or pop(). const only means the variable cannot point to a different array.
Exercise
Exercise
What does [5, 10, 15].map(n => n * 2) return?