How can I declare a const string in my Stimulus JS controller?

Question

I'm wanting to set a const variable for a CSS selector for my controller, instead of having it hard coded throughout my controller. I had put the declaration in the initialize() of my controller, but I'm getting an error that the variable wasn't declared. What's the correct way of doing this?

Current Attempt

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]

  initialize() {
    const seasonInputSelector = "input[id$='_season']"
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll(seasonInputSelector)
    // ...
  }

}

Error: ReferenceError: seasonInputSelector is not defined

Answer 1

Use a const variable in the module's root scope:

import { Controller } from "stimulus"

const seasonInputSelector = "input[id$='_season']";

export default class extends Controller {
  static targets = ["form"]

  initialize() {
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( seasonInputSelector );
    // ...
  }

}

Answer 2

An alternative is to scope it inside your class

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]
  seasonInputSelector = "input[id$='_season']";

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( this.seasonInputSelector );
    // ...
  }
}