JavaScript GETTERS & SETTERS are awesome!!! 📐

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 40

  • @BroCodez
    @BroCodez  ปีที่แล้ว +8

    // ---------- EXAMPLE 1 ----------
    class Rectangle{
    constructor(width, height){
    this.width = width;
    this.height = height;
    }
    set width(newWidth){
    if(newWidth > 0){
    this._width = newWidth;
    }
    else{
    console.error("Width must be a positive number");
    }
    }
    set height(newHeight){
    if(newHeight > 0){
    this._height = newHeight;
    }
    else{
    console.error("Height must be a positive number");
    }
    }
    get width(){
    return `${this._width.toFixed(1)}cm`;
    }

    get height(){
    return `${this._height.toFixed(1)}cm`;
    }
    get area(){
    return `${(this._width * this._height).toFixed(1)}cm`;
    }
    }
    const rectangle = new Rectangle(2, 3);
    console.log(rectangle.width);
    console.log(rectangle.height);
    console.log(rectangle.area);
    // ---------- EXAMPLE 2 ----------
    class Person{
    constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    }
    set firstName(newFirstName){
    if(typeof newFirstName === "string" && newFirstName.length > 0){
    this._firstName = newFirstName;
    }
    else{
    console.error("First name must be a non-empty string");
    }
    }
    set lastName(newLastName){
    if(typeof newLastName === "string" && newLastName.length > 0){
    this._lastName = newLastName;
    }
    else{
    console.error("Last name must be a non-empty string");
    }
    }
    set age(newAge){
    if(typeof newAge === "number" && newAge >= 0){
    this._age = newAge;
    }
    else{
    console.error("Age must be a non-negative number");
    }
    }

    get firstName(){
    return this._firstName;
    }
    get lastName(){
    return this._lastName;
    }
    get fullName(){
    return this._firstName + " " + this._lastName;
    }
    get age(){
    return this._age;
    }
    }
    const person = new Person("Spongebob", "Squarepants", 30);
    console.log(person.firstName);
    console.log(person.lastName);
    console.log(person.fullName);
    console.log(person.age);

    • @Loki_chan
      @Loki_chan 7 หลายเดือนก่อน

      txs bro for these lessons

  • @Sernik_z_rodzynkamii
    @Sernik_z_rodzynkamii 10 หลายเดือนก่อน +16

    What a great explanation! I am doing the Codecademy course recently and their examples of getters and setters weren't that clear to me.

    • @angeljoachin1962
      @angeljoachin1962 4 หลายเดือนก่อน +2

      I came for the same reason, how has been your journey??

  • @yunusdurdygulyyew9270
    @yunusdurdygulyyew9270 9 หลายเดือนก่อน +2

    That's the best explanation that I could find online. Thank you for the work you do!

  • @antcannon
    @antcannon 9 หลายเดือนก่อน +2

    420 69’s parents was living a wild life. The birth certificate did not have any setters and getters.
    Great video. This is going to help me tackle more coding challenges and create cleaner code.

  • @vanta6lack
    @vanta6lack 7 หลายเดือนก่อน +1

    As said by previous commentators, this is literally the best explanation that I've come across so far and Getters and Setters do seem to be quite extraordinary. Huge thank you!

  • @cryssias
    @cryssias 10 หลายเดือนก่อน

    this playlist has been soooo helpful! thank you for the amazing free content. hugs from brazil ✨

  • @matheusbalbinot2469
    @matheusbalbinot2469 8 หลายเดือนก่อน

    best explanation i've ever seen here on youtube.
    thank u so much bro!!!

  • @piotrmazgaj
    @piotrmazgaj 3 หลายเดือนก่อน

    This is my seal. I have watched the entire video, understood it, and I can explain it in my own words, thus I have gained knowledge. This is my seal.

  • @user-rj7ez2qy4d
    @user-rj7ez2qy4d ปีที่แล้ว +1

    hello I needed to know about getters and setters today and you upload the video in time, thanks🙂

  • @shafiulAlamShafi
    @shafiulAlamShafi ปีที่แล้ว +1

    Thanks for explaining!!

  • @jayboy6430
    @jayboy6430 2 หลายเดือนก่อน

    wow fantastic breakdown

  • @hunin27
    @hunin27 ปีที่แล้ว +1

    thanks bro. would you mind doing a javascript project with all the things we learned? At least i could try it myself as well before seeing how you do it

  • @tonytodd7011
    @tonytodd7011 ปีที่แล้ว +1

    Great explanation, thanks Bro!

  • @Carrymejane
    @Carrymejane 9 หลายเดือนก่อน

    You are live saver bro ❤

  • @johnnyklash5883
    @johnnyklash5883 3 หลายเดือนก่อน

    "Person(420, 69, "pizza")" sounds like a good Saturday night to me.😂

  • @helioobianchi
    @helioobianchi 8 หลายเดือนก่อน +1

    wait, did Javascript become OOP?
    edit: no. after some googling, I learned that the OOP features introduced in ES6 are syntax sugar. Javascript is classified as a prototype-based procedural language (it's neither object oriented nor functional 😮) . so it's not meant to implement the known OOP design patterns. but it's useful nevertheless.
    can't wait to learn all those features so I can start writing some type related bugs 😊

  • @khalidmadaraobito8651
    @khalidmadaraobito8651 ปีที่แล้ว +1

    Perfect💥

  • @maenam4520
    @maenam4520 9 หลายเดือนก่อน

    Great job man! 👏👏 that is really awesome and simple explanation straight to my understanding.
    Big thanks 🫶

  • @SreesaSarma
    @SreesaSarma 11 หลายเดือนก่อน +1

    Thanks Bro!!

  • @maenam4520
    @maenam4520 9 หลายเดือนก่อน

    Greet content 👌
    Why should the age to be >= in the Person class since
    True >= 0 //true
    Just use >= 1
    True >= 1 // false

  • @helioobianchi
    @helioobianchi 8 หลายเดือนก่อน

    11:30 once you make a setter for an attribute, does a getter become necessary to access it (vice-versa maybe)? is it why it's printing 'undefined'?
    looks like I have some reading and testing to do

    • @williamhu9567
      @williamhu9567 3 หลายเดือนก่อน

      ​@czel-za-oczyszinoju why does the "_age" property get set to whatever the "age" property was in the constructor?
      edit: if you give the constructor an invalid "age", it'll be undefined. looks like the setters are called when the constructor is.
      edit2: if you try using "age" instead of "_age" in the setter, it'll keep calling the setter recursively and stack overflow... kinda makes sense now.

  • @baxti7
    @baxti7 ปีที่แล้ว +1

    perfect

  • @Steve18795
    @Steve18795 11 วันที่ผ่านมา

    Thanks

  • @Rafael_Perez21
    @Rafael_Perez21 หลายเดือนก่อน

    thanks

  • @gergvakapoharat4501
    @gergvakapoharat4501 5 หลายเดือนก่อน

    Hi, are getters/setters exportable? I mean if you export myObject.myGetter it exports the value, not the getter itself, so if it changes later, the value won't follow in the export, or copy, etc. thank you

  • @mixxxer
    @mixxxer 6 หลายเดือนก่อน

    What is the benefit of doing get area() versus a method on the class like getArea()?

    • @liammcgarrigle
      @liammcgarrigle 5 หลายเดือนก่อน +2

      because instead of doing ‘console.log( rectangle.getArea() )’ you can do ‘console.log( rectangle.area )’
      so it is like accessing a property and not a method, even though it is like a method is really getting the data under the hood

    • @Syuzaki1301
      @Syuzaki1301 3 หลายเดือนก่อน

      @@liammcgarrigleto add to that. Usually it is differentiated between state and behaviour when creating properties/methods. Methods should perform or adhere to some kind of behaviour while standard properties allow access to some sort of "state" of the instantiated object. Since area would be a state value, it makes sense to access it using standard property accessing syntax thus a getter is used to make it more conform.

    • @williamhu9567
      @williamhu9567 3 หลายเดือนก่อน

      @@liammcgarrigle in python, "properties" are called "attributes" and this rectangle.area would be considered a "property". this is kind of messing with me haha...

  • @baxti7
    @baxti7 ปีที่แล้ว

    If you do an intermediate web project in html and css🙂☺

    • @Mayukh04
      @Mayukh04 8 หลายเดือนก่อน

      nothing happens with just html css tech is advancing Javascript,React JS,Next JS etc are crucial to build intermediate and advanced projects

  • @alcidesJoyable
    @alcidesJoyable 24 วันที่ผ่านมา

    how did you know my name and age?????
    420, 69, 'pizza' the third

  • @STR-DP
    @STR-DP 8 หลายเดือนก่อน

    37😁

  • @Azoraqua
    @Azoraqua 10 หลายเดือนก่อน

    Typescript be like..

  • @michaelwinkler9257
    @michaelwinkler9257 ปีที่แล้ว

    1er

  • @vanta6lack
    @vanta6lack 7 หลายเดือนก่อน

    420, 69 and pizza. Really? ))