DEV Community

Midhul P
Midhul P

Posted on

How to use JavaScript Classes in real projects

#javascript #tutorial #webdev #programming

JavaScript classes are a great way to organize code. Let’s see how you can use them in a simple To-Do List app.

Declaring a Class

We define a Task class to manage tasks:

class Task { constructor(description, dueDate) { this.description = description; this.dueDate = dueDate; this.isDone = false; } markAsDone() { this.isDone = true; } }
Enter fullscreen mode Exit fullscreen mode

Creating Instances

You can create tasks like this:

const task1 = new Task('Write blog post', '2023-11-15'); task1.markAsDone(); console.log(task1); // Task { description: 'Write blog post', dueDate: '2023-11-15', isDone: true }
Enter fullscreen mode Exit fullscreen mode

Inheritance

Extend the Task class for specific types of tasks:

class ShoppingTask extends Task { constructor(description, dueDate, items) { super(description, dueDate); this.items = items; } } const shoppingTask = new ShoppingTask('Buy groceries', '2023-11-20', ['Apples', 'Milk']); console.log(shoppingTask);
Enter fullscreen mode Exit fullscreen mode

Static Methods & Getters/Setters

You can add static methods for sorting tasks and use getters and setters to manage data validation.

For a more detailed guide, check out my full post on Medium: How to Use JavaScript Classes in Real Projects.

Top comments (0)