ES6 class variable alternatives

Question

Currently in ES5 many of us are using the following pattern in frameworks to create classes and class variables  which is comfy        ES 5 FrameWork Class        variable   string       variable2  true       init  function                 addItem  function                  In ES6 you can create classes natively  but there is no option to have class variables      ES6 class MyClass       const MY CONST    string       lt -- this is not possible in ES6     constructor            this MY CONST            Sadly  the above won t work  as classes only can contain methods    I understand that I can this myVar   true in constructor   but I don t want to  junk  my constructor  especially when I have 20-30  params for a bigger class   I was thinking of many ways to handle this issue  but haven t yet found any good ones   For example  create a ClassConfig handler  and pass a parameter object  which is declared separately from the class  Then the handler would attach to the class  I was thinking about WeakMaps also to integrate  somehow    What kind of ideas would you have to handle this situation

User · Answer

ES7 class member syntax   ES7 has a solution for  junking  your constructor function  Here is an example    x000D   x000D  class Car   x000D     x000D    wheels   4  x000D    weight   100  x000D   x000D    x000D   x000D  const car   new Car    x000D  console log car wheels  car weight   x000D   x000D   x000D    The above example would look the following in ES6    x000D   x000D  class Car   x000D   x000D    constructor     x000D      this wheels   4  x000D      this weight   100  x000D      x000D   x000D    x000D   x000D  const car   new Car    x000D  console log car wheels  car weight   x000D   x000D   x000D    Be aware when using this that this syntax might not be supported by all browsers and might have to be transpiled an earlier version of JS    Bonus  an object factory    x000D   x000D  function generateCar wheels  weight    x000D   x000D    class Car   x000D   x000D      constructor      x000D   x000D      wheels   wheels  x000D      weight   weight  x000D   x000D      x000D   x000D    return new Car    x000D   x000D    x000D   x000D   x000D  const car1   generateCar 4  50   x000D  const car2   generateCar 6  100   x000D   x000D  console log car1 wheels  car1 weight   x000D  console log car2 wheels  car2 weight   x000D   x000D   x000D

User · Answer

Well  you can declare variables inside the Constructor   class Foo       constructor             var name    foo          this method   function                 return name                    var foo   new Foo    foo method

User · Answer

Just define a getter   x000D   x000D  class MyClass     get MY CONST      return  string        constructor            console log   MyClass MY CONST    this MY CONST          var obj   new MyClass    x000D   x000D   x000D

User · Answer

Long thread  not sure if its already listed as an option      A simple alternative for contsants only  would be defining the const outside of class   This will be accessible only from the module itself  unless accompanied with a getter  This way prototype isn t littered and you get the const      will be accessible only from the module itself const MY CONST    string    class MyClass           optional  if external access is desired     static get MY CONST   return MY CONST           access example     static someMethod            console log MY CONST

User · Answer

If its only the cluttering what gives the problem in the constructor why not implement a initialize method that intializes the variables  This is a normal thing to do when the constructor gets to full with unnecessary stuff  Even in typed program languages like C  its normal convention to add an Initialize method to handle that

User · Answer

In your example   class MyClass       const MY CONST    string       constructor            this MY CONST            Because of MY CONST is primitive https   developer mozilla org en-US docs Glossary Primitive we can just do   class MyClass       static get MY CONST             return  string             get MY CONST             return this constructor MY CONST            constructor             alert this MY CONST     this constructor MY CONST           alert MyClass MY CONST   new MyClass     alert  string   true   But if MY CONST is reference type like static get MY CONST    return   string     alert output is string  false  In such case delete operator can do the trick   class MyClass       static get MY CONST             delete MyClass MY CONST          return MyClass MY CONST    string             get MY CONST             return this constructor MY CONST            constructor             alert this MY CONST     this constructor MY CONST           alert MyClass MY CONST   new MyClass     alert  string   true   And finally for class variable not const   class MyClass       static get MY CONST             delete MyClass MY CONST          return MyClass MY CONST    string             static set U YIN YANG value          delete MyClass MY CONST        MyClass MY CONST   value            get MY CONST             return this constructor MY CONST            set MY CONST value            this constructor MY CONST   value            constructor             alert this MY CONST     this constructor MY CONST           alert MyClass MY CONST   new MyClass    alert  string  true MyClass MY CONST     string  42   alert MyClass MY CONST   new MyClass    alert  string  42   true

User · Answer

You can mimic es6 classes behaviour    and use your class variables        Look mum    no classes       Helper const  constructor   Symbol    const  extends    parent  child    gt    Object assign Object create parent   child   const  new    object     args    gt      let instance   Object create object     instance  constructor  call instance     args     return instance    const  super    parent  context     args    gt      parent  constructor  call context     args       class var Foo       classVariable  true        constructor     constructor  who       this me   who      this species    fufel              methods   identify        return  I am     this me            class extends Foo var Bar    extends Foo          constructor     constructor  who        super Foo  this  who       this subtype    barashek              methods   speak        console log  Hello      this identify            bark num       console log  Woof             var a1    new Foo   a1    var b1    new Bar   b1    console log a1  b1   console log  b1 classVariable   b1 classVariable     I put it on GitHub

User · Answer

Still you can t declare any classes like in another programming languages  But you can create as many class variables  But problem is scope of class object  So According to me  Best way OOP Programming in ES6 Javascript -   class foo     constructor           decalre your all variables      this MY CONST   3 14       this x   5       this y   7          or call another method to declare more variables outside from constructor          now create method level object reference and public level property      this MySelf   this          you can also use var modifier rather than property but that is not working good      let self   this MySelf         code                    set MySelf v         this mySelf   v          get MySelf v         return this mySelf          myMethod cd            now use as object reference it in any method of class       let self   this MySelf           now use self as object reference in code

User · Answer

The way I solved this  which is another option  if you have jQuery available   was to Define the fields in an old-school object and then extend the class with that object  I also didn t want to pepper the constructor with assignments  this appeared to be a neat solution   function MyClassFields        this createdAt   new Date       MyClassFields prototype         id           type           title           createdAt   null      class MyClass       constructor               extend this new MyClassFields                -- Update Following Bergi s comment   No JQuery Version   class SavedSearch        constructor             Object assign this               id                   type                   title                   createdAt  new Date                           You still do end up with  fat  constructor  but at least its all in one class and assigned in one hit   EDIT  2  I ve now gone full circle and am now assigning values in the constructor  e g   class SavedSearch        constructor             this id               this type               this title               this createdAt   new Date              Why  Simple really  using the above plus some JSdoc comments  PHPStorm was able to perform code completion on the properties  Assigning all the vars in one hit was nice  but the inability to code complete the properties  imo  isn t worth the  almost certainly minuscule  performance benefit

User · Answer

2018 update  There is now a stage 3 proposal - I am looking forward to make this answer obsolete in a few months  In the meantime anyone using TypeScript or babel can use the syntax  varName   value  Inside a class declaration expression body and it will define a variable  Hopefully in a few months weeks I ll be able to post an update  Update  Chrome 74 now ships with this syntax working   The notes in the ES wiki for the proposal in ES6  maximally minimal classes  note   There is  intentionally  no direct declarative way to define either prototype data properties  other than methods  class properties  or instance property Class properties and prototype data properties need be created outside the declaration  Properties specified in a class definition are assigned the same attributes as if they appeared in an object literal   This means that what you re asking for was considered  and explicitly decided against  but    why  Good question  The good people of TC39 want class declarations to declare and define the capabilities of a class  Not its members  An ES6 class declaration defines its contract for its user  Remember  a class definition defines prototype methods - defining variables on the prototype is generally not something you do  You can  of course use  constructor        this foo   bar    In the constructor like you suggested  Also see the summary of the consensus  ES7 and beyond A new proposal for ES7 is being worked on that allows more concise instance variables through class declarations and expressions - https   esdiscuss org topic es7-property-initializers

User · Answer

As Benjamin said in his answer  TC39 explicitly decided not to include this feature at least for ES2015   However  the consensus seems to be that they will add it in ES2016   The syntax hasn t been decided yet  but there s a preliminary proposal for ES2016 that will allow you to declare static properties on a class   Thanks to the magic of babel  you can use this today   Enable the class properties transform according to these instructions and you re good to go   Here s an example of the syntax   class foo     static myProp    bar    someFunction         console log this myProp          This proposal is in a very early state  so be prepared to tweak your syntax as time goes on

User · Answer

What about the oldschool way    class MyClass        constructor count              this countVar   1   count           MyClass prototype foo    foo   MyClass prototype countVar   0            var o1   new MyClass 2   o2   new MyClass 3   o1 foo    newFoo    console log  o1 foo o2 foo   console log  o1 countVar o2 countVar     In constructor you mention only those vars which have to be computed   I like prototype inheritance for this feature -- it can help to save a lot of memory in case if there are a lot of never-assigned vars

User · Answer

Just to add to Benjamin s answer     class variables are possible  but you wouldn t use prototype to set them   For a true class variable you d want to do something like the following   class MyClass    MyClass foo    bar     From within a class method that variable can be accessed as this constructor foo  or MyClass foo     These class properties would not usually be accessible from to the class instance  i e  MyClass foo gives  bar  but new MyClass   foo is undefined  If you want to also have access to your class variable from an instance  you ll have to additionally define a getter   class MyClass       get foo             return this constructor foo           MyClass foo    bar     I ve only tested this with Traceur  but I believe it will work the same in a standard implementation   JavaScript doesn t really have classes  Even with ES6 we re looking at an object- or prototype-based language rather than a class-based language   In any function X        X prototype constructor points back to X  When the new operator is used on X  a new object is created inheriting X prototype  Any undefined properties in that new object  including constructor  are looked up from there  We can think of this as generating object and class properties

User · Answer

Since your issue is mostly stylistic  not wanting to fill up the constructor with a bunch of declarations  it can be solved stylistically as well   The way I view it  many class based languages have the constructor be a function named after the class name itself  Stylistically we could use that that to make an ES6 class that stylistically still makes sense but does not group the typical actions taking place in the constructor with all the property declarations we re doing  We simply use the actual JS constructor as the  declaration area   then make a class named function that we otherwise treat as the  other constructor stuff  area  calling it at the end of the true constructor     use strict    class MyClass          only declare your properties and then call this ClassName    from here     constructor            this prop1    blah 1           this prop2    blah 2           this prop3    blah 3           this MyClass                  all sorts of other  constructor  stuff  no longer jumbled with declarations     MyClass             doWhatever              Both will be called as the new instance is constructed   Sorta like having 2 constructors where you separate out the declarations and the other constructor actions you want to take  and stylistically makes it not too hard to understand that s what is going on too   I find it s a nice style to use when dealing with a lot of declarations and or a lot of actions needing to happen on instantiation and wanting to keep the two ideas distinct from each other     NOTE  I very purposefully do not use the typical idiomatic ideas of  initializing   like an init   or initialize   method  because those are often used differently  There is a sort of presumed difference between the idea of constructing and initializing  Working with constructors people know that they re called automatically as part of instantiation  Seeing an init method many people are going to assume without a second glance that they need to be doing something along the form of var mc   MyClass    mc init     because that s how you typically initialize  I m not trying to add an initialization process for the user of the class  I m trying to add to the construction process of the class itself   While some people may do a double-take for a moment  that s actually the bit of the point  it communicates to them that the intent is part of construction  even if that makes them do a bit of a double take and go  that s not how ES6 constructors work  and take a second looking at the actual constructor to go  oh  they call it at the bottom  I see   that s far better than NOT communicating that intent  or incorrectly communicating it  and probably getting a lot of people using it wrong  trying to initialize it from the outside and junk  That s very much intentional to the pattern I suggest     For those that don t want to follow that pattern  the exact opposite can work too  Farm the declarations out to another function at the beginning  Maybe name it  properties  or  publicProperties  or something  Then put the rest of the stuff in the normal constructor     use strict    class MyClass       properties             this prop1    blah 1           this prop2    blah 2           this prop3    blah 3              constructor             this properties            doWhatever              Note that this second method may look cleaner but it also has an inherent problem where properties gets overridden as one class using this method extends another  You d have to give more unique names to properties to avoid that  My first method does not have this problem because its fake half of the constructor is uniquely named after the class

User · Answer

Babel supports class variables in ESNext  check this example   class Foo     bar   2   static iha    string     const foo   new Foo    console log foo bar  foo iha  Foo bar  Foo iha      2  undefined  undefined   string

User · Answer

This is a bit hackish combo of static and get  works for me  class ConstantThingy          static get NO REENTER  INIT                 if ConstantThingy  NO REENTER  INIT   null                   ConstantThingy  NO REENTER  INIT   new ConstantThingy false true                             return ConstantThingy  NO REENTER  INIT                elsewhere used  var conf   ConstantThingy NO REENTER  INIT  if conf init

[javascript] ES6 class variable alternatives

`ES7` class member syntax:

Bonus: an object factory:

Examples related to javascript

Examples related to class

Examples related to ecmascript-6