fix(curriculum): update example codes in js classes review (#66158)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
This commit is contained in:
Aditya Singh
2026-03-09 00:16:21 +05:30
committed by GitHub
parent f1717edae5
commit 7510f608c3
3 changed files with 82 additions and 14 deletions

View File

@@ -175,8 +175,6 @@ console.log(myPizza.type);
Here is the full example:
:::interactive_editor
```js
class Pizza {
constructor(type, price) {
@@ -194,8 +192,6 @@ console.log(myPizza);
console.log(myPizza.type);
```
:::
In addition to methods, you can also define static properties with the `static` keyword.
In this example, we have a static `numberOfPizzasSold` property.

View File

@@ -9,7 +9,7 @@ dashedName: review-javascript-classes
## Basics of Working with Classes
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects, and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
:::interactive_editor
@@ -23,6 +23,9 @@ class Dog {
console.log(`${this.name} says woof!`);
}
}
const dog = new Dog("Gino");
console.log(dog.name); // Gino
```
:::
@@ -47,6 +50,10 @@ const Dog = class {
console.log(`${this.name} says woof!`);
}
};
const dog = new Dog("Gino");
console.log(dog.name); // Gino
dog.bark(); // Gino says woof!
```
:::
@@ -70,6 +77,11 @@ class Car extends Vehicle {
console.log("Honk! Honk!");
}
}
const myCar = new Car("freeCodeCamp Motors", 2019);
console.log(myCar.brand); // freeCodeCamp Motors
console.log(myCar.year); // 2019
myCar.honk(); // Honk! Honk!
```
:::
@@ -92,13 +104,18 @@ class Car extends Vehicle {
this.numDoors = numDoors;
}
}
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
console.log(myCar.brand); // freeCodeCamp Motors
console.log(myCar.year); // 2019
console.log(myCar.numDoors); // 4
```
:::
## Working with Static Methods and Static Properties
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality. Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality.
:::interactive_editor
@@ -123,16 +140,35 @@ class Movie {
let movieA = new Movie("Movie A", 80);
let movieB = new Movie("Movie B", 45);
Movie.compareMovies(movieA, movieB);
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
```
:::
Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
```js
class Pizza {
constructor(type, price) {
this.type = type;
this.price = price;
}
static createMargherita() {
return new this("Margherita", 6.99);
}
}
let myPizza = Pizza.createMargherita();
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
console.log(myPizza.type); // Margherita
```
- **Static Properties**: These properties are used to define values or attributes that are associated with a class itself, rather than with instances of the class. Static properties are shared across all instances of the class and can be accessed without creating an instance of the class.
:::interactive_editor
```js
```ts
class Car {
// Static property
static numberOfWheels = 4;
@@ -154,7 +190,7 @@ class Car {
}
// Accessing static property directly from the class
console.log(Car.numberOfWheels);
console.log(Car.numberOfWheels); // 4
```
:::

View File

@@ -3466,7 +3466,7 @@ The Cache API is a storage mechanism that stores Request and Response objects. W
## Basics of Working with Classes
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects, and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
- **Definition**: Classes in JavaScript are used to define blueprints for creating objects and encapsulating data. Classes include a constructor which is a special method that gets called automatically when a new object is created from the class. It is used to initialize the properties of the object. The `this` keyword is used here to refer to the current instance of the class. Below the constructor, you can have what are called methods. Methods are functions defined inside a class that perform actions or operations on the class's data or state. They are used to define behaviors that instances of the class can perform.
:::interactive_editor
@@ -3480,6 +3480,9 @@ class Dog {
console.log(`${this.name} says woof!`);
}
}
const dog = new Dog("Gino");
console.log(dog.name); // Gino
```
:::
@@ -3504,6 +3507,10 @@ const Dog = class {
console.log(`${this.name} says woof!`);
}
};
const dog = new Dog("Gino");
console.log(dog.name); // Gino
dog.bark(); // Gino says woof!
```
:::
@@ -3527,6 +3534,11 @@ class Car extends Vehicle {
console.log("Honk! Honk!");
}
}
const myCar = new Car("freeCodeCamp Motors", 2019);
console.log(myCar.brand); // freeCodeCamp Motors
console.log(myCar.year); // 2019
myCar.honk(); // Honk! Honk!
```
:::
@@ -3549,13 +3561,18 @@ class Car extends Vehicle {
this.numDoors = numDoors;
}
}
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
console.log(myCar.brand); // freeCodeCamp Motors
console.log(myCar.year); // 2019
console.log(myCar.numDoors); // 4
```
:::
## Working with Static Methods and Static Properties
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality. Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
- **Static methods**: These methods are often used for utility functions that don't need access to the specific state of an object. They are defined within classes to encapsulate related functionality.
:::interactive_editor
@@ -3580,16 +3597,35 @@ class Movie {
let movieA = new Movie("Movie A", 80);
let movieB = new Movie("Movie B", 45);
Movie.compareMovies(movieA, movieB);
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
```
:::
Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
```js
class Pizza {
constructor(type, price) {
this.type = type;
this.price = price;
}
static createMargherita() {
return new this("Margherita", 6.99);
}
}
let myPizza = Pizza.createMargherita();
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
console.log(myPizza.type); // Margherita
```
- **Static Properties**: These properties are used to define values or attributes that are associated with a class itself, rather than with instances of the class. Static properties are shared across all instances of the class and can be accessed without creating an instance of the class.
:::interactive_editor
```js
```ts
class Car {
// Static property
static numberOfWheels = 4;
@@ -3611,7 +3647,7 @@ class Car {
}
// Accessing static property directly from the class
console.log(Car.numberOfWheels);
console.log(Car.numberOfWheels); // 4
```
:::