Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Working with Static Properties on a Class

    Tyler ClarkTyler Clark
    javascriptJavaScript

    Classes are syntactic sugar over functions and functions are also referred to as "callable" objects. So it is possible to treat a function like an object and give them key / value properties like objects. The static keyword gives us the ability to assign a key / value property to a class itself, not an instance of that class. This lesson will walk you through using the static keyword and even show how to replicate it with regular functions.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: The static keyword sets the property to the class itself. It does not go on the inaudible object, but again on this class. They cannot be called on instances of the class. If you use the new keyword against this, you cannot easily access the static properties.

    If we knew inaudible rectangle, we have no access to the callRectangle function. As you can see, we're just going to get an error. What's neat about static properties is that they can be called by the super keyword and subclass components.

    Here, we have a square class that's extending rectangle. It itself also has a static property of WhoAmI as a function. We're going to return a string, "Hello all," plus super.callRectangle.

    When we console.log calling the static WhoAmI method property, we're going to see "Hello all. Hello world." As we can see, we're concatenating our return string from the static method WhoAmI on the square class with Rectangle's callRectangle method.

    If you wanted to see this static keyword recreated using a regular function and not a class, all we need to do is convert this class into a function and give the function a property called callRectangle and assigning it a function.

    As you can see, a console.log gives us the same result of "Hello, all. Hello, world." Again, this is because we are using just a regular function and giving it a property of callRectangle that lives directly on the function like the static keyword represents, and it has a function that returns the string "Hello, world."