Что выведет console.log в примере №25

Условие

Определите, какой результат будет напечатан в консоль при выполнении следующего кода.

 const accountService = {
  activeFilter: 'active',
  userList: [
    { name: 'Alex', status: 'active' },
    { name: 'Nick', status: 'deleted' },
  ],
  fetchFilteredUsers: function () {
    return this.userList.filter(function (person) {
      return person.status === this.activeFilter;
    });
  }
};

console.log(accountService.fetchFilteredUsers());

Ответ

В strict mode код бросит TypeError: this внутри callback filter равен undefined. В обычном браузерном script без strict, при отсутствии глобального activeFilter, получится пустой массив.

Внешний метод вызван правильно через accountService, но его обычная вложенная функция не наследует this. filter не передаёт ей объект сервиса автоматически.

fetchFilteredUsers: function () {
  return this.userList.filter(person => person.status === this.activeFilter);
}

Это замена тела метода в объекте: стрелка сохраняет this метода, и результат содержит Alex. Альтернатива — второй аргумент filter: this.userList.filter(function (person) { return person.status === this.activeFilter; }, this). В нестрогом окружении результат исходника может зависеть от глобального activeFilter, поэтому без оговорки утверждать [] нельзя.