CODEWITHSUNDEEP
javascriptclassasync-awaitjavascript-objects
Patrick Bender
Patrick Bender

Reputation: 467

Static async function in JavaScript class

I'm having trouble with a static async method on a JavaScript class. If I remove the static keyword it works fine to call within the class but then I won't be able to call it by using the class.

My desired outcome is to use the exist method on the class itself using User.exist(email) and on an instance of the class, e.g. foo.exist(email).

Where do I think wrong?

const userEmails = []

class User {
  constructor(fields) {
   this.email = fields.email;
   this.name = fields.name;
  }

  static async exist(email) {
    return setTimeout(function() {
      return userEmails.includes(email)
    }, 2000)
  }

  async storeEmail() {
    let userExist = await this.exist(this.email)

    if (userExist) {
      console.log('User exist')
    } else {
      users.push(this.email)
      console.log(userEmails)
    }
  }
};

let foo = new User({email: '[email protected]', name: 'Foo Bar'})

foo.storeEmail()           // this.exist is not a function
User.exist('[email protected]')  // Works when used inside async function with await

Upvotes: 11

Views: 11576

Answers (3)

wmantly
wmantly

Reputation: 23

The other answers here work, but are not good. Referencing the class name from within the class is something you shouldn't do. What if the class name changes? what if you are working with inheritance? It will be broken. use this.constructor to get to the the static methods on a given instance

class User {
  constructor(fields) {
   this.email = fields.email;
   this.name = fields.name;
  }

  static async exist(email) {
    return setTimeout(function() {
      return userEmails.includes(email)
    }, 2000)
  }

  async storeEmail() {
    let userExist = await this.constructor.exist(this.email)

    if (userExist) {
      console.log('User exist')
    } else {
      users.push(this.email)
      console.log(userEmails)
    }
  }
};

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281874

When you define the method of a class as static member, it is not available on instance using this keyword. You can directly call it using the class name inside class functions like User.exist(this.email)

const userEmails = []

class User {
  constructor(fields) {
   this.email = fields.email;
   this.name = fields.name;
  }

  static async exist(email) {
    return setTimeout(function() {
      return userEmails.includes(email)
    }, 2000)
  }

  async storeEmail() {
    let userExist = await User.exist(this.email)

    if (userExist) {
      console.log('User exist')
    } else {
      users.push(this.email)
      console.log(userEmails)
    }
  }
};

let foo = new User({email: '[email protected]', name: 'Foo Bar'})

foo.storeEmail()           // this.exist is not a function
User.exist('[email protected]')  // Works when used inside async function with

Upvotes: 7

Robby Cornelissen
Robby Cornelissen

Reputation: 97237

You need to call your static function in a static context, so User.exist() instead of this.exist():

const userEmails = []

class User {
  constructor(fields) {
   this.email = fields.email;
   this.name = fields.name;
  }

  static async exist(email) {
    return setTimeout(function() {
      return userEmails.includes(email)
    }, 2000)
  }

  async storeEmail() {
    let userExist = await User.exist(this.email)

    if (userExist) {
      console.log('User exist')
    } else {
      users.push(this.email)
      console.log(userEmails)
    }
  }
};

let foo = new User({email: '[email protected]', name: 'Foo Bar'})

foo.storeEmail();          // OK
User.exist('[email protected]'); // OK

Upvotes: 2

Related Questions