JavaScript: How can I assign a variable the same as another variable inside the same object?

Question

sorry if this is a duplicate, but I couldn't find any others.

So I tried doing this.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    

var player1 = {
    width: 20,
    height: 75,
    x: canvas.width/6-player1.width/2,
    y: canvas.height/2-player1.height/2,
    speed: 5
};

function drawPlayer1() {
    ctx.beginPath();
    ctx.rect(player1.x, player1.y, player1.width, player1.height);
    ctx.fillStyle = "#b10000";
    ctx.fill();
    ctx.closePath();
}

drawPlayer1();

But the problem is that I can't assign x to player1.width because width is assigned inside player1 where it's getting "used".

BTW I am doing this because of symmetry.

I could just have these variables for themselves, but I am trying to clean up my code.

So, how can I get around this problem by using objects?

Answer 1

Consider using getters .

 var player1 = { width: 20, height: 75, get x() { return this.width + 10 }, get y() { return this.height + 10 } }; console.log(player1.x, player1.y);

If you want the ability to set the value directly and override the formula, you could utilize setters too:

 var player1 = { width: 20, height: 75, _x: null, _y: null, get x() { return this._x || this.width + 10 }, set x (newX) { this._x = newX }, get y() { return this._y || this.height + 10 }, set y (newY) { this._y = newY } }; console.log(player1.x, player1.y); player1.x = 500; player1.y = 200; console.log(player1.x, player1.y);

Answer 2

Since player1.width is not defined yet-- because you are still in the middle of defining player1 -- you can define it and the other static properties first, and then assign the dynamic ones on the next line with Object.assign .

var player1 = {
    width: 20,
    height: 75,
    speed: 5
};
Object.assign(player1, {
    x: canvas.width/6-player1.width/2,
    y: canvas.height/2-player1.height/2,
});

Answer 3

You can't access player1 from within the definition of player1 because it doesn't exist yet. When the interpreter parses this code, it first creates an object out of the object literal, then it stores it in the player1 variable. And since player1 didn't exist beforehand, player1.width causes an error.

// original code which doesn't work
var player1 = {
    width: 20,
    height: 75,
    x: canvas.width/6-player1.width/2,
    y: canvas.height/2-player1.height/2,
    speed: 5
};

A simple way to fix it is to set those variables after creating the object.

var player1 = { ... };

player1.x = canvas.width/6 - player1.width/2;
player1.y = canvas.height/2 - player1.height/2;

Alternatively you could do this:

Object.assign(player1, {
    x: canvas.width/6 - player1.width/2,
    y: canvas.height/2 - player1.height/2;
});

This code creates a new object with the x and y properties and then copies them to player1 . But for just these two properties, I'd stick to the first solution, it's clearer and simpler.