title: Javascript ES6 Classes - Method cant access class property defined inside class constructor
body: <p>So i was trying to structure my code inside a class so it can be more organized, but iam struggling. I have the code:</p>
  
  <pre><code>class App {
  
    constructor() {
  
      // Get elements from DOM
      const titleBox = document.getElementById('titleBox');
      const navBox = document.getElementById('navBox');
      const navLinks = document.querySelectorAll('.header__listLink');
      const headerTitle = document.getElementById('headerTitle');
      const headerSubtitle = document.getElementById('headerSubtitle');
      const ulNav = document.getElementById('ulNav');
      const ulNavLinks = document.querySelectorAll('.ulNavLink');
  
      // for each nav link, add an event listener, expanding content area
      navLinks.forEach((link) =&gt; {
        link.addEventListener('click', this.clickedLinkState);
      });
  
    }
  
    clickedLinkState(e) {
  
        e.preventDefault();
  
        titleBox.classList.remove("header__title-box");
        titleBox.classList.add("header__title-box--linkClicked");
  
        headerTitle.classList.remove("header__title");
        headerTitle.classList.add("header__title--linkClicked");
  
        headerSubtitle.classList.remove("header__subtitle");
        headerSubtitle.classList.add("header__subtitle--linkClicked");
  
        ulNav.classList.remove("header__listInline");
        ulNav.classList.add("header__listInline--linkClicked");
  
        navBox.classList.remove("header__nav-box");
        navBox.classList.add("header__nav-box--linkClicked");
  
        ulNavLinks.forEach((navLink) =&gt; {
          navLink.classList.remove("header__listLink");
          navLink.classList.add("header__listLink--linkClicked");
        });   
  
    }
  
  }
  
  const app = new App();
  </code></pre>
  
  <p>And i got the error: "main.js:40 Uncaught ReferenceError: ulNavLinks is not defined
      at HTMLLIElement.clickedLinkState (main.js:40)". the 'ulNavLinks' is a nodeList.</p>
  
  <p>I was trying to define the elements using 'this.titleBox = ...', for exemple, but it got even worse, i could not access it from my clickedLinkState method. Outside the class it was working. </p>
  
  <p>Why i cant access the 'ulNavLinks' inside my method? and why i cant access my propesties inside the method if i declare them 'this.titleBox', 'this.navBox'?</p>