Почему возвращает undefined?

Question

[hellbladeuu]

Привет! Я учу js и для практики решил сделать ToDo лист и у него есть такая функция как поиск "запрещенных" слов.

Функция поиска подстроки в переданном тексте textValue в специальном "banwords.json" файле:

function getBanWords (textValue) {
    let xhr = new XMLHttpRequest(),
        url = 'banwords.json',
        flag;

    xhr.open('GET', url);

    xhr.send();

    xhr.addEventListener('load', function () {
        if (this.status === 200) {
            let data = JSON.parse(this.response);

            for (let i = 0; i < data.length; i++) {
                if (textValue.includes(data[i])) {
                    flag = true;

                    break;
                }
            }
        }
    })

    return flag;
}

По клику на кнопку передается значение getBanWords('Привет я омикрон!') - условно "омикрон" - это запрещенное слово, то нам надо вернуть переменную flag = true или false если нет запрещенных подстрок.

Но, мне по клику возвращается undefined. Что я делаю не так?

Comments

[Lynn «Кофеман»]

https://ru.stackoverflow.com/q/554290/190728

[hellbladeuu]

Lynn «Кофеман», Спасибо за ссылку, почитаю

Answer 1

[Алексей Уколов]

Я понимаю, что для вас такое поведение выглядит непонятным, но по названию вашего вопроса и тегу javascript легко догадаться о его содержимом не заходя внутрь. Просто потому, что ровно таких вопросов здесь повяляется по три в день.
Прочитайте как работает асинхронность в javascript, про промисы, про async/await.

Comments

[hellbladeuu]

Спасибо, я так понимаю мой return выполняется сразу? Он не ждет выполнения отправки запроса.

[Сергей delphinpro]

Это, наверное, самый популярный вопрос в теге javascript
у тех, кто только начал изучать язык

[Сергей delphinpro]

Александр, ну да ) поправил формулировку.

[Lynn «Кофеман»]

Сергей delphinpro, на ruSO он идёт с большим отрывом. :)
https://ru.stackoverflow.com/questions/tagged/java...

[Сергей delphinpro]

Александр, так точнее отражается моя мысль. человек начал изучать js и первое с чем он сталкивается - это непонимание асинхронности.

Answer 2

[GrayHorse]

Промисифицированный аналог:

function hasBanWords(text) {    
  const url = "banwords.json";

  const xhr = new XMLHttpRequest();    
  xhr.open("GET", url);
  xhr.send();

  return new Promise(resolve => {
    xhr.addEventListener("load", function() {
        if (this.status === 200) {
          const words = JSON.parse(this.response);
          const hasSomeWords = words.some(word => text.includes(word));
          resolve(hasSomeWords);
        }
    });
  });
}

console.log(await hasBanWords("bitch on the beach"));

Comments

[ButterflyEZ]

Спасибо друг