Could someone please shed light on why the arrow function works in this specific context?

An arrow function, as per its definition, retains the current lexical value of this, unlike a regular callback function. When you use a regular callback function, you lose the correct value of this that your code relies on.

To rectify this issue, you can either utilize an arrow function to maintain the current scope value of this, or pass the optional argument thisArg to .map() immediately after the function.

In the documentation for Array.prototype.map by MDN, the optional thisArg parameter is explained:

var new_array = arr.map(function callback(currentValue, index, array) {
    // Return element for new_array
}[, thisArg])

To retain this in your code without using an arrow function, you can pass the thisArg to your call to .map().

var displayMatches = function(){
    console.log(this.value);
    var matchArray = findMatches(this.value, cities);
    var html = matchArray.map(function(place){
        console.log(this, place, "test");
        var regex = new RegExp(this.value, 'gi');
        var cityName = place.city.replace(regex, "<span class='hl'>" + this.value + "</span>");
        var stateName = place.state.replace(regex, "<span class='hl'>" + this.value + "</span>");
            return `
          <li>
            <span class="name">${cityName}, ${stateName}</span>
            <span class="population">${place.population}</span>
          </li>
            `;
    }, this).join("");              // <== See the this argument passed here
    suggestions.innerHTML = html;
}

For the sake of completeness, there are six possible solutions available:

1. Pass the this argument to .map() as demonstrated above
2. Use an arrow function (ES6 only)
3. Utilize .bind(this) with the callback function
4. Create a local variable var self = this; and reference self instead of this
5. Use let val = this.value before the callback and then simply employ val within the callback
6. Declare the e parameter to the event handler and utilize e.target.value rather than this.value, eliminating the need for this altogether

Considering that .map() inherently offers the desired functionality for this, if you opt not to use an ES6 arrow function, it would be prudent to leverage the .map() argument. However, all six solutions provided will effectively address the issue.

Upon scrutinizing how you engage with this in your callback, it appears that you solely access

this.value</code. In this scenario, you could alternatively declare <code>let val = this.val

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

One issue arises when comparing arrow functions to regular functions, as the this variable gets reset when creating a new function. To prevent losing the value of this, it is advisable to store it in a new variable within the function.

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

When utilizing the this variable, it is important to note that within a function, it may refer to the function itself rather than the intended object.

To avoid this issue, storing the value in another variable before usage can be a solution.

const value = this.value;
const html = matchArray.map(function(place) { 
const regex = new RegExp(value, 'gi'); 
   ...
});

In the realm of JavaScript, functions are regarded as first-class objects, as they possess properties and methods akin to any other object. Consequently, when using the this variable within a function (be it anonymous or not), it will generally reference the function itself instead of the class object, which is customary in Object Oriented Programming.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Lexical_this

Arrow functions, however, do not bind the this variable.

An arrow function does not create its own this, the this value of the enclosing execution context is used.

To observe this concept firsthand in your codepen, visit: https://codepen.io/BoyWithSilverWings/pen/VMXyXB?editors=0010