title: Understanding the value of this inside of Class methods
body: <p>I am building a class with several methods and coming from React, I was using this syntax:</p>
  
  <pre><code>class Library {
    constructor(bookSearch) {
      this.bookSearch = bookSearch;
      this.bookSearch.addEventListener("keyup", this.searchBook);
    }
  
  searchBook = () =&gt; {
      let searchValue = this.bookSearch.value;
  
      //Create a DOM collection of Books:
      const bookCollection = document.querySelectorAll('.book');
  
      for (const book of bookCollection) {
        if( !book.querySelector('.card-title').textContent.toLowerCase().includes( searchValue.toLowerCase() ) ) {
          book.style.display = 'none';
        } else {
          book.style.display = 'block';
        }
      }
    }
  </code></pre>
  
  <p>This is working just fine, the value of this is what I expected. When I tried bundling my app, apparently this is experimental syntax that is just in proposal and not entirely valid as of today. If I write the searchBook method like this:</p>
  
  <pre><code>searchBook() {
      let searchValue = this.bookSearch.value;
  
      //Create a DOM collection of Books:
      const bookCollection = document.querySelectorAll('.book');
  
      for (const book of bookCollection) {
        if( !book.querySelector('.card-title').textContent.toLowerCase().includes( searchValue.toLowerCase() ) ) {
          book.style.display = 'none';
        } else {
          book.style.display = 'block';
        }
      }
    }
  </code></pre>
  
  <p>The first line, "this.bookSearch.value;" is undefined. How should I approach this? </p>
  
  <p>I'd liked the idea of using arrow functions as the value of this is clearer to me and I could compile this using "@babel/plugin-proposal-class-properties" but also, I'd like to know how to use the regular method syntax without the arrow. Should I be looking at "bind"?</p>