> ## Documentation Index
> Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Demo Make Updates to Issue Branch

> Guide diagnosing and fixing exponential ball duplication caused by a multiBall power-up, with a safe array-copy fix and Git workflow for applying, committing, and pushing the change

This lesson walks through diagnosing and fixing issue #1 in the BlockBuster repository: exponential growth of balls when the `multiBall` power-up is applied. It includes the root cause analysis, a safe fix, and the Git workflow for fetching, checking out, committing, and pushing the change.

Repository / user context

* Repo: BlockBuster
* User: GH900
* Issue: #1 — exponential ball growth caused by the `multiBall` power-up

Problem summary
The `multiBall` handler duplicates all current balls by iterating `gameState.balls` and pushing clones into the same array. Because the code mutates the array while iterating it, newly pushed balls are also iterated, causing exponential growth on repeated activation.

Reproduction (relevant snippet)

```javascript theme={null}
// script.js:
case 'multiBall':
if (gameState.balls.length < 5) { // This check is insufficient
    gameState.balls.forEach(ball => {
        gameState.balls.push({...ball});
    });
}
```

Root cause

* Mutating (pushing into) an array while iterating it with `forEach` causes the loop to process elements added during iteration.
* The guard `if (gameState.balls.length < 5)` only checks at the start; pushing inside the loop invalidates the assumption and allows the array to grow beyond intended limits.

Best practice note

<Callout icon="lightbulb" color="#1CB2FE">
  When modifying arrays you are iterating over, iterate over a shallow copy (for example, `arr.slice()`) or use an index-based loop that references the original length. Always enforce an explicit maximum when duplicating entities to prevent runaway growth.
</Callout>

Safe fix

* Iterate over a copy of the original balls so newly added balls are not reprocessed.
* Apply a strict upper bound (MAX\_BALLS) to stop duplication once reached.

Corrected implementation:

```javascript theme={null}
// script.js:
case 'multiBall': {
  const MAX_BALLS = 5;
  // Copy the current balls so we don't iterate newly added ones
  const originals = gameState.balls.slice();

  // Add clones of original balls up to MAX_BALLS total
  for (const ball of originals) {
    if (gameState.balls.length >= MAX_BALLS) break;
    gameState.balls.push({ ...ball });
  }
  break;
}
```

This ensures:

* Only balls that existed at activation are duplicated.
* The total number of balls never exceeds `MAX_BALLS`.

Working with the issue branch (Git workflow)
Fetch the remote branch, inspect it locally, check it out to track the remote, apply the fix, test, then commit and push.

1. Fetch remote branches

```bash theme={null}
git fetch
# sample fetched output
remote: Enumerating objects: 8, done.
remote: Counting objects: 100% (8/8), done.
remote: Compressing objects: 100% (7/7), done.
Total 7 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), 1.87 KiB | 639.00 KiB/s, done.
From https://github.com/sid-990/block-buster
 * [new branch]      1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag -> origin/1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag
```

2. List local and remote branches

```bash theme={null}
git branch --list -a
* feature-1
  main
  remotes/origin/1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag
  remotes/origin/HEAD -> origin/main
  remotes/origin/feature-1
  remotes/origin/main
```

3. Check out the remote issue branch and set it to track origin

```bash theme={null}
git checkout 1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag
# sample output:
# Branch '1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag' set up to track remote branch '1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag' from 'origin'.
# Switched to a new branch '1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag'
```

Make the change and test locally

* Open `script.js`, apply the corrected code above (or an equivalent safe approach).
* Run the application locally to confirm the fix and check for regressions.

Example local test command:

```bash theme={null}
# start your local dev server / preview as appropriate for the project
# e.g., npm start
npm start
```

Commit and push the fix

* Reference the issue number in the commit message so GitHub links the commit to the issue (e.g., `refs #1` or `#1`).

```bash theme={null}
git add script.js
git commit -m "fix: avoid exponential ball growth when applying multiBall (refs #1)"
git push origin 1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag
```

Sample push output:

```bash theme={null}
# sample output:
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 450 bytes | 450.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/sid-990/block-buster
   abc1234..def5678  1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag -> 1-exponential-ball-growth-with-multiple-multi-ball-power-ups-causes-lag
```

On GitHub

* After pushing, refresh the repo page. The commit will appear on the remote branch and GitHub will auto-link the commit to issue #1 if the commit message includes the issue reference.
* From there, open a pull request to start code review and CI checks.

Common Git commands used in this workflow

| Command                    | Purpose                                                          |
| -------------------------- | ---------------------------------------------------------------- |
| `git fetch`                | Retrieve updates from the remote without changing local branches |
| `git branch --list -a`     | List local and remote branches                                   |
| `git checkout <branch>`    | Switch to a branch; can set up tracking to origin                |
| `git add <file>`           | Stage changes for commit                                         |
| `git commit -m "msg"`      | Commit staged changes with a message                             |
| `git push origin <branch>` | Push local branch to the specified remote branch                 |

Next steps

* Open a pull request from the branch and continue with code review and CI.
* Consider adding a unit or integration test that validates the `multiBall` behavior to prevent regressions (for example, assert the ball count never exceeds `MAX_BALLS` after activation).

Links and references

* [Git documentation](https://git-scm.com/doc)
* [GitHub docs: Creating a pull request](https://docs.github.com/en/pull-requests)
* [MDN: Array.prototype.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
* [MDN: Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

<CardGroup>
  <Card title="Watch Video" icon="video" cta="Learn more" href="https://learn.kodekloud.com/user/courses/github-foundation-certification/module/d1fa4e43-2a65-4de9-8da8-dc9ea7cede8e/lesson/cd01762a-d490-4310-b50c-e1b357a7dc03" />
</CardGroup>
