In this article, we will discuss two object-oriented programming concepts introduced in ES6, classes, and object literals.
Classes are one of the most awaited features introduced in ES6. If you have worked with Java or Python, then you will be no stranger to classes.
A significant difference between classes and functions is hoisting.
Note: the code within the class body is always executed in a strict mode. It prevents certain actions from taking place within the class body and throws exceptions.
- Class keyword
- Class expressions
Class Definition using the Class Keyword
In the example below, we have defined a Person class using the class keyword:
Class Definition using the Class Expressions
In the example below, we have used the class expressions to define two classes (named and unnamed) and access their name property:
There can be only one constructor function in a class. Adding more than one contractor method will result in a syntax error.
Classes contain methods and properties. These class members are defined within the body of the class i.e. inside the curly brackets.
In more technical terms, methods are functions associated with the class and properties are variables associated with the class.
Enhanced Object Literals
ES6 has introduced a more precise way of declaring object literals. We’ll discuss three major ways introduced in ES6 to make object literals more precise.
- Shorthand for initializing properties
- Shorthand for defining methods
- Computing property names and expressions
Shorthand for Initializing Properties
Before ES6, initializing object properties was kind of tedious. In the following coding example, we’ll demonstrate how object properties were defines before and after ES6.
Notice how we no longer need to assign each parameter value to the property. It basically checks if the object property key has a corresponding variable name and assigns the value of the variable to the object property. If no such variable is found, then it simply throws an error.
Shorthand for Defining Methods
Before ES6, a function keyword was used to define functions in objects. Once again, ES6 eliminated the unnecessary keywords and operators to make the code cleaner.
In the following coding example, we have demonstrated how functions were defined before and after the enhanced object literals.
Computing Property Names and Expressions
Computed expressions are an interesting and innovative enhancement to the object literals in ES6. You must’ve seen something similar in the destructuring assignment topic.
Basically, there are two ways to specify a key to an object property: dot notation and square brackets notation. The bracket notation enables us to access values using an expression.
With computed property expressions, we can use square brackets to provide a regular expression instead of a regular property name. The property name is evaluated using a regular expression.
In the following example, we will demonstrate how property names can be computed.
The value of the name was computed to “brand”, which is what we used to access the property value.
Similarly, in the following example, the value of ‘i’ is evaluated and used as a property name: