ES6 Class Variable Alternatives: From Design Philosophy to Practical Evolution

ES6 Class Design Philosophy and Historical Context

During the ES5 era, developers commonly utilized framework-provided class simulation mechanisms to define classes and class variables, a pattern that gained widespread popularity within the community. The typical ES5 class definition approach appears as follows:

// ES5
FrameWork.Class({
    variable: 'string',
    variable2: true,
    init: function(){
        // Initialization logic
    },
    addItem: function(){
        // Method implementation
    }
});

This pattern offered a comfortable development experience, allowing developers to directly declare variables and methods within class definitions. However, when ES6 introduced native class syntax, developers discovered they couldn't directly declare class variables within the class body:

// ES6
class MyClass {
    const MY_CONST = 'string'; // <-- This is not possible in ES6
    constructor(){
        this.MY_CONST;
    }
}

This limitation wasn't an oversight in technical implementation but rather an intentional design decision by the TC39 committee after careful consideration.

Deep Rationale Behind Design Decisions

According to documentation from the ES6 "maximally minimal classes" proposal, the committee explicitly decided against providing syntax for direct declaration of class variables or prototype data properties. This decision was based on several key considerations:

First, the primary purpose of class declarations is to define and declare class capabilities rather than its members. ES6 class definitions should establish the contract between the class and its users, focusing on method interfaces rather than internal state.

Second, defining variables on the prototype chain generally isn't considered best practice. Prototype properties are shared across all instances, which can lead to unexpected state sharing issues. In contrast, instance properties initialized through constructors provide independent state copies for each instance, better aligning with encapsulation principles in object-oriented programming.

Traditional Solution: Constructor Initialization

The most straightforward solution involves initializing instance variables within the constructor:

class MyClass {
    constructor(){
        this.variable = 'string';
        this.variable2 = true;
        // Additional properties can be added
    }
}

While this approach works effectively, when classes need to handle 20-30 or more parameters, constructors can become bloated, impacting code readability and maintainability.

Modern Evolution: Class Property Syntax

With the ongoing development of the JavaScript language, class property syntax has reached Stage 3 proposal status and gained widespread support in modern JavaScript environments. This syntax enables direct property definition within the class body:

class MyClass {
    variable = 'string';
    variable2 = true;
    
    constructor(){
        // Constructor logic
    }
    
    addItem(){
        // Method implementation
    }
}

This syntax is already available through toolchains like Babel or TypeScript and enjoys native support in Chrome 74 and later versions. It provides a development experience similar to ES5 frameworks while maintaining syntactic consistency with ES6 classes.

Static Properties and Class Variable Simulation

For genuine class-level variables (similar to static variables in other languages), implementation can be achieved through direct assignment after class definition:

class MyClass {
    // Class method definitions
}
MyClass.foo = 'bar';

Within class methods, these class properties can be accessed via this.constructor.foo or directly through the class name MyClass.foo. It's important to note that these properties typically aren't automatically available to instances.

Enhanced Solution for Instance Access to Class Properties

When instance-level access to class properties is required, implementation can be achieved through getter method definitions:

class MyClass {
    get foo() {
        return this.constructor.foo;
    }
}
MyClass.foo = 'bar';

This approach enables instances to access the value of class property MyClass.foo through instance.foo, achieving transparent instance-level access to class variables.

The Object-Oriented Nature of JavaScript

It's crucial to emphasize that JavaScript remains fundamentally a prototype-based language rather than a class-based language. Even after the introduction of class syntax in ES6, the underlying prototype mechanism remains unchanged. In functions like function X() {}, X.prototype.constructor points to X itself. When the new operator is used, a new object inheriting from X.prototype is created, and any undefined properties are looked up through the prototype chain.

Future Prospects and Best Practices

With the ongoing development of ES7 and subsequent versions, class property initializer proposals continue to advance actively. Developers should:

• Prefer class property syntax for simple instance properties
• Utilize static properties for class-level variables
• Employ constructor initialization in environments requiring backward compatibility
• Consider using superset languages like TypeScript for enhanced type support and syntactic features

This evolution demonstrates JavaScript's design philosophy of continuously incorporating community best practices and developer needs while maintaining backward compatibility.