From e0db4fa20f341f8de18ab38a2e1be6bd73451dba Mon Sep 17 00:00:00 2001 From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com> Date: Tue, 20 Jan 2026 17:36:48 +0530 Subject: [PATCH] feat(curriculum): add interactive examples to javascript classes (#65330) Co-authored-by: Jeevankumar-S --- .../6723d13d756751caf871d59c.md | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md b/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md index c1a934317ee..945e5325290 100644 --- a/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md +++ b/curriculum/challenges/english/blocks/review-javascript-classes/6723d13d756751caf871d59c.md @@ -5,12 +5,14 @@ challengeType: 31 dashedName: review-javascript-classes --- -# --description-- +# --interactive-- ## 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. +:::interactive_editor + ```js class Dog { constructor(name) { @@ -23,6 +25,8 @@ class Dog { } ``` +::: + To create a new instance of the class, you will use the `new` keyword followed by the class name: ```js @@ -31,6 +35,8 @@ const dog = new Dog("Gino"); You can also create classes as class expressions. This is where the class is anonymous and assigned to a variable. +:::interactive_editor + ```js const Dog = class { constructor(name) { @@ -43,10 +49,14 @@ const Dog = class { }; ``` +::: + ## Class Inheritance - **Definition**: In programming, inheritance allows you to define classes that inherit properties and methods from parent classes. This promotes code reuse and establishes a hierarchical relationship between classes. A parent class is a class that acts like a blueprint for other classes. It defines properties and methods that are inherited by other classes. A child class is a class that inherits the properties and methods of another class. Child classes can also extend the functionality of their parent classes by adding new properties and methods. In JavaScript, we use the `extends` keyword to implement inheritance. This keyword indicates that a class is the child class of another class. +:::interactive_editor + ```js class Vehicle { constructor(brand, year) { @@ -62,8 +72,11 @@ class Car extends Vehicle { } ``` +::: + The `super` keyword is used to access the parent class's methods, constructors, and fields. +:::interactive_editor ```js class Vehicle { @@ -81,10 +94,14 @@ class Car extends Vehicle { } ``` +::: + ## 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. +:::interactive_editor + ```js class Movie { constructor(title, rating) { @@ -109,8 +126,12 @@ let movieB = new Movie("Movie B", 45); Movie.compareMovies(movieA, movieB); ``` +::: + - **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 class Car { // Static property @@ -136,6 +157,8 @@ class Car { console.log(Car.numberOfWheels); ``` +::: + # --assignment-- Review the JavaScript Classes topics and concepts.