How to break out of a JavaScript loop

Question

this is my function and I want to break the loo when the condition is met, but I'm getting an error:

SyntaxError: Illegal break statement

Im using protractor with javascript.

async CompareTableData(byElement, param) {
  try {
    await this.WaitToBeClickable(element(By.cssContainingText(byElement.value, param)));
    await element.all(byElement).then(async function(item) {
      for (var i = 0; i < item.length; i++) {
        item[i].getText().then(async function(text) {
          var trimTxt = text.trim();
          if (await trimTxt == param && byElement.using == "css selector") {
            console.log(`Param FOUND! ${param}\n`);
            await expect(element(By.cssContainingText(byElement.value, param)).isPresent()).toBe(true);
            break;
          } else {
            return;
          }
        });
      }
    });
  } catch (err) {
    console.log("Table comparison FAILED, element not present!");
    return console.log(err);
  }
};

Does this answer your question? [Short circuit Array.forEach like calling break](https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break) — MysteriousPerson, Apr 24 '20 at 23:06
you're not _in_ a for loop, you're in an async function. If you want to return early, just `return`. However, a `return` makes no sense here, because you're inside an if/else: `if (a) { return x; } else { return y; }` is the same as `if (a) { return x; } return y` (no need for an else, by definition if you're still here, we haven't returned yet). And then on top of that, a `return` without any argument is what functions already do, so there's literally no reason for this code. Just use `if (...) { await ...; }` without any returns, and without an `else`. — Mike 'Pomax' Kamermans, Apr 25 '20 at 01:18

score 0 · Accepted Answer · answered Apr 25 '20 at 08:09

As others have pointer out your break is not in your loop but instead in an anonymous function in your .then. Other than that the main issue is that you are not handling your promises well. Async/await was introduced to make handling promises easier by not requiring you to use .then statements so you should definitely not be using them together in this way.

Also expect statements are synchronous so do not require an await but the actions within the expect will (almost always) be async when using Protractor so that statement should read expect(await element(By.cssContainingText(byElement.value, param)).isPresent()).toBe(true);

You can rewrite you code like so:

async function CompareTableData(byElement, param) {
    try {
        await this.WaitToBeClickable(element(By.cssContainingText(byElement.value, param)));
        const item = await element.all(byElement)

        for (var i = 0; i < item.length; i++) {
            const text = await item[i].getText();
            var trimTxt = text.trim();
            if (trimTxt == param && byElement.using == "css selector") {
                console.log(`Param FOUND! ${param}\n`);
                expect(await element(By.cssContainingText(byElement.value, param)).isPresent()).toBe(true);
                break;
            } else {
                return;
            }
        }
    } catch (err) {
        console.log("Table comparison FAILED, element not present!");
        return console.log(err);
    }
};

Thank YOU! very much! I'm new to JS so this helps a lot to understand the async functions! again! THANK YOU! — Alan Díaz, Apr 27 '20 at 00:47
No problem @Alan, happy to help. If this answer did resolve your issue would you mind accepting this answer so that other users in future may see it solved. — DublinDev, Apr 27 '20 at 07:35

How to break out of a JavaScript loop

1 Answers1