JavaScript Classes Tutorial

In JavaScript you can use the OOP (Object-Oriented-Programming) feature of “classes” to construct objects which are then useful resources for your script/application.

Learn all about classes in JavaScript in this video.

⭐️ Course Contents ⭐️
⌨️ (00:00) The Basics
⌨️ (14:40) Getters and Setters
⌨️ (22:43) Static Methods
⌨️ (30:11) Inheritance and Extends
⌨️ (40:22) Polymorphism
⌨️ (46:00) Classes in Practice

Learn more about JavaScript in this full course: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5

🎥Tutorial by dcode. Check out the dcode channel for more great tutorials: https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g

🐦dcode on Twitter: @dcodeyt

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Comments

SharisM says:

repeatedly calling the update method when using add() is a bit confusing. Why does it not remove the “dcode” when you add “dog”? Isn’t it supposed to remove all the

  • items if there is already a firsChild
  • dcode
  • ? Can you please elaborate more on this? Thank you.

    freeCodeCamp.org says:

    Here are some more JavaScript resources:
    JavaScript basics course: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5
    Another JavaScript course: https://www.youtube.com/watch?v=_y9oxzTGERs
    Learn JavaScript in a text-based curriculum: https://www.freecodecamp.org

    Tyrese W. says:

    This is free information!!!

    Carmelo N says:

    Useful lesson!

    Justin Cook says:

    Is it best practice to put an ‘_’ in front of parameters which have the same name as a property?

    Hưng Nguyễn Việt says:

    love FCC

    Ross Findlay says:

    Great lesson, thanks!

    Abhishek Kumar says:

    Thank u for this awesome video

    slasher4k says:

    What you call “Instance methods” like the getArea method in the rectangle class is actually a prototype method that is shared between all instances of the class.If you were to do something like

    const prototype = Object.getPrototypeOf(myRectangle1);
    prototype.getArea = () => ‘i am a new method’;

    console.log(myRectangle1.getArea()); // ‘i am a new method’
    console.log(myRectangle2.getArea()); // ‘i am a new method’

    they would both print out “I am a new method”.

    as also shown by the fact that myRectangle1.hasOwnProperty(‘getArea’); is false

    to be a real instance method the constructor would have to be defined as follows:

    constructor(_width, _height, _color){
    this.width = _width;
    this.height = _height;
    this.color = _color;

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

    then if we do the following:

    myRectangle1.getArea = ()=> ‘i am awesome’;

    console.log(myRectangle1.getArea()); // ‘i am awesome’
    console.log(myRectangle2.getArea()); // 170

    myRectangle2.getArea() doesn’t change this time as it is it’s own instance method and this time myRectangle2.hasOwnProperty(‘getArea’); is true

    also the add method in the listBinding class is not the best example to show, if you have a list of 1000 items and want to add one thing you are doing 1000 deletions and 1001 insertions into the dom which is one of the slowest things you could do.

    Waqas Ishaq says:

    Super easy to understand. Thank you

    Al Cher says:

    Great tutorial, the last part was especially cool! It’s funny how you are referring to a DOM element as ‘physical’ though 🙂 but I can relate.
    On 15:26 why not just say listElement.innerHTML = “”?

    Evgeny Viner says:

    Thank you. I liked the video, it is good and I’ve learned quite a bit. Just one thing about the last example of DOM manipulation – it was a bit harder to understand, because I felt that not all was laid out in a clear and correct order, so it was a bit confusing. But still – great job, thanks again.

    CORNEL STAN says:

    the line is not correct, correct IS :

    printDescription(){console.log(‘I am rectangle of ‘+ this.width +’ x ‘ + this.height + ‘ and I am: ‘ + this.color)};

    this Guy do not know what about is talking !

    Himanshu says:

    thank you for this video. 🙂

    Tien Minh says:

    What is the font of that VSCode?

    Michael Hicks says:

    Thank you for such clear explanations.

    Learn Excel says:

    Thank You for your useful video!

    kootahaitoo says:

    Comment.content(“BOOM”);

    sri ram says:

    Super explanation 🙂

    Michael Curtis says:

    Thanks I now understand react lol

    raghavendra mesta says:

    Thank you for your effort!

     Write a comment

    *

    Do you like our videos?
    Do you want to see more like that?

    Please click below to support us on Facebook!