Introduction
JavaScript does not have classes in the same sense as other object-oriented languages like Java or Ruby. ES6, however, did introduce a syntax for object creation that uses the class keyword. It is basically a new syntax that does the exact same thing as the object constructors and prototypes we learned about in the constructor lesson.
There is a bit of controversy about using the class syntax, however. Opponents argue that class is basically just syntactic sugar over the existing prototype-based constructors and that it’s dangerous and/or misleading to obscure what’s really going on with these objects. Despite the controversy, classes are beginning to crop up in real code bases that you are almost certainly going to encounter such as frameworks like React (especially if you end up working with class-based React code).
Since we’ve already gone fairly in-depth with Constructors, you don’t have too much left to learn here beyond the new syntax. If you choose to use classes in your code (that’s fine!) you can use them much the same way as object constructors.
Lesson overview
This section contains a general overview of topics that you will learn in this lesson.
- Describe the pros and cons of using classes in JavaScript.
- Briefly discuss how JavaScript’s object creation differs from other object-oriented programming languages.
- Explain the differences between an object constructor and a class.
- Explain what “getters” and “setters” are.
- Understand what computed names and class fields are.
- Describe function binding.
- Explain how to implement private class fields and methods.
- Use inheritance with classes.
- Understand why composition is generally preferred to inheritance.
Assignment
- Read this article covering opinions regarding the pros and cons of classes.
- JavaScript.info’s article on Getters and Setters should get you up to speed on “Getters and Setters”, and JavaScript.info’s primer on class syntax is probably just about all you need to start using
classsyntax confidently. - MDN’s docs on classes are, as usual, a great resource for going a little deeper.
- Take a look at the ‘extends’ documentation, including the ‘Mixins’ section. In some frameworks like React, you can use classes to create your components and make them
extendthe core React component which gives you access to all their built-in functionality (though this is not the only way to create components. This will all be covered later in the React section of the course). - Classes can also have private class properties that allow you to implement privacy similarly to factory functions.
- Classes can have static properties and methods which are properties and methods that are accessed on the class itself and not on the instance of a class. This is similar to how some string methods are accessed on the instance of a string itself e.g.
someString.slice(0, 5)whereas some methods are called on the String constructor directly e.g.String.fromCharCode(79, 100, 105, 110).
- Take a look at the ‘extends’ documentation, including the ‘Mixins’ section. In some frameworks like React, you can use classes to create your components and make them
- FunFunFunction’s video on Composition over Inheritance gives a great overview of the topic.
Practice
Go back to your Library project project and refactor it to use class instead of plain constructors. Don’t forget to use the git branch workflow you learned in Revisiting Rock Paper Scissors to work on a new feature. You should get used to working like this!
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
- What are some of the pros and cons of using classes in JavaScript?
- How does JavaScript’s object creation differ from other object-oriented programming languages?
- What differences are there between object constructors and classes?
- What are “getters” & “setters”?
- What are computed names and class fields?
- What is function binding?
- What are static properties?
- What are some private class features?
- How is inheritance used with classes?
- Why is favoring Composition over Inheritance suggested?
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Stephen Mayeux has a Youtube playlist on ES6 classes and some of their methods with easy to follow examples.
- Here are some more examples that try to illustrate the benefits of composition over inheritance.
- w3resource provides a comprehensive collection of exercises on classes.