Table of contents
- Introduction to Arrays
- Why We Use Arrays in JavaScript
- Creating Arrays
- Accessing and Modifying Arrays
- Looping Over Arrays
- map()
- filter()
- reduce()
- sort() (Sorts elements alphabetically)
- find() (Finds the first matching element)
- some() (Checks if at least one element matches a condition)
- every() (Checks if all elements match a condition)
- Summary Table
- Practical Example: Chai Ordering System ☕
- What We Used:
- Feel free to share your thoughts in the comments and give the article a like!
Introduction to Arrays
Welcome to the world of arrays! Just like in other programming languages, the Array object lets you keep a bunch of items together under one variable name. Plus, it comes with handy methods to help you work with arrays easily.
Why We Use Arrays in JavaScript
In JavaScript, arrays are a bit special. They're not just simple data types; they're actually Array objects with some cool features:
JavaScript arrays can grow in size and hold different types of data all at once.
Unlike associative arrays, you can't use random strings as indexes in JavaScript arrays. You need to use nonnegative numbers to access the elements.
And remember, JavaScript arrays start counting from zero!
Creating Arrays
Using [] :-
let arr = [];
Using new Keywords:-
new Array()
new Array(element1)
new Array(element1, element2)
new Array(element1, element2, /* …, */ elementN)
new Array(arrayLength)
Array()
Array(element1)
Array(element1, element2)
Array(element1, element2, /* …, */ elementN)
Array(arrayLength)
Example of Chai Array:-
let chaitype = ["Masala Chai", "Ginger Chai", "Cardamom Chai", "Black Chai", "..." "N Chai...."];
Accessing and Modifying Arrays
Index-based access
To access array items you have to know the index of the array. How you can find the index of the array you need to know the array start from 0 index than go further. see the example of array index
let index = ["0index", "1index", "2index", "..Index", "Nindex"];
console.log(index[1]);
//Outputs
//1index
Modifying Arrays
Push()
The PUSH method is used to add new elements to the end of the array.
chaiTypes.push("Tulsi Chai", "Kashmiri Chai"); console.log(chaiTypes); // ["Masala Chai", "Ginger Chai", "Cardamom Chai", "Tulsi Chai", "Kashmiri Chai"]pop()
The POP method is used to remove the last item from the array.
let removedChai = chaiTypes.pop(); console.log(removedChai); // "Kashmiri Chai" console.log(chaiTypes); // ["Masala Chai", "Ginger Chai", "Cardamom Chai", "Tulsi Chai"]shift()
The SHIFT method use for the removes the first element from the array
let firstChai = chaiTypes.shift(); console.log(firstChai); // "Masala Chai" console.log(chaiTypes); // ["Ginger Chai", "Cardamom Chai", "Tulsi Chai"]unshift()
The UNSHIFT method use for the adds elements to the beginning of the the array
chaiTypes.unshift("Lemon Chai", "Black Chai"); console.log(chaiTypes); // ["Lemon Chai", "Black Chai", "Ginger Chai", "Cardamom Chai", "Tulsi Chai"]
Looping Over Arrays
for Loop:
A for loop is a traditional way to iterate over an array using an index.
How it Works
It runs a fixed number of times based on the array's length.
It uses three parts:
Initialization:
let i = 0(start from index0)Condition:
i < chaiTypes.length(loop until the last element)Increment:
i++(move to the next element)
Example
let chaiTypes = ["Masala Chai", "Ginger Chai", "Cardamom Chai", "Tulsi Chai"];
for (let i = 0; i < chaiTypes.length; i++) {
console.log(chaiTypes[i]);
}
//Masala Chai
//Ginger Chai
//Cardamom Chai
//Tulsi Chai
forEach();-
forEach() executes a function for each element in the array.
🚀 It does NOT return a new array!
How it Works?
Takes a callback function that runs for every element.
Callback function parameters:
element→ the current item in the array.index(optional) → position of the item.array(optional) → the entire array.
Example
chaiTypes.forEach((chai, index) => {
console.log(`${index + 1}. ${chai}`);
});
Output
1. Masala Chai
2. Ginger Chai
3. Cardamom Chai
4. Tulsi Chai
map()
map() is used to transform each element and return a new array.
How it Works?
Like
forEach(), it takes a callback function.Returns a new array where each element is modified.
Original array remains unchanged.
Example
let chaiWithEmoji = chaiTypes.map(chai => chai + " ☕");
console.log(chaiWithEmoji);
["Masala Chai ☕", "Ginger Chai ☕", "Cardamom Chai ☕", "Tulsi Chai ☕"]
filter()
filter() is used to filter elements based on a condition.
🚀 It returns a new array with matching elements.
How it Works?
Takes a callback function that returns
trueorfalse.If
true, the item is kept; iffalse, it’s removed.
Example
let specialChais = chaiTypes.filter(chai => chai.includes("Ginger"));
console.log(specialChais);
["Ginger Chai"]
reduce()
reduce() is used to reduce the array into a single value (e.g., sum, concatenation, etc.).
How it Works?
Takes a callback function with two parameters:
accumulator→ stores the combined result.currentValue→ the current array element.
Has an optional initial value.
Example:
let combinedChai = chaiTypes.reduce((acc, chai) => acc + " & " + chai);
console.log(combinedChai);
//Masala Chai & Ginger Chai & Cardamom Chai & Tulsi Chai
sort() (Sorts elements alphabetically)
Modifies the array in place (default is alphabetical sorting).
javascriptCopyEditlet sortedChais = [...chaiTypes].sort(); // Copy to avoid modifying original
console.log(sortedChais);
Output:
javascriptCopyEdit["Cardamom Chai", "Ginger Chai", "Masala Chai", "Tulsi Chai"]
💡 Best for: Sorting elements alphabetically or numerically.
Sorting Numbers
To sort numbers correctly, use a compare function:
javascriptCopyEditlet numbers = [3, 45, 1, 9, 21];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers);
Output:
javascriptCopyEdit[1, 3, 9, 21, 45]
find() (Finds the first matching element)
Returns the first element that meets a condition.
javascriptCopyEditlet chaiWithGinger = chaiTypes.find(chai => chai.includes("Ginger"));
console.log(chaiWithGinger);
Output:
javascriptCopyEdit"Ginger Chai"
💡 Best for: Finding one specific item (returns only the first match).
some() (Checks if at least one element matches a condition)
Returns true if at least one element satisfies the condition.
javascriptCopyEditlet hasSpicyChai = chaiTypes.some(chai => chai.includes("Ginger"));
console.log(hasSpicyChai);
Output:
javascriptCopyEdittrue
💡 Best for: Checking if at least one element matches.
every() (Checks if all elements match a condition)
Returns true only if all elements meet the condition.
javascriptCopyEditlet allContainChai = chaiTypes.every(chai => chai.includes("Chai"));
console.log(allContainChai);
Output:
javascriptCopyEdittrue
💡 Best for: Checking if every item matches.
Summary Table
| Method | Purpose | Returns New Array? | Best Use Case |
| for | Traditional loop | ❌ No | Full control over iteration |
| forEach() | Run function on each item | ❌ No | When you don't need a new array |
| map() | Modify elements | ✅ Yes | Transforming an array |
| filter() | Select matching items | ✅ Yes | Filtering elements |
| reduce() | Reduce to a single value | ❌ No | Aggregation (sum, string, etc.) |
| sort() | Sort elements | ❌ (modifies original) | Sorting strings or numbers |
| find() | Find first match | ❌ No | Getting a single matching item |
| some() | Check if at least one matches | ❌ No | If any item meets a condition |
| every() | Check if all match | ❌ No | If all items meet a condition |
🎯 Which One to Use?
Want to transform elements? →
map()Want to filter items? →
filter()Want to find one item? →
find()Want to check if any item matches? →
some()Want to check if all items match? →
every()Want to sum or combine items? →
reduce()Want to sort items? →
sort()Just loop through items? →
for,forEach()
Practical Example: Chai Ordering System ☕
Let's build a Chai Ordering System using all array methods in a real-world scenario.
🛒 Scenario:
You own a chai shop. Customers order different types of chai.
The system should:
Show available chais.
Add chai orders.
Remove an order.
List all orders.
Calculate total revenue.
Find specific orders.
Check order conditions.
Chai Order Management System
// 🏪 Available chai types in shop
let chaiMenu = [
{ name: "Masala Chai", price: 20 },
{ name: "Ginger Chai", price: 25 },
{ name: "Cardamom Chai", price: 30 },
{ name: "Tulsi Chai", price: 22 },
{ name: "Kesar Chai", price: 35 }
];
// 🛒 Customer Orders
let chaiOrders = [];
// ✅ 1. Add chai orders (push)
function addOrder(chaiName) {
let chai = chaiMenu.find(c => c.name === chaiName);
if (chai) {
chaiOrders.push(chai);
console.log(`✅ Order added: ${chaiName} - ₹${chai.price}`);
} else {
console.log(`❌ ${chaiName} is not available.`);
}
}
// ❌ 2. Remove last order (pop)
function removeLastOrder() {
let removedChai = chaiOrders.pop();
console.log(removedChai ? `🗑️ Removed: ${removedChai.name}` : "No orders to remove.");
}
// 🔄 3. Show all orders (forEach)
function showOrders() {
if (chaiOrders.length === 0) {
console.log("🛑 No orders placed yet.");
} else {
console.log("📝 Orders:");
chaiOrders.forEach((chai, index) => {
console.log(`${index + 1}. ${chai.name} - ₹${chai.price}`);
});
}
}
// 💰 4. Calculate total revenue (reduce)
function calculateTotal() {
let total = chaiOrders.reduce((sum, chai) => sum + chai.price, 0);
console.log(`💵 Total Revenue: ₹${total}`);
}
// 🔍 5. Find an order (find)
function findOrder(chaiName) {
let order = chaiOrders.find(chai => chai.name === chaiName);
console.log(order ? `🔎 Found: ${chaiName} - ₹${order.price}` : `❌ ${chaiName} not found in orders.`);
}
// 🎯 6. List only expensive chais (filter)
function expensiveChais(limit) {
let filteredChais = chaiOrders.filter(chai => chai.price > limit);
console.log("💎 Expensive Chais:", filteredChais.map(c => c.name));
}
// 🔢 7. Sort orders by price (sort)
function sortOrdersByPrice() {
let sortedOrders = [...chaiOrders].sort((a, b) => a.price - b.price);
console.log("📊 Orders sorted by price:", sortedOrders.map(c => `${c.name} - ₹${c.price}`));
}
// ✅ 8. Check if any chai is Kesar Chai (some)
function hasKesarChai() {
console.log(chaiOrders.some(chai => chai.name === "Kesar Chai") ? "✅ Kesar Chai is ordered!" : "❌ No Kesar Chai ordered.");
}
// ✅ 9. Check if all chais are below ₹40 (every)
function areAllChaisAffordable() {
console.log(chaiOrders.every(chai => chai.price < 40) ? "✅ All chais are affordable!" : "❌ Some chais are expensive!");
}
// 🛒 **Testing the system**
addOrder("Masala Chai");
addOrder("Ginger Chai");
addOrder("Kesar Chai");
addOrder("Tulsi Chai");
showOrders();
calculateTotal();
findOrder("Ginger Chai");
expensiveChais(25);
sortOrdersByPrice();
hasKesarChai();
areAllChaisAffordable();
removeLastOrder();
showOrders();
Expected Output
✅ Order added: Masala Chai - ₹20
✅ Order added: Ginger Chai - ₹25
✅ Order added: Kesar Chai - ₹35
✅ Order added: Tulsi Chai - ₹22
📝 Orders:
1. Masala Chai - ₹20
2. Ginger Chai - ₹25
3. Kesar Chai - ₹35
4. Tulsi Chai - ₹22
💵 Total Revenue: ₹102
🔎 Found: Ginger Chai - ₹25
💎 Expensive Chais: Kesar Chai
📊 Orders sorted by price: Masala Chai - ₹20, Tulsi Chai - ₹22, Ginger Chai - ₹25, Kesar Chai - ₹35
✅ Kesar Chai is ordered!
✅ All chais are affordable!
🗑️ Removed: Tulsi Chai
📝 Orders:
1. Masala Chai - ₹20
2. Ginger Chai - ₹25
3. Kesar Chai - ₹35
What We Used:
| Method | Purpose |
| push() | Add chai orders |
| pop() | Remove last order |
| forEach() | List all orders |
| reduce() | Calculate total revenue |
| find() | Find a specific order |
| filter() | Find expensive chais |
| sort() | Sort orders by price |
| some() | Check if any order is Kesar Chai |
| every() | Check if all chais are affordable |
This article provides a comprehensive introduction to arrays in JavaScript, covering their unique features, creation, and index-based access. It explains how to modify arrays using methods like push, pop, shift, and unshift, and details various looping mechanisms including for loops and forEach(). The document delves into advanced array methods such as map, filter, reduce, sort, find, some, and every, each paired with practical examples. The article culminates in a practical example of a Chai Ordering System, illustrating the application of all these array methods in a real-world scenario.