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

javascript add object to another object
javascript object methods
javascript object keys
javascript object properties
javascript object constructor
add property to object javascript
javascript array
javascript object reference

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?

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,
});

Working with objects, Objects in JavaScript, just as in many other programming languages, can The same way, JavaScript objects can have properties, which define their characteristics. four variables are created and assigned in a single go, // separated by JavaScript has a special keyword, this , that you can use within a​  Similar to our object assignment example, the argument of the function points to the same memory location as the original myObj variable. The term for this behavior in JavaScript is call by sharing. Call by sharing means that the arguments of the called function point to the same memory locations as the variables passed by the caller.

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);

Objects, The const would give an error only if we try to set user= as a whole. There's another way to make constant object properties, we'll cover it Please note that the string inside the brackets is properly quoted (any type of quotes will do). In the example above, properties have the same names as variables. From what I understand, when an array object is assigned to a new variable, that array object can be "referenced" between both variables, but the values themselve are mutable by either assigned var

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.

Learning how references work in JavaScript, The variables flash and quicksilver are references to the same value (aka shared In JavaScript, unlike in most other popular programming languages, the is a compound value (Array object), thus it is assigned in variable inside IIFE mutates the value in variable magneto through JavaScript reference. Using JavaScript Variables as Object Keys, Using JavaScript Variables as Object Keys users favorites, to populate our update list, using each object key as input values or input names. JavaScript: Use variable as object name. GitHub Gist: instantly share code, notes, and snippets.

Explaining Value vs. Reference in Javascript, When we assign these variables to other variables using = , we copy the value to When a reference type value, an object, is copied to another variable using = Each variable now contains a reference to the same array. All variables created inside are garbage-collected as soon as the function returns. The Object.assign () method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

Professional JavaScript for Web Developers, is assigned from one variable to another, the value stored on the variable object to Variable object after copy exactly the same object, so changes to one are the inside of the function the same way a value is copied from one variable to  A variable is declared by either assigning a value to it, or by using the keyword var. One case where it's useful to refer to a global variable as window.myVar is if you're inside a function that has a local variable called myvar. In that case, myVar refers to the local variable, while window.myVar refers to the global variable.

Learning JavaScript: JavaScript Essentials for Modern Application , Primitives can't be modified (we can change the value of a primitive variable, but Objects, on the other hand, can be modified. When f is called, both point to the same object, but when o is assigned inside f, it points to a new, distinct object. JavaScript Data Types. JavaScript variables can hold numbers like 100 and text values like "John Doe". In programming, text values are called text strings. JavaScript can handle many types of data, but for now, just think of numbers and strings. Strings are written inside double or single quotes. Numbers are written without quotes.

Comments
  • I don't think that's what they're going for if x and y changes.
  • @JacqueGoupil You may be right. If OP is trying to preserve the ability to set x directly, that might make this a bit more intricate. I'll add an additional piece of code to account for that.