The ECMA Script 6 changes are due to be released in early 2015. Many large players in the web development landscape have already taken steps to start testing out some of the new functionality and have created tooling to help other developers start getting acclimated. Additionally, according to Mozilla, the feature set has already been frozen, so at this point, it’s safe to start learning what’s new and identify useful functionality for your particular use cases.
Exciting New ECMASript 6 Features
Scoping and the ‘let’ Keyword
The following is an example of what an object making use of prototypes would look like today. Within this example, we create a Vehicle object that contains the startEngine() and stopEngine() methods. Then we create a new instance of this Vehicle object into a variable called v, and finally call the startEngine() and stopEngine() methods against it.
However, classes provide more value than simply cleaning up the definition presentation. Let’s say we know that when a Vehicle is created, the engine always starts in the “Off” state and that starting the engine toggles this to “On” and stopping the engine restores it to “Off” once again. We can easily instantiate the class using a constructor to provide this functionality. Take a look at the following example:
In this example, we can see that when the Vehicle object is instantiated into the v variable, it sets a key inside the object with the name engineState that can be accessed through the this object. When we call the getEngineState() method, it returns the value of that engineState key which is initialized to “Off”. When we start the engine with the appropriate method, the engineState key is still defined in the object as it saves the state of the properties, so it changes the value to “On” and reflects that in the output. Finally, when we turn the engine off again, the value correctly returns to “Off”.
Getter and Setter Functions for Properties
Now, we start off by creating an object named ‘person’ and we assign both a ‘firstName’ and ‘lastName’ value to it. Because this isn’t a constant object, we can easily re-assign the values to this instance and so we change the ‘firstName’ property to “whit” rather than leaving it blank. Finally, we create another object, ‘fullName’ that would return the entire name of the user; in this case we would see “whit Waldo”. Now, this wouldn’t be ideal – let’s say that the programmer intended to pass in a proper first name and simply made a mistake. Well, since we’re directly setting the value on the property, there’s no way for us to easily provide any sort of validation against this new value and when we create the full name, that just exposes even more opportunities for implementation mistakes. Rather, let’s look at what ECMAScript 6 offers us in terms of properties to deal with this:
In this example, we have another Person class with a get/set pair for both the firstName and lastName properties and then a mere get function for the fullName property. When the Person object is initialized, it requires that the firstName and lastName values be initialized, and in the constructor, it will then call the firstName and lastName setter properties, respectively, to set the backing values for each, adding the validation to check that the first letter of each name is capitalized. At the first console.log, it would then result in an output of “Average Joe” as that retrieves the combined values of the firstName and lastName property get functions. Then we reassign the firstName and lastName values using the setter functions and that will then yield “Whit Waldo”.
Inheritance means that we’re able to create a class that’s capable of having all the properties and methods of another class without having to duplicate all the code. Rather, we can indicate that we’re extending the other class and then add additional functionality within this new class.
In this example, we have a Vehicle class that receives a tireCount value when a new instance is created. We then have a Truck and a Motorcycle class that both inherit the properties and methods of the Vehicle class. We could optionally add additional properties to each of these new classes that are specific to those sorts of objects but that don’t affect the base Vehicle class. When we create a new instance of the Truck, we need to pass in the number of tires that it’ll construct the Vehicle from. If we get the tireCount value from the Truck, we’ll see that we have 4 tires as that’s what was set in our base Vehicle class. When we do the same thing in the Motorcycle class, we’ll see the 2 tires that we initialized with as well.
How would we specify the number of tires in the constructor as well as pass in a value indicating what sort of transmission it uses? We would need to make use of the super keyword in this case per the following example:
In this case, we can see that after creating the new instance of the Truck, we’d correctly set the parameters that are specific to the Truck class as well as pass a tire count of ‘4’ back to the Vehicle base class to be set in its parameter, yielding each of the expected values in the console.log statements at the bottom. Additionally, we can create the Motorcycle object and use the super keyword to set the number of tires for this object to ‘2’, also seen in the output above.