Mastering ES6 Classes: Key Concepts for JavaScript Interviews
Written on
Introduction to ES6 Classes
Welcome to Day 23 of the 100 Days of JavaScript Interview Prep! Today, we delve into ES6 classes, focusing on private fields and methods, which are crucial for your interview preparation.
Understanding Private Fields and Methods
One of the most significant advancements in ES6 is the introduction of private fields and methods. These private elements can only be accessed and modified within the class itself. To define a private field, prefix it with a #.
Here's a basic example to illustrate this:
class MyCard {
#address; // Private property
constructor(address) {
this.#address = address; // Assigning a value to the private property}
// Public method to retrieve the address
getAddress() {
return this.#address;}
// Public method to update the address
setAddress(address) {
this.#address = address;}
}
const card = new MyCard('123 Road Street');
console.log(card.getAddress()); // Output: 123 Road Street
// Updating the address using the public method
card.setAddress('New Road 1223');
console.log(card.getAddress()); // Output: New Road 1223
Common Errors with Private Fields
Trying to access or modify the private property directly will lead to errors, as shown in the following examples.
#### Attempting Direct Access
const card = new MyCard('123 Road Street');
// This will throw an error
console.log(card.#address);
#### Attempting Direct Modification
const card = new MyCard('123 Road Street');
// This will also throw an error
card.#address = 'New Road 1234';
Exploring Static Private Fields and Methods
Question 2: What do you understand by static private ES6 methods and fields? Please explain with an example.
ES6 also allows for static private fields and methods, which combine the properties of static members with those of private visibility. To declare a static private member, use the static keyword along with the # prefix.
Here's an example:
class MyCard {
// Static private field
static #address = 'Test 123';
// Public static method to retrieve the address
static getAddress() {
return MyCard.#address;}
// Public static method to change the address
static changeAddress(newAddress) {
MyCard.#address = newAddress;}
}
// Accessing static private fields and methods
console.log(MyCard.getAddress()); // Output: Test 123
MyCard.changeAddress('212 Address');
console.log(MyCard.getAddress()); // Output: 212 Address
Error Scenarios with Static Private Members
Accessing static private fields or methods directly will also result in errors:
console.log(MyCard.#address); // This will throw an error
MyCard.#address = 'New Address'; // This will also throw an error
Note: Always proceed with caution when dealing with classes in JavaScript.
Mastering JavaScript - EVERYTHING You Need To Know
This video provides an in-depth overview of JavaScript fundamentals, perfect for those preparing for interviews.
JavaScript Mastery Complete Course | JavaScript Tutorial For Beginner to Advanced
This comprehensive tutorial covers JavaScript from beginner to advanced levels, ensuring you have the knowledge necessary to excel in interviews.
Conclusion
With these insights into ES6 classes, private fields, and methods, you're well on your way to mastering JavaScript for your upcoming interviews. Keep practicing, share your knowledge, and stay curious! Happy coding!