Wrapping Up
The syntax for creating classes in modern JavaScript is on par with many other languages that support the object-oriented paradigm. A number of traps that troubled programmers in the past have been closed with the updated syntax and behavior of classes. It is less noisy and less error prone to define classes, define methods and properties, and define getters and setters. In addition to creating classes, we can create dynamic anonymous classes using class expressions. In this chapter, after learning how to create your own classes, you also learned how to use the new Set, Map, and their weak reference alternatives that are kind to memory usage.
JavaScript has also significantly improved inheritance, and we’ll focus on that in the next chapter.
Exercises
These exercises will help you practice the rich JavaScript syntax for creating classes. You can find answers to these exerciseshere.
Exercise 1
Implement a class that produces the expected result.
| | 'use strict'; |
| | |
| | //Your code does here |
| | |
| | const book = new Book('Who Moved My Cheese?', 'Spencer Johnson', 96); |
| | console.log(book.title); //Who Moved My Cheese |
| | console.log(book.pages); //96 |
| | |
| | try { |
| | book.pages = 96; |
| | } catch(ex) { |
| | console.log(ex.message); |
| | //Cannot set property pages of #<Book> which has only a getter |
| | } |
| | |
| | console.log(book.copiesSold); //0 |
| | book.copiesSold = 1; |
| | console.log(book.copiesSold); //1 |
| | |
| | try { |
| | book.copiesSold = -2; |
| | } catch(ex) { |
| | console.log(ex.message);//Value can't be negative |
| | } |
| | console.log(book.copiesSold); //1 |
Exercise 2
Let’s play with some static members in this exercise.
| | 'use strict'; |
| | |
| | //Your code goes here |
| | |
| | console.log(Tax.stateRate); //0.08 |
| | console.log(Tax.forAmount(100)); // 8 |
| | |
| | const forAmount = Tax.forAmount; |
| | this.stateRate = 0.01; |
| | console.log(forAmount.call(this, 100)); //8 |
Exercise 3
We’ll use some computed properties in this exercise.
| | 'use strict'; |
| | |
| | //Your code goes here |
| | |
| | const todo = new Todo(); |
| | console.log(todo['learn JavaScript']); //'done' |
| | console.log(todo['write elegant code']);//'work-in-progress' |
| | console.log(todo['automate tests']);//'work-in-progress' |
| | console.log(todo.completedCount); //1 |
Exercise 4
Let’s use Map instead of the handcrafted Todo class.
| | 'use strict'; |
| | |
| | //Your code goes here |
| | |
| | const todo = createTodo(); //Returns a Map |
| | console.log(todo.get('learn JavaScript')); //'done' |
| | console.log(todo.get('write elegant code'));//'work-in-progress' |
| | console.log(todo.get('automate tests'));//'work-in-progress' |
| | console.log(completedCount(todo)); //1 |
Exercise 5
In this exercise we will create a Set and process the elements in it.
| | 'use strict'; |
| | |
| | //Your code goes here |
| | |
| | const sports = create(['Soccer', 'Football', 'Cricket', 'Tennis', 'soccer']); |
| | |
| | console.log(sports.has('FOOTBALL')); //true |
| | console.log(sports.has('Football')); //false |
| | console.log(sports.size); //4 |
| | |
| | const inLowerCase = toLowerCase(sports); |
| | console.log(inLowerCase.has('football')); |
| | console.log(inLowerCase.size); //4 |