Questions tagged [class-fields]

29 questions
188
votes
4 answers

How to use arrow functions (public class fields) as class methods?

I'm new to using ES6 classes with React, previously I've been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a…
Ben
  • 4,595
  • 7
  • 30
  • 42
88
votes
5 answers

How do I make a "public static field" in an ES6 class?

I'm making a Javascript class and I'd like to have a public static field like in Java. This is the relevant code: export default class Agent { CIRCLE: 1, SQUARE: 2, ... This is the error I get: line 2, col 11, Class properties must be…
aebabis
  • 3,392
  • 3
  • 18
  • 39
52
votes
5 answers

Correct use of arrow functions in React

I am using ReactJS with Babel and Webpack and using ES6 as well as the proposed class fields for arrow functions. I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the…
kojow7
  • 7,165
  • 11
  • 60
  • 109
33
votes
4 answers

How to avoid bind or inline arrow functions inside render method

We should avoid method binding inside render because during re-rendering it will create the new methods instead of using the old one, that will affect the performance. So for the scenarios like this:
Mayank Shukla
  • 80,295
  • 14
  • 134
  • 129
24
votes
2 answers

Why are derived class property values not seen in the base class constructor?

I wrote some code: class Base { // Default value myColor = 'blue'; constructor() { console.log(this.myColor); } } class Derived extends Base { myColor = 'red'; } // Prints "blue", expected "red" const x = new…
Ryan Cavanaugh
  • 164,706
  • 43
  • 239
  • 219
21
votes
2 answers

Declare a class property outside of a class method

See how x and y are declared in constructor: class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } is there an way to declare properties outside of functions for…
Cisum Inas
  • 6,390
  • 9
  • 30
  • 50
17
votes
3 answers

Eslint does not allow static class properties

I'm current developing an API on Node 12.14.1 and using Eslint to help me write the code. Unfortunately it does not allow me to set static class properties as shown below: class AuthManager { static PROP = 'value' } The following error is given:…
Lucas Fabre
  • 948
  • 1
  • 7
  • 20
17
votes
2 answers

unexpected token = for class properties in node 8.4

running the following code in node (v8.4) class TodoStore { todos = []; get completedTodosCount() { return this.todos.filter( todo => todo.completed === true ).length; } report() { if…
Elad Katz
  • 7,159
  • 4
  • 33
  • 65
14
votes
2 answers

What is the difference between class method vs property function vs property arrow function in typescript?

I was wondering - what is the difference between class method, class property which is a function and class property which is an arrow function? Does the 'this' keyword behave differently in the different variants of the method? class Greeter { …
Combine
  • 2,868
  • 23
  • 28
11
votes
1 answer

How to use private class fields in nodejs 12?

In the current release of nodejs i.e. 12.x.x, we can declare private class fields by the #some_varible notation. The # notation would make the variable private field for that particular class. class Foo { #some_varible = 10; } I have the…
Rajan Sharma
  • 1,821
  • 3
  • 16
  • 29
10
votes
3 answers

When using React Is it preferable to use fat arrow functions or bind functions in constructor?

When creating a React class, which is preferable? export default class Foo extends React.Component { constructor (props) { super(props) this.doSomething = this.doSomething.bind(this) } doSomething () { ... } } or export default class…
davegri
  • 1,836
  • 2
  • 21
  • 43
8
votes
1 answer

Why are arrow functions as static members values not lexically scoped?

class Foo { static v = 123; static bar = () => this.v; } console.log(Foo.bar()); I expect this code to return undefined, because arrow functions are lexically scoped, hence this must be eagerly bound to the outer scope. Yet, it returns…
zerkms
  • 230,357
  • 57
  • 408
  • 498
6
votes
1 answer

Arrow vs classic method in ES6 class

Is there any reason to write classic syntax of ES6 methods? class MyClass { myMethod() { this.myVariable++; } } When I use myMethod() as callback on some event, I must write something like this (in JSX): // Anonymous…
Vesmy
  • 842
  • 2
  • 10
  • 23
5
votes
1 answer

What is the difference between class fields and properties in Javascript

I'm reading class fields proposal for JavaScript. I don't understand why the authors call it 'fields' and not properties. MDN docs in class article speak about instance properties declared inside constructor and in next section about field…
bifi
  • 73
  • 4
4
votes
3 answers

What are "class fields" in JavaScript?

I was reading about JavaScript classes, and came across this term "public class fields syntax". On digging a bit deeper into it I came across this Babel's documentation on class properties. Can someone please explain - implementation-wise what are…
Aaditya Sharma
  • 2,125
  • 1
  • 19
  • 34
1
2