Skip to content

Commit 7510f60

Browse files
AdityaSingh-18huyenltnguyenJeevankumar-s
authored
fix(curriculum): update example codes in js classes review (freeCodeCamp#66158)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
1 parent f1717ed commit 7510f60

3 files changed

Lines changed: 82 additions & 14 deletions

File tree

curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,6 @@ console.log(myPizza.type);
175175

176176
Here is the full example:
177177

178-
:::interactive_editor
179-
180178
```js
181179
class Pizza {
182180
constructor(type, price) {
@@ -194,8 +192,6 @@ console.log(myPizza);
194192
console.log(myPizza.type);
195193
```
196194

197-
:::
198-
199195
In addition to methods, you can also define static properties with the `static` keyword.
200196

201197
In this example, we have a static `numberOfPizzasSold` property.

curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ dashedName: review-javascript-classes
99

1010
## Basics of Working with Classes
1111

12-
- **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.
12+
- **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.
1313

1414
:::interactive_editor
1515

@@ -23,6 +23,9 @@ class Dog {
2323
console.log(`${this.name} says woof!`);
2424
}
2525
}
26+
27+
const dog = new Dog("Gino");
28+
console.log(dog.name); // Gino
2629
```
2730

2831
:::
@@ -47,6 +50,10 @@ const Dog = class {
4750
console.log(`${this.name} says woof!`);
4851
}
4952
};
53+
54+
const dog = new Dog("Gino");
55+
console.log(dog.name); // Gino
56+
dog.bark(); // Gino says woof!
5057
```
5158

5259
:::
@@ -70,6 +77,11 @@ class Car extends Vehicle {
7077
console.log("Honk! Honk!");
7178
}
7279
}
80+
81+
const myCar = new Car("freeCodeCamp Motors", 2019);
82+
console.log(myCar.brand); // freeCodeCamp Motors
83+
console.log(myCar.year); // 2019
84+
myCar.honk(); // Honk! Honk!
7385
```
7486

7587
:::
@@ -92,13 +104,18 @@ class Car extends Vehicle {
92104
this.numDoors = numDoors;
93105
}
94106
}
107+
108+
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
109+
console.log(myCar.brand); // freeCodeCamp Motors
110+
console.log(myCar.year); // 2019
111+
console.log(myCar.numDoors); // 4
95112
```
96113

97114
:::
98115

99116
## Working with Static Methods and Static Properties
100117

101-
- **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.
118+
- **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.
102119

103120
:::interactive_editor
104121

@@ -123,16 +140,35 @@ class Movie {
123140
let movieA = new Movie("Movie A", 80);
124141
let movieB = new Movie("Movie B", 45);
125142

126-
Movie.compareMovies(movieA, movieB);
143+
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
127144
```
128145

129146
:::
130147

148+
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.
149+
150+
```js
151+
class Pizza {
152+
constructor(type, price) {
153+
this.type = type;
154+
this.price = price;
155+
}
156+
157+
static createMargherita() {
158+
return new this("Margherita", 6.99);
159+
}
160+
}
161+
162+
let myPizza = Pizza.createMargherita();
163+
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
164+
console.log(myPizza.type); // Margherita
165+
```
166+
131167
- **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.
132168

133169
:::interactive_editor
134170

135-
```js
171+
```ts
136172
class Car {
137173
// Static property
138174
static numberOfWheels = 4;
@@ -154,7 +190,7 @@ class Car {
154190
}
155191

156192
// Accessing static property directly from the class
157-
console.log(Car.numberOfWheels);
193+
console.log(Car.numberOfWheels); // 4
158194
```
159195

160196
:::

curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3466,7 +3466,7 @@ The Cache API is a storage mechanism that stores Request and Response objects. W
34663466
34673467
## Basics of Working with Classes
34683468
3469-
- **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.
3469+
- **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.
34703470
34713471
:::interactive_editor
34723472
@@ -3480,6 +3480,9 @@ class Dog {
34803480
console.log(`${this.name} says woof!`);
34813481
}
34823482
}
3483+
3484+
const dog = new Dog("Gino");
3485+
console.log(dog.name); // Gino
34833486
```
34843487
34853488
:::
@@ -3504,6 +3507,10 @@ const Dog = class {
35043507
console.log(`${this.name} says woof!`);
35053508
}
35063509
};
3510+
3511+
const dog = new Dog("Gino");
3512+
console.log(dog.name); // Gino
3513+
dog.bark(); // Gino says woof!
35073514
```
35083515
35093516
:::
@@ -3527,6 +3534,11 @@ class Car extends Vehicle {
35273534
console.log("Honk! Honk!");
35283535
}
35293536
}
3537+
3538+
const myCar = new Car("freeCodeCamp Motors", 2019);
3539+
console.log(myCar.brand); // freeCodeCamp Motors
3540+
console.log(myCar.year); // 2019
3541+
myCar.honk(); // Honk! Honk!
35303542
```
35313543
35323544
:::
@@ -3549,13 +3561,18 @@ class Car extends Vehicle {
35493561
this.numDoors = numDoors;
35503562
}
35513563
}
3564+
3565+
const myCar = new Car("freeCodeCamp Motors", 2019, 4);
3566+
console.log(myCar.brand); // freeCodeCamp Motors
3567+
console.log(myCar.year); // 2019
3568+
console.log(myCar.numDoors); // 4
35523569
```
35533570
35543571
:::
35553572
35563573
## Working with Static Methods and Static Properties
35573574
3558-
- **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.
3575+
- **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.
35593576
35603577
:::interactive_editor
35613578
@@ -3580,16 +3597,35 @@ class Movie {
35803597
let movieA = new Movie("Movie A", 80);
35813598
let movieB = new Movie("Movie B", 45);
35823599

3583-
Movie.compareMovies(movieA, movieB);
3600+
Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.
35843601
```
35853602
35863603
:::
35873604
3605+
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.
3606+
3607+
```js
3608+
class Pizza {
3609+
constructor(type, price) {
3610+
this.type = type;
3611+
this.price = price;
3612+
}
3613+
3614+
static createMargherita() {
3615+
return new this("Margherita", 6.99);
3616+
}
3617+
}
3618+
3619+
let myPizza = Pizza.createMargherita();
3620+
console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 }
3621+
console.log(myPizza.type); // Margherita
3622+
```
3623+
35883624
- **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.
35893625
35903626
:::interactive_editor
35913627
3592-
```js
3628+
```ts
35933629
class Car {
35943630
// Static property
35953631
static numberOfWheels = 4;
@@ -3611,7 +3647,7 @@ class Car {
36113647
}
36123648

36133649
// Accessing static property directly from the class
3614-
console.log(Car.numberOfWheels);
3650+
console.log(Car.numberOfWheels); // 4
36153651
```
36163652
36173653
:::

0 commit comments

Comments
 (0)