From 7510f608c3154e440eee955c5ddf93c6d64dfd2a Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Mon, 9 Mar 2026 00:16:21 +0530 Subject: [PATCH] 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> --- .../673403dbf5c9835898632c84.md | 4 -- .../6723d13d756751caf871d59c.md | 46 +++++++++++++++++-- .../6723d3cfdd0717d3f1bf27e3.md | 46 +++++++++++++++++-- 3 files changed, 82 insertions(+), 14 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md b/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md index e5b3da9fb93..f536f9e9495 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md @@ -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. diff --git a/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md b/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md index 945e5325290..5e0de9cc45e 100644 --- a/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md +++ b/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md @@ -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 ``` ::: diff --git a/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md index 89810a9543f..fc4d983110e 100644 --- a/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md +++ b/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md @@ -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 ``` :::