DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Prototype Pattern in JavaScript
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • Overcoming React Development Hurdles: A Guide for Developers
  • Why React Router 7 Is a Game-Changer for React Developers

Trending

  • Building Scalable and Resilient Data Pipelines With Apache Airflow
  • Java's Quiet Revolution: Thriving in the Serverless Kubernetes Era
  • Enhancing Avro With Semantic Metadata Using Logical Types
  • Evolution of Cloud Services for MCP/A2A Protocols in AI Agents
  1. DZone
  2. Coding
  3. JavaScript
  4. JavaScript Class vs Prototype - Organizing JavaScript Code

JavaScript Class vs Prototype - Organizing JavaScript Code

Dive into JavaScript to understand key differentiators between use of a Class and a Prototype - plus the impact each has on Lightning Web Components.

By 
John Vester user avatar
John Vester
DZone Core CORE ·
Jul. 06, 21 · Analysis
Likes (16)
Comment
Save
Tweet
Share
175.7K Views

Join the DZone community and get the full member experience.

Join For Free

The story about the JavaScript language is quite interesting. For those who are not aware, below are some highlights of the popular multi-paradigm language:

  • Brendan Eich (@BrendanEich) a programmer at Netscape Communications Corporation created Mocha in just 10 days in 1995.

  • Mocha would soon be named JavaScript—which has nothing at all to do with Java—and was likely a marketing approach to leverage the popularity of Java.

  • JavaScript was introduced as an option to provide dynamic programming experiences at a time when websites were mostly static.

  • Since 1996, ECMAScript Language Specification (ECMA-262) has defined and standardized the JavaScript language, now in the 11th edition.

  • JavaScript runs on approximately 97% of all browsers around the world.

  • JavaScript has become the leading choice for client frames like Angular, React and Vue.js, plus the Node.js run-time.

Since JavaScript became mainstream, I have been a part of projects which have used JavaScript in one manner or another. In those early days, JavaScript was referenced by HTML files to perform simple validation before sending requests to a back-end service. Now, every web-based project I have worked on in the last 7 years uses a client framework built entirely with JavaScript.

However, JavaScript is not free from design challenges, which I noted in my "Will JavaScript Pass the Test of Time?" publication back in June of 2017.

One of the items not mentioned back then is a discussion on when to use a class and when to use a prototype in JavaScript. My goal of this article is to focus on these concepts—even when utilizing an existing framework, like Salesforce Lightning Web Components (LWC).

The Prototype Concept in JavaScript

For the purposes of this article, it is best to talk about the prototype concept in JavaScript first. 

In JavaScript, all objects inherit properties and methods from a prototype. Let's consider the following prototype example:

JavaScript
 
function Vehicle(vinNumber, manufacturer, productionDate, fuelType) {
  this.manufacturer = manufacturer;
  this.vinNumber = vinNumber;
  this.productionDate = productionDate;
  this.fuelType = fuelType;
}

Vehicle.prototype.vehicleInformation = function() {
  var productionDate = new Date(this.productionDate * 1000);
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var year = productionDate.getFullYear();
  var month = months[productionDate.getMonth()];
  var day = productionDate.getDate();

  var friendlyDate = month + ' '  + day + ', ' + year;
  return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' was produced on ' + friendlyDate + ' using a fuel type of ' + this.fuelType;
}

As a result of this code, there is a Vehicle object available and a new instance can be created using the following code:

JavaScript
 
let rogue = new Vehicle('5N1FD4YXN11111111', 'Nissan', 1389675600, 'gasoline');

With this information in place, the vehicleInformation() function can be called using the following approach:

JavaScript
 
alert(rogue.vehicleInformation());

This will produce an alert dialog box containing this message: 

"Nissan vehicle with VIN Number = 5N1FD4YXN11111111 was produced on Jan 14, 2014 using a fuel type of gasoline" 

As one might expect, a second prototype called SportUtilityVehicle can be introduced to further define a given type of vehicle:

JavaScript
 
function SportUtilityVehicle(vinNumber, manufacturer, productionDate, fuelType, drivetrain) {
  Vehicle.call(this, vinNumber, manufacturer, productionDate, fuelType);
  this.drivetrain = drivetrain;
}

Now, we can new up a SportUtilityVehicle instead of a simple Vehicle.

JavaScript
 
let rogue = new SportUtilityVehicle('5N1FD4YXN11111111', 'Nissan', 1389675600, 'gasoline', 'AWD');

We can also define a new version with the SportUtilityVehicle prototype:

JavaScript
 
SportUtilityVehicle.prototype.vehicleInformation = function() {
  return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' utilizes drivetrain = ' + this.drivetrain + ' and runs on ' + this.fuelType;
}

Now, when the vehicleInformation() function is called using the following approach:

JavaScript
 
alert(rogue.vehicleInformation());

An alert dialog box appears, containing the following message: 

"Nissan vehicle with VIN Number = 5N1FD4YXN11111111 utilizes drivetrain = AWS and runs on gasoline"

The JavaScript Class

Starting with ECMAScript 2015 (released as the 6th edition in June 2015), JavaScript introduced the concept of a class. While this might pique the interest of developers using languages like Java, C# and C++, the goal of introducing the class option was to allow classes to be created using an easier and cleaner syntax. In fact, the documentation goes on to state that classes are merely "syntactic sugar" to make things easier for the developer.

Converting the prior example from prototypes to classes would appear as shown below:

JavaScript
 
class Vehicle {
  constructor(vinNumber, manufacturer, productionDate, fuelType) {
    this.manufacturer = manufacturer;
    this.vinNumber = vinNumber;
    this.productionDate = productionDate;
    this.fuelType = fuelType;
  }

  vehicleInformation() {
    var productionDate = new Date(this.productionDate * 1000);
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var year = productionDate.getFullYear();
    var month = months[productionDate.getMonth()];
    var day = productionDate.getDate();

    var friendlyDate = month + ' '  + day + ', ' + year;
    return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' was produced on ' + friendlyDate + ' using a fuel type of ' + this.fuelType;
  }
}

class SportUtilityVehicle extends Vehicle {
  constructor(vinNumber, manufacturer, productionDate, fuelType, drivetrain) {
    super(vinNumber, manufacturer, productionDate, fuelType);
    this.drivetrain = drivetrain;
  }

  vehicleInformation() {
    return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' utilizes drivetrain = ' + this.drivetrain + ' and runs on ' + this.fuelType;
  }
}

If we need to add getters and setters to the SportUtilityVehicle class, the class can be updated as shown below:

JavaScript
 
class SportUtilityVehicle extends Vehicle {
  constructor(vinNumber, manufacturer, productionDate, fuelType, drivetrain) {
    super(vinNumber, manufacturer, productionDate, fuelType);
    this.drivetrain = drivetrain;
  }

  vehicleInformation() {
    return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' utilizes drivetrain = ' + this.drivetrain + ' and runs on ' + this.fuelType;
  }

  get drivetrain() {
    return this._drivetrain;
  }

  set drivetrain(newDrivetrain) {
    this._drivetrain = newDrivetrain;
  }
}

As you can see, the syntax resembles languages like Java or C#. The class approach also allows functions and attributes belonging to the prototype chain to not reference the Object.prototype syntax. The one requirement is that the constructor is always called "constructor".

JavaScript Class v Prototype

As noted above, a class in JavaScript is merely syntactic sugar to make things easier for feature developers working in JavaScript. While the approach allows for a more-common design for those coming from languages like Java, C# or C++, many Javascript purists advise against using classes at all.

In fact, one concerning issue is mentioned by Michael Krasnov in "Please stop using classes in JavaScript" article:

Binding issues. As class constructor functions deal closely with this keyword, it can introduce potential binding issues, especially if you try to pass your class method as a callback to an external routine.

Michael goes on to present four other reasons to avoid using Javascript classes, but advocates of the class option were quick to lessen the weight of his thoughts.

Starting in 2021, I have been adhering to the following mission statement for any IT professional:

"Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else."

When it comes to use of a class or prototype in JavaScript, I feel like this is a decision that should be made by the team supporting and maintaining the code base. If their comfort level has no issues following the prototype approach, then they should design their components accordingly. However, if the preference is to leverage the class concept, developers on that team should have an understanding of the binding challenge noted above, but should proceed forward and stay within their comfort zone.

Impact on Lightning Web Components

Salesforce introduced Lightning Web Components (LWC) a few years ago, which I talked about in the "Salesforce Offering JavaScript Programming Model" article. Nearly three years later, I find myself talking about the impact of using the class and prototype approaches for Salesforce developers.

The quick answer is ... it doesn't matter. Salesforce allows for Lightning Web Components to leverage a prototype or class. JavaScript’s typical model for inheritance is via the prototype. But to appeal to developers who are used to classical inheritance, there's this syntactical sugar to help developers implement prototypal inheritance by using an approach that looks very much like classical inheritance. 

And so, when it comes to LWC—which is all about inheritance since LWC has built an awesome base class component for you to extend—you also can take advantage of this syntactical sugar. 

You don't need to worry about prototypal inheritance even though it's all happening under the hood. Just do the classical inheritance thing, and you're golden. 

Here's an example of how this might look: 

JavaScript
 
import { LightningElement } from 'lwc';

export default class VehicleComponent extends LightningElement {
  // properties go here

  vehicleInformation() {
    return this.manufacturer + ' vehicle with VIN Number = ' + this.vinNumber + ' utilizes drivetrain = ' + this.drivetrain + ' and runs on ' + this.fuelType;
  }
}

See? LWC—knowing that JavaScript gives you this syntactical sugar—makes it so easy for you.

Conclusion

I will admit that JavaScript is not the language I have spent a majority of my time in developing features. Aside from client development in Angular and small endeavors using Node.js, my primary work as a services developer often focuses on other language options.

At the same time, using the class approach over the prototype approach provides a similar bridge to Java, C# and C++ developers. While there is not a right answer here, it is important to have an understanding behind how both class and prototype work in JavaScript.

In the end, our role is all about being able to support your code base, resolve defects, and quickly turn around features and functionality. The implemented approach should always be purely driven by the feature team's understanding and ability to maintain the selected standards.

Have a really great day!

JavaScript Prototype dev

Opinions expressed by DZone contributors are their own.

Related

  • Prototype Pattern in JavaScript
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • Overcoming React Development Hurdles: A Guide for Developers
  • Why React Router 7 Is a Game-Changer for React Developers

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!