JavaScript Practice Sessions: Code Tracing, Dry Runs & Practical Challenges

Mastery of computer programming is forged through active, deliberate practice. A developer who can accurately dry-run code on paper possesses a deep understanding of memory allocation, control flow, and engine execution rules.

Challenge 1: Output Tracing & Scope Challenge

Analyze the following code and determine the console output before reading the solution:

var a = 1;
function outer() {
    var a = 2;
    function inner() {
        a++;
        console.log("Inner A:", a);
        var a = 5;
        console.log("Re-declared A:", a);
    }
    inner();
}
outer();

Challenge 2: Array Transformation Pipeline

Problem Statement: Given an array of student objects, extract all students enrolled in "BCA", calculate their average marks, and return a sorted array of uppercase names who scored above the average.

const studentBatch = [
    { name: "Aarav", course: "BCA", marks: 85 },
    { name: "Diya", course: "B.Tech", marks: 92 },
    { name: "Kabir", course: "BCA", marks: 65 },
    { name: "Pooja", course: "BCA", marks: 95 },
    { name: "Meera", course: "BCA", marks: 75 }
];

function getTopBCAStudents(students) {
    // 1. Filter BCA students
    const bcaStudents = students.filter(s => s.course === "BCA");
    
    // 2. Calculate average score
    const avgScore = bcaStudents.reduce((sum, s) => sum + s.marks, 0) / bcaStudents.length;
    console.log("BCA Batch Average Score:", avgScore); // 80

    // 3. Filter above average, map to uppercase names, sort alphabetically
    return bcaStudents
        .filter(s => s.marks > avgScore)
        .map(s => s.name.toUpperCase())
        .sort();
}

console.log("Top Students:", getTopBCAStudents(studentBatch));
// Output: ["AARAV", "POOJA"]

Challenge 3: Debounced Button Click Simulator

function debounceAction(fn, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}

const logSubmit = debounceAction((id) => console.log("Submitted ID:", id), 300);

// User clicks button rapidly 3 times:
logSubmit(1);
logSubmit(2);
logSubmit(3); // Only this final invocation executes after 300ms!