Ted Larsson

Posted on Oct 25, 2019

HELP! can I set a methods value to values from the object in javascript?

#javascript #beginners

function Rectangle(width, height, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.widthString = '\''+width+'px'+'\'';
this.heightString = '\''+height+'px'+'\'';
this.area = function() {
console.log("area: " + this.width * this.height);
};

this.newWidth = function (width){
this.width = width;
};

this.newHeight = function (height){
this.height = height;
};

this.translate = function(x,y){
this.x = x;
this.y = y;
};

this.logValues = function(){
console.log('width: ' + this.width + '\n' + 'height: ' + this.height + '\n'

'top: ' + this.x + '\n' + 'left: ' + this.y); };

this.scale = function(scale){
this.width *= scale;
this.height *= scale;
};

this.render = function(width, height, x, y, color){
let rectangle = document.createElement('DIV');
document.body.appendChild(rectangle);
rectangle.className = 'rectangle';
rectangle.style.background = color;
rectangle.style.width = width;
rectangle.style.height = height;
rectangle.style.position = 'absolute'
rectangle.style.top = x;
rectangle.style.left =y;
// rectangle.style.display = 'block';
// rectangle.style.visibility= 'visible'
// let text = document.createTextNode("Hi");
// rectangle.appendChild(text);
};
};

let rectangleOne = new Rectangle(100, 100, 0, 0);
rectangleOne.render('100px', '100px', '0px','0px','green' )
console.log(rectangleOne.widthString, rectangleOne.heightString);

let rectangleTwo = new Rectangle(200, 300, 10, 10);
rectangleTwo.render('100px','100px','100px','100px','blue' )
rectangleTwo.scale(2);

is there a way for me to set the height, width, x, y, values in my this.render method to use the values in my function Rectangle(width, height, x ,y)??

Top comments (7)

Basti Ortiz • Oct 25 '19 • Edited

Yes, in fact you can. Allow me to explain. 😉

function Rectangle(x, y, width, height) {
  // Here, we are setting all the properties of
  // the `Rectangle` instance upon construction.
  // This is a very common pattern in JavaScript,
  // or "object-oriented programming" in general.
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

// Down here, we can access the properties we passed
// in the constructor via `this.{propertyName}`.
Rectangle.prototype.render = function() {
  // Create the <div> element
  const div = document.createElement('div');

  // Set the default HTML properties and
  // CSS styles here
  div.style.position = 'absolute';
  div.className = 'rectangle';

  // Access the `this.{propertyName}` properties
  // we passed in via the constructor.
  div.style.top = this.y + 'px';
  div.style.left = this.x + 'px';
  div.style.width = this.width + 'px';
  div.style.height = this.height + 'px';

  // Finally, we can put the <div> wherever
  // we want. In this case, I plopped it in
  // the <body> for the sake of example.
  document.body.appendChild(div);
};

// After that, we can instantiate the `Rectangle`.
const rect = new Rectangle(25, 25, 100, 200);
rect.render();

P.S. Add the #help tag to your post so more people can see it. 😉

Ted Larsson • Oct 25 '19

Thank you so much! But since I'm new to this (3 weeks in to my first ever JavaScript course) I have some follow-up questions.
1: why is the rectangle function a separate function?
2: what is prototype and why use it?
3: why use const?

Basti Ortiz • Oct 25 '19 • Edited

For questions #1 and #2, I recommend watching this video to understand what prototypal inheritance is in JavaScript. However, I must mention that this isn't a particularly "beginner-friendly" topic. But if you're curious enough, no one's going to stop you, my friend. Learning is great!

For question #3: I used const because const prevents me from changing the variable. It's "constant". If I try to reassign the variable, it's going to spit out an error—which is a good thing! Most of the time, we never reassign our variables. So to make sure that I don't unexpectedly change the value of some variable, I use const as a way to "prevent bugs".

Also, feel free to ask me any more questions you might have! 😉

Ted Larsson • Oct 26 '19

But in my initial code I had methods to change both size and location. Is it possible to to still have those methods if I use let instead of const? (It was part of the exercise to have those methods)

Basti Ortiz • Oct 26 '19

Ah, yes. Now we have reached the intricacies of JavaScript. When we assign a value to const, what we're really doing is we're just assigning a reference, not the actual value itself. I discuss the implication of this language feature in an old post of mine. 😉 How timely, isn't it?

"Same Reference" vs. "Same Value"

Some Dood ・ Nov 5 '18 ・ 5 min read

#computerscience #beginners #javascript

As for adding methods for setting the size and location, we can simply add the usual setters and getters. We can do this because const stores references, not values.

function Rectangle(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

// Rinse and repeat these setters and getters
// for all properties
Rectangle.prototype.setX = function(newX) { this.x = newX; }
Rectangle.prototype.getX = function() { return this.x; }

const rect = new Rectangle(20, 30, 45, 100);
rect.getX(); // Output: 20
rect.setX(15);
rect.getX(); // Output: 15

Ted Larsson • Oct 27 '19

I can see some of the logic in this, ( we haven't
t touched on the subject of 'set & get' yet or prototyping but i will try to learn it in the coming week or two. thanks so much for taking the time to educate me :D

Basti Ortiz • Oct 28 '19

No problem at all! All I ask is for you to pay this forward in the future. As developers, we gotta look out for each other. 😉

DEV Community

HELP! can I set a methods value to values from the object in javascript?

Top comments (7)

"Same Reference" vs. "Same Value"

Some Dood ・ Nov 5 '18 ・ 5 min read

Read next

Sortie de TypeScript 5.7 RC, nouvelle alternative à npm, avenir des frameworks JavaScript - Cette semaine en JS

Removing code smells: Using dependency injection through Props in React

Day 9: Terminal Forms 📇

Buffer Logs and Flush Automatically on Error with Powertools for Lambda