Can someone explain what this.value means in this example of code?

Question

I'm new to JavaScript and am still learning, I recently wrote this code and it works but I can't understand what this.value refers to in this instance:

function displayMatches() {
 const matchArray = findMatches(this.value, cities); //what does this.value refer to?

 const html = matchArray.map(place => {

 const regex = new RegExp(this.value,'gi');

 const cityName = place.city.replace(regex,`<span class="hl">${this.value}
 </span>`);

 const stateName = place.state.replace(regex,`<span class="hl">${this.value}
 </span>`);

return `
<li>
  <span class="name">${place.city}, ${stateName}</span>
  <span class="population">${numberWithCommas(place.population)}</span>
</li>
`;
}).join ('');
suggestions.innerHtml = html;
}

I thought it was referring in wordsToMatch, here is all of the code:

const cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

function findMatches(wordToMatch) {
  return cities.filter(place => {
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex)
  });
}

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
   const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
return `
  <li>
    <span class="name">${cityName}, ${stateName}</span>
    <span class="population">${numberWithCommas(place.population)}</span>
  </li>
`;
  }).join('');
  suggestions.innerHTML = html;
}

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

Can anyone help explain this to my so I understand? Would really appreciate it! I find the whole .this() method still very confusing.

Answer 1

when you call some method binding some event this is the information what that event send to handler method. In this line of your code:

searchInput.addEventListener('change', displayMatches);

You are listening the element searchInput then, in displayMatches() context this is the searchInput element.

That way this.value is searchInput.value.

Have you got it?

Answer 2

Inside a function, the value of this depends on how the function is called. It refers to the DOM element which called the function.
Let's say this is your JavaScript :

function alertMessage () {
    alert(this.value);
}

And this is your HTML :

<input type="text" onmousehover="alertMessage()" value="Test">

When the mouse will hover the input element JavaScript will alert "Test", because the value of the input with which you called the function is Test .