0

I was under the impression that both arrow functions and classes were a feature of ES6. Then why do these arrow functions not work within the class? Would anyone be able to explain what the problem is here? Why doesn't the following work?

class Car {
    constructor(brand) {
        this.setBrand(brand);
    }
    
    /*setBrand(brand) {
        this.brand = brand;
    }*/
    
    /*getBrand() {
        return this.brand;
    }*/
    
    setBrand = brand => this.brand = brand; 
    
    getBrand = () => this.brand;
    
    getAd = () => `${this.brand} is the best brand out there!!`;
}

mycar = new Car("Ford");

console.log( mycar.getAd() );

I get the following error.

setBrand = brand => this.brand = brand; 
             ^

SyntaxError: Unexpected token =
    at Module._compile (internal/modules/cjs/loader.js:723:23)
Grateful
  • 9,685
  • 10
  • 45
  • 77
  • It's not related to arrow functions, `class Thing { a = 1 }` will fail for the same reason. – jonrsharpe Jul 23 '20 at 10:16
  • Are you sure your environment supports [public class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Browser_compatibility)? – Nick Parsons Jul 23 '20 at 10:17
  • @jonrsharpe Thank you for the answer buddy. Unfortunately, I don't quite understand your answer. So what would be the right way to do the above class? – Grateful Jul 23 '20 at 10:20
  • 1
    Either: 1. use a version of Node (12+, see e.g. [node.green](https://node.green/#ESNEXT-candidate--stage-3--instance-class-fields)) that does support it; 2. transpile (using e.g. [Babel](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)) for runtimes that don't support it; or 3. just write regular methods. – jonrsharpe Jul 23 '20 at 10:21
  • 1
    Aaah... Okay! So you are saying that the code itself is correct. But it is not recognised due to my environment limitations. So to make this work, I would have to upgrade Node or transpile using babel. Excellent. Thank you so much! – Grateful Jul 23 '20 at 10:24
  • 1
    You could also move field declaration to constructor `constructor(brand) { this.setBrand = brand => this.brand = brand; ... this.setBrand(brand)}` – Yury Tarabanko Jul 23 '20 at 10:24
  • @jonrsharpe It seems that most modern browsers actually support ES6 without the need for transpiling. But since the latest Node LTS version is currently version 10, I assume that most production systems will be using this and so do not support ES6 without transpilers. True? – Grateful Jul 23 '20 at 10:35
  • The feature you're asking about here is **not** ES6; it's an experimental language feature, at stage 3 with TC39. Per https://node.green Node 10.9+ supports 99% of ES6, everything except "proper tail calls" (10.8 and earlier also lack `Array.prototype.values`). – jonrsharpe Jul 23 '20 at 10:37
  • @jonrsharpe Wait... Arrow functions are not part of ES6? Or is using them within classes not part of ES6? – Grateful Jul 23 '20 at 10:46
  • Arrow functions are part of ES6. Instance class fields (whether or not their values are arrow functions, hence [my initial comment](https://stackoverflow.com/questions/63051866/why-arent-the-arrow-functions-working-here-within-the-es6-class?noredirect=1#comment111498680_63051866)) are not. – jonrsharpe Jul 23 '20 at 10:57
  • @jonrsharpe Interesting!! But weren't classes a part of ES6? If so, what good would they be without any class fields? So how did ES6 classes make it without class fields? – Grateful Jul 23 '20 at 12:33

0 Answers0