Is my hypothesis for Getter's and setter's correct?


#1

Continuing the discussion from Learn JavaScript: Objects Team Stats:

When you use a getter method it sends data to some location?

When you use a set method it sets objects in a class (as a object)?

Please let me know if my understanding of these terms are corrrectly conceptually understood by me. (sorry for the awkward sentence!)


#2

if you seen the topic you linked to, you see i used this code:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

Did you run the code? the getter and setter method give additional control when getting (reading) or setting a property (like myProperty) from object.

some location is vague at best. myProperty is an array, but as you see on the third to last line and last line, we actually see a string. This is because of the getter method (which gets called automatically when we read/get a property of object)

Remove the setter method from the example i used. Then run the code, see the difference. Now the array gets overwritten with the value you set.

So the setter method gives us additional control when we assign a property a value.

you really need to see the getters and setters methods as methods which gives us additional control over a property of an object.


#3

Can I run the code in codepen?


#4

The topic from you continued the discussion contained two platforms you can use, but yes, codepen is also possible


#5

I’ve written the examples below so that I can more easily compare and contrast.

Without setter method:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
    
   
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);
///output: "1 2 3"

With setter

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

///output: "1 2 3"
///          "1 2 3 4"

Is it an accurate assertion that using a get method is similar, but not the same, as creating a variable with var?

The big difference is that it seems like a set method sets something within an object of a class?

On another note, a get method uses something from a object of a class?

I tried to choose my words carefully… Is that correct, the way I explained it?


#6

totally inaccurate, run this code:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

now remove the getter method, and run the code again. See the difference

almost, the set(ter) method sets the property (myProperty in example) of object (myOjbect). The variable names i choice in the example are not by accident

setter method can also set the property of class. Javascript didn’t have classes before es6, only objects. In my example i have an object named myObject.

Defining a class would require the class keyword.

uses something is vague at best. The getter method is automatically called when we read a property value of an object or class.


#7

I’m getting this weird error:

SyntaxError: Missing initializer in const declaration

Is this error referring to the get method not being there?

Also here is my code I am running on JS bin:

const myObject = {
    _myProperty: [1, 2, 3],
    
    
    }, 
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

#8

It seems like it would be untrue that you need a get method before you run a set method. I assume you should be able to run a set method by itself?


#10

it seems we need to implement a getter method, then just use the default:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty;
    },
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

#11

Are you saying one generally needs to run a getter method (default) before a setter method?


#12

No, but it seems a getter method is mandatory. By default i meant just return the property value without any further manipulation:

    get myProperty(){
        // return property
        return this._myProperty;
    },

vs:

    get myProperty(){
        // join the array into string before returning
        return this._myProperty.join(" ");
    },

by running this different codes, you can see the effect of getter method better. I thought we could just get rid of getter method, seems we can’t


#13

So the psuedocode involved with this example is:

  1. The array is recognized by the computer ( I will use "read " meaning "read by computer for the future steps
  2. The get built in function retrieves my property (still not being read by computer to user)
  3. you push 4 onto the object (still not being read by computer to user)
  4. myObject.myProperty is logged to the console
  5. I assume this =4 is somehow connected to the rest?)
  6. Again, how is this diferent than 4?

#14

You are already going wrong at step 2. getter is a method, methods (like functions) only execute when called. The getter method is interpreted by the JS interpreter. It isn’t being called yet, so it doesn’t execute

no, I set a new value to myProperty, which is a property of an object named myObject

setting a new value to this property will cause the setter to execute (JS is calling this method under the hood, that is the whole point of a setter method). Then the setter method pushes 4 to the array stored in myProperty (because that is what we programmed the setter method to do)

general syntax:

object = {
   property: value
}

so in the code we have been using so far, we have an object named myObject, which has one property named myProperty.

myObject also has two methods, a getter and setter method which regulate the behaviour of property named myProperty.


#15

Could you type the psuedo code for me so that I can see how the process works concretely?


#16

We write pseudocode to get a higher level abstraction before implementing the code, but we already implemented the code, so why would we write psuedo-code after that?

If you want to see program flow, insert console.log() to see order of the program, just ensure you print all the right values.


#17

So it sounds like, just to clarify or myself these three things are happening:

  1. we created an object
  2. the get method retrieves a built in function in this speciic example, but it could be prototype.pop too, for example.
  3. The set method creates a new number in this object

2 and 3 work “under the hood” until these tasks are complete. I have the gut feeling that the 4 is retrieved from below the object as well?

Is that correct?

Here is the code I am referring to.

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
       return this._myProperty;
    }, 
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty); 
myObject.myProperty = 4;
console.log(myObject.myProperty);

#18

hold on formatting problems


#19

normally when we have an object with a method:

const myOjbect = {
 myMethod(){
   console.log("hello world");
 } 
}

// execute the method by calling it
myOjbect.myMethod();

we need to call the method when we want to execute the method. However, in case of getters and setters, the method calls are disguised, this:

console.log(myObject.myProperty); 

will call the getter method given we want to get the value of property myProperty. while this:

myObject.myProperty = 4;

will end up calling/executing the setter method, given we set a new value to property myProperty


#20

I get it now. I’m still gonna need to learn coding, but having an understanding of these basics will be helpful for my projects.


#21

This post is more for me so that I can easily refer to it:

How to add properties with dot notation

Please feel no need to respond to it.

It is related to the prior posts because this link shows an example o how to use add properties like I assume you have done in your example.