
JavaScript Tutorial – Day 9: Arrays in JavaScript
In this JavaScript tutorial, we’ll learn about one of the most commonly used data structures — arrays in JavaScript. Arrays allow us to store multiple values in a single variable and perform operations like sorting, filtering, and iterating.
By the end of this lesson, you’ll understand how to create arrays, access elements, modify them, and use powerful array methods that make JavaScript development easier.
What are Arrays in JavaScript?
An array in JavaScript is a special type of object that can hold multiple values in an ordered list.
👉 Example:
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits);
👉 Output:
["Apple", "Banana", "Mango"]
Here, fruits
is an array containing three items.
Why Use Arrays in JavaScript?
- ✅ Store multiple values in a single variable.
- ✅ Access values using indexes.
- ✅ Useful for lists (e.g., products, users, tasks).
- ✅ Many built-in methods make manipulation easier.
Creating Arrays in JavaScript
There are two ways to create arrays:
1. Using Array Literal
let numbers = [10, 20, 30, 40];
2. Using Array Constructor
let numbers = new Array(10, 20, 30, 40);
👉 Preferred way is array literal because it’s shorter and cleaner.
Accessing Array Elements
Each element in an array has an index starting from 0
.
let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // Red
console.log(colors[2]); // Blue
Changing Array Elements
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits); // ["Apple", "Orange", "Mango"]
Array Length
The .length
property gives the number of elements.
let items = ["Pen", "Book", "Laptop"];
console.log(items.length); // 3
Looping Through Arrays
You can loop through arrays using different methods:
For Loop
let numbers = [1, 2, 3, 4];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
For…of Loop
for (let num of numbers) {
console.log(num);
}
forEach Method
numbers.forEach((num) => console.log(num));
Common Array Methods in JavaScript
JavaScript arrays have many built-in methods.
Adding and Removing Elements
let animals = ["Dog", "Cat"];
// Add to end
animals.push("Elephant");
console.log(animals); // ["Dog", "Cat", "Elephant"]
// Remove from end
animals.pop();
console.log(animals); // ["Dog", "Cat"]
// Add to start
animals.unshift("Lion");
console.log(animals); // ["Lion", "Dog", "Cat"]
// Remove from start
animals.shift();
console.log(animals); // ["Dog", "Cat"]
Finding Elements
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.indexOf("Banana")); // 1
console.log(fruits.includes("Mango")); // true
Slicing and Splicing
let numbers = [1, 2, 3, 4, 5];
// Slice (does not modify original)
let sliced = numbers.slice(1, 4);
console.log(sliced); // [2, 3, 4]
// Splice (modifies original)
numbers.splice(2, 1);
console.log(numbers); // [1, 2, 4, 5]
Sorting Arrays
let fruits = ["Banana", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Mango"]
For numbers:
let nums = [40, 10, 30, 20];
nums.sort((a, b) => a - b);
console.log(nums); // [10, 20, 30, 40]
Joining and Splitting
let words = ["JavaScript", "is", "fun"];
console.log(words.join(" ")); // JavaScript is fun
Real-Life Example of Arrays in JavaScript
Imagine you are building a to-do list app:
let tasks = ["Buy groceries", "Clean room", "Study JavaScript"];
// Add new task
tasks.push("Exercise");
// Display all tasks
tasks.forEach((task, index) => {
console.log(index + 1 + ". " + task);
});
👉 Output:
1. Buy groceries
2. Clean room
3. Study JavaScript
4. Exercise
Multidimensional Arrays in JavaScript
Arrays can contain other arrays.
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6
Higher-Order Array Methods
Modern JavaScript provides advanced methods:
1. map() – transform array elements
let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9]
2. filter() – filter elements
let ages = [15, 22, 18, 30];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 18, 30]
3. reduce() – accumulate values
let prices = [100, 200, 300];
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600
Best Practices for Arrays in JavaScript
- Use
const
for arrays unless reassigning. - Use
.map()
,.filter()
,.reduce()
for cleaner code. - Avoid using
for...in
for arrays (meant for objects). - Prefer
for...of
orforEach
for readability.
Mini Practice Exercise
👉 Write a function that finds the largest number in an array.
function findLargest(arr) {
return Math.max(...arr);
}
console.log(findLargest([10, 25, 7, 40, 3])); // 40
External Resource
👉 Read the official MDN Arrays Documentation
Internal Resource
Check out Day 8: Functions in JavaScript, since arrays and functions are often used together.
Quick Recap
- Arrays store multiple values in one variable.
- Elements are accessed using indexes (start from 0).
- Built-in methods like
push
,pop
,map
,filter
,reduce
make them powerful. - Arrays are essential for lists, tasks, products, and more.
What’s Next?
In this JavaScript tutorial series:
- ✅ Day 8 → Functions in JavaScript
- ✅ Day 9 → Arrays in JavaScript
- 🔜 Day 10 → Objects in JavaScript