I am new to front-end development and JavaScript, I am going through JavaScript ES6 classes, anonymous functions and function declarations. I am trying to use the concept of anonymous functions in an ES6 class but I am going wrong syntactically.

I tried in following way which did not work:

class ChatController {
    constructor(a) {
        this.a = a;
        this.a ++;
        console.log("hello world");
    }
   var getChat = function() {
       console.log(this.a);
     }
}

What am I doing wrong?

Is it possible to use anonymous functions in ES6 classes?

I am new to front-end development and JavaScript, I am going through JavaScript ES6 classes, anonymous functions and function declarations. I am trying to use the concept of anonymous functions in an ES6 class but I am going wrong syntactically.

I tried in following way which did not work:

class ChatController {
    constructor(a) {
        this.a = a;
        this.a ++;
        console.log("hello world");
    }
   var getChat = function() {
       console.log(this.a);
     }
}

What am I doing wrong?

Is it possible to use anonymous functions in ES6 classes?

• javascript
• ecmascript-6
• es6-class

• 1 No, it's not possible (unless you put them inside the constructor). Why are you trying to do that? A class contains only method definitions. – Bergi Commented Jun 28, 2018 at 13:01
• i am migrating a widget code from dojo js , and there all the functions are anonymous and the frame work supported it, here instead of widget in dojo i'm trying to using javascript class and it is not allowing me to use anonymous functions, if i write regular functions every thing will go to global scope and i don't want that, so i am trying to use anonymous functions – Satyaaditya Commented Jun 28, 2018 at 13:16
• 1 @Satyaaditya There is not much difference in scope of anonymous and named function. Second, your getChat is not part of class. Using this.a will now work. Instead, try public get getChat() { return this.a } and put it inside class – Rajesh Commented Jun 28, 2018 at 13:19
• @Satyaaditya Please check the following sample. It might help you. – Rajesh Commented Jun 28, 2018 at 13:23
• @Satyaaditya Please post your original code and your attempt at converting it to ES6. There's not much we can tell from this toy example. – Bergi Commented Jun 28, 2018 at 13:36

1 Answer 1

You shouldn't add anonymous functions to your JavaScript classes, instead declare your functions/methods in the body of the class.

...however

Note

The examples below are presented here for the sake of possibility, not for remendation! Some of the examples below, when assigning anonymous functions to the class/prototype, instead of declaring them in the body of the class, are considered bad practices for a reason. Only use them if you have a solid reason to do so!

class ChatController {
    static staticNamedFunction() {
      console.log('ChatController.staticNamedFunction()');
    }
    
    constructor(a) {
        this._a = a;
        this._a++;
        
        // ** bad practice **
        // add an anonymous function under a name 
        // to the instance of the class during construction
        this.functionFromConstructor = () => {
          console.log('ChatController.functionFromConstructor(...)');
        };
        
        console.log('ChatController.constructor(...)');
    }
    
    // regular getter
    get a() {
      return this._a;
    }
    
    // Java-style getter
    getA() {
      return this._a;
    }
    
    namedFunction() {
      console.log('ChatController.namedFunction()');
    }
}

// call a static function of the class
ChatController.staticNamedFunction();

// ** bad practice **
// add an anonymus function, that behaves as a statis function under a name
ChatController['newStaticFunction'] = () => {
  console.log('newStaticFunction');
};

// ...and call that function
ChatController.newStaticFunction();

// initialize the class to use the instance functions (or methods)
var chat = new ChatController(0);

// call a function of the class
chat.namedFunction();

// call that function, that was defined in the constructor
chat.functionFromConstructor();

// ** bad practice **
// add an anonymus function to the instance under a name
// that will only be available in this instance of the class
chat['newFunction'] = () => {
  console.log('newFunction');
}

// ..and call that function
chat.newFunction();

// ** bad practice **
// add an anonymus function to prototype of the class under a name
// that will be available on all instances of the class
// even on the previously instantiated ones
ChatController.prototype.anotherNewFunction = () => {
  console.log('anotherNewFunction');
}

// ..and call that function on the instance, that was previously declared
chat.anotherNewFunction();

// based on your sample code:
var getChat = function() {
  var chat = new ChatController(0);
  
  // accessing '_a' via a getter
  console.log(chat.a);
  
  // accessing '_a' via a Java-style getter
  console.log(chat.getA());
  
  // ** bad practice **
  // accessing '_a' directly
  console.log(chat._a);
  
  // ** bad practice **
  // adding and binding an anonymous function under a name
  chat['bindedFunction'] = function() {
    // after binding the anonymous function, you can access 
    // the instance functions/methods and variables/properties of the class
    console.log('bindedFunction', this.a);
  }.bind(chat);
  
  // ...and call that function
  chat.bindedFunction();
  
  return chat;
}

getChat(); // returns a ChatConsroller instance