Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 26Data Structures2 Hours Practical
Push to GitHub to Complete
JavaScript Arrays & Modern Transformation Methods: push, map, filter & reduce
Arrays are ordered collections of values. In modern JavaScript, array iteration methods like .map() and .filter() are preferred over imperative for loops because they produce cleaner, declarative code that does not mutate original data.
Interactive Learning Roadmap
Day 26 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Create and index arrays of student data.
✔Add and remove array elements using .push(), .pop(), and .splice().
✔Transform array items declaratively using .map().
✔Filter subsets of data using .filter() and aggregate totals with .reduce().
Day 26 MasterclassData Structures
JavaScript Arrays & Modern Transformation Methods: push, map, filter & reduce — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
Arrays are ordered collections of values. In modern JavaScript, array iteration methods like .map() and .filter() are preferred over imperative for loops because they produce cleaner, declarative code that does not mutate original data.
Zero-indexed: The first element is array[0], length is array.length.
.push(item): Appends item to the end of the array (mutating).
.map(callback): Transforms every item and returns a BRAND NEW array of identical length.
.filter(callback): Tests each item and returns a BRAND NEW array containing only items that pass the truth test.
.reduce(callback, initial): Combines all array items into a single accumulated result (e.g. total sum).
Immutability: Modern React/Node workflows favor .map() and .filter() because they avoid mutating state.
Dimaag Mein Bithane Ka Model
"Think of an array like a conveyor belt of exam answer sheets. .map() stamps a grade on every sheet, .filter() picks out only sheets scoring 40 or higher, and .reduce() counts the total marks of all sheets into one ledger."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how in 3 short lines we can filter passing scores, add bonus marks, and calculate the total sum.
Declarative Array Processing with map, filter, and reducehtml
<!DOCTYPE html>
<html>
<body>
<script>
const examMarks = [35, 78, 92, 44, 28, 85];
// 1. Filter: Keep only passing marks (>= 40)
const passingScores = examMarks.filter(mark => mark >= 40);
console.log("Passing Scores:", passingScores); // [78, 92, 44, 85]
// 2. Map: Convert scores to percentages out of 100
const formattedPercentages = examMarks.map(mark => mark + "%");
console.log("Formatted:", formattedPercentages);
// 3. Reduce: Calculate total marks
const totalMarks = examMarks.reduce((sum, mark) => sum + mark, 0);
console.log("Total Class Marks:", totalMarks);
</script>
</body>
</html>2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 26 Practical Task Test Studio
Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Filter scores >= 50
Use scores.filter(score => score >= 50) and store the resulting array in const qualifiedScores.
⏳ WAITING
Task 2Map scores with 5 bonus marks
Use scores.map(score => score + 5) and store the resulting array in const bonusScores.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh272 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Confusing .find() with .filter()
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
const marks = [20, 65, 80, 45];2
// Goal: Get all marks >= 403
const passing = marks.find(m => m >= 40); // Bug!4
console.log("All passing:", passing); // Prints: 65 (Only the first match!)Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
.find() stops at and returns ONLY the first matching element. To collect ALL matching elements in an array, .filter() must be used.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 credits-aggregator.htmlBCA Course Credits & GPA Aggregator
- •Create day-26/index.html with an array of subject score objects: { subject: "BCS-011", marks: 78, credits: 4 }.
- •Use .filter() to extract high-scoring subjects (marks >= 75).
- •Use .map() to generate clean HTML list item strings: <li>Subject: Marks</li>.
- •Use .reduce() to compute the weighted average marks of the student.
Submission Evaluation Criteria: Ensure all array transformations use .map(), .filter(), and .reduce() without traditional for loops.
Exact Assignment Solution Code: credits-aggregator.html
Open Visual Studio Code on your PC (code .), create credits-aggregator.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BCA Day 26 - Credits & GPA Aggregator (Array Methods)</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: #0b1120;
color: white;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 16px;
padding: 28px;
max-width: 520px;
width: 100%;
}
h1 { font-size: 20px; color: #38bdf8; margin-bottom: 12px; }
ul { list-style: none; margin: 16px 0; }
li { background: #0f172a; padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; font-size: 13px; border-left: 3px solid #10b981; }
.weighted-box { background: #172554; border: 1px solid #2563eb; padding: 12px; border-radius: 8px; font-weight: bold; margin-top: 16px; }
</style>
</head>
<body>
<div class="card">
<h1>BCA Semester 1 Honors Aggregator</h1>
<div style="font-size: 12px; color: #94a3b8;">High-Scoring Subjects (Marks >= 75):</div>
<ul id="subjectList"></ul>
<div class="weighted-box" id="weightedGpa"></div>
</div>
<script>
const courses = [
{ code: "BCS-011", name: "Computer Basics", marks: 82, credits: 3 },
{ code: "BCSL-013", name: "PC Software Lab", marks: 90, credits: 2 },
{ code: "BCS-012", name: "Mathematics", marks: 68, credits: 4 },
{ code: "FEG-02", name: "Communication Skills", marks: 76, credits: 3 }
];
// 1. .filter() to extract high-scoring subjects (marks >= 75)
const honorsCourses = courses.filter(c => c.marks >= 75);
// 2. .map() to create HTML list items
const listHtml = honorsCourses
.map(c => `<li><strong>${c.code}</strong> - ${c.name}: ${c.marks}/100 (${c.credits} Credits)</li>`)
.join("");
document.getElementById("subjectList").innerHTML = listHtml;
// 3. .reduce() to compute weighted average marks
const totalWeightedMarks = courses.reduce((acc, c) => acc + (c.marks * c.credits), 0);
const totalCredits = courses.reduce((acc, c) => acc + c.credits, 0);
const weightedAvg = (totalWeightedMarks / totalCredits).toFixed(2);
document.getElementById("weightedGpa").textContent =
`Weighted Semester Average: ${weightedAvg}% across ${totalCredits} total credits`;
console.log("Honors courses:", honorsCourses);
console.log("Weighted average:", weightedAvg);
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
Does the JavaScript Array.prototype.map() method mutate the original array?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-26
Create a new project folder (day-26)
2$
cd day-26
Change working directory to day-26
3$
git checkout -b feature/day-26-arrays
4$
git add index.html
5$
git commit -m "feat(day-26): implement array operations with map filter and reduce"
Commit staged changes with a descriptive message
6$
git push origin feature/day-26-arrays
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 26 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-26/ or bca-day-26/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 26
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 26
4$
mkdir day-26
Create a new project folder (day-26)
5$
cd day-26
Change working directory to day-26
6$
# 3. Create your code file: index.html
7$
# (Write your Day 26 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 26: JavaScript Arrays & Modern Transformation Methods: push, map, filter & reduce"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-26/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/✨ CREATE THIS FOLDER FOR TODAY (Day 26)
└──index.htmlMust contain: .filter(), .map(), .reduce(), .push()
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 26 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 25: JavaScript Functions: Declarations, Arrow Syntax, Parameters & Scope first.
Complete Day 25 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal