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

Publish Date: Oct 25 '19

4 7

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

Comments 7 total

Basti OrtizOct 25, 2019
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 LarssonOct 25, 2019
  
  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 OrtizOct 25, 2019
    
    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 LarssonOct 26, 2019
      
      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 OrtizOct 26, 2019
        
        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 LarssonOct 27, 2019
        
        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 OrtizOct 28, 2019
        
        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. 😉

Add comment

Ted Larsson @larssonted

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

Comments 7 total

"Same Reference" vs. "Same Value"

Some Dood ・ Nov 5 '18 ・ 5 min read