Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Game Development Game Development with Phaser Building a Breakout Game with Phaser Adding Basic Collisions

const variable within callback function of loop iteration using forEach()

function create() {
    const {width: screenWidth, height: screenHeight} = config;
    const brickGroupYValues = [200, 140, 80];

    paddle = this.physics.add.image(screenWidth / 2, screenHeight - 50, 'paddle');
    paddle.setCollideWorldBounds();
    paddle.setImmovable();
    keys = this.input.keyboard.createCursorKeys();

    ball = this.physics.add.image(screenWidth / 2, screenHeight - 90, 'ball');
    ball.setCollideWorldBounds();
    ball.setBounce(1);
    this.physics.add.collider(ball, paddle);
    this.physics.world.checkCollision.down = false;
    brickGroupYValues.forEach((yValue) => {
        const brickGroup = this.physics.add.group({
            key: 'brick',
            repeat: 8,
            immovable: true,
            setXY: {
                x: 155,
                y: yValue,
                stepX: 120
            }
        });
        this.physics.add.collider(ball, brickGroup, hitBrick);
    });
}

I have two questions about the above code:

  1. Why aren’t the second and third iterations through the brickGroupYValues array using the forEach() method considered to constitute a redeclaration of an existing const variable, const brickGroup? Shouldn’t this cause an error and not be allowed?

  2. Why aren’t the second and third iterations through the brickGroupYValues array using the forEach() method considered to constitute reassignment of a const variable, const brickGroup? I am aware that if an object is assigned to a constant variable, although reassignment is not possible, mutation of the assigned object’s content is.

i.e.

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

The justification according to MDN being “You can update, add, or remove properties of an object declared using const, because even though the content of the object has changed, the constant is still pointing to the same object:”

However, in the above code upon which my questions are based, the expression on the right side of the equal sign of const brickGroup returns a different object with each iteration. I tested this by printing the expression’s return value on each iteration to the console. The fact that there are 3 different objects created is also demonstrated by the fact that there are 3 different groups of bricks that appear on screen in our game.

So, if the const brickGroup variable is pointing to a different object on each iteration, not the same object, why doesn’t this cause an error and why isn’t it considered to be reassignment, which shouldn’t be allowed when using const?

1 Answer

Steven Parker
Steven Parker
231,236 Points

The scope of the variables within a forEach code block are just one iteration, so they are disposed at the end of each pass. Then, if the block is repeated, they are re-created.

For this reason, the const is not considered a re-declaration, nor a re-assignment.

This is also true for conventional while and for loops, so you can safely use const variables in them also.