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

    *

    Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


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

    Please click below to support us on Facebook!

    Send this to a friend

    ▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours