SoFunction
Updated on 2025-02-28

Three ways to break, return, continue

Preface:

A question that a great master in the front-end world asked me to think about was given to Big-man a piece of code, as follows:

function Seriously(options) {
  // if called without 'new', make a new object and return that
  if(window === this || !(this instanceof Seriously) ||  !== undefined) {
    return new Seriously(options);
  }
}

Will the return statement continue to be executed after it is executed? This is a problem that the great master came to ask me to solve. Since I mentioned return, I will also solve the other two methods of ending the loop in JS break and continue.

Break statement:

  • The break statement will cause the running program to exit the loop contained in the innermost layer or exit a switch statement.
  • Since it is used to exit loops or switch statements, this form of break statement is legal only when it appears in these statements.
  • If the terminating conditions of a loop are very complex, it is much easier to implement certain conditions using break statements than using all the conditions with a loop expression.
for(var i = 519; i < 550; i++) {
  if(i == 522) {
    break;
  }
  (i);
  alert(i);
  (i);
}
 
  • When i = 521, exit the for loop directly. This loop will no longer be executed.
  • For output results, you can test it yourself.

Continue statement:

  • The continue statement is similar to the break statement. The difference is that instead of exiting a loop, it starts a new iteration of the loop.
  • The continue statement can only be used in the loop body of a while statement, a do/while statement, a for statement, or a for/in statement. Will it cause errors when used elsewhere?
for(var i = 5; i >=0; i--) {
  if(i == 4 || i == 3 || i == 1) {
    continue;
  }
  (i);
  alert(i);
  (i);
}
  • When i = 4, i = 3 and i = 1, the for loop jumps out. Continue to execute next time.
  • As for the output results, I hope everyone will print them.

Return statement:

The return statement is used to specify the value returned by the function. The return statement can only appear in the function body, and it can appear anywhere else in the code to cause syntax errors!

for(var i = 1; i < 10; i++) {
  if(i == 8) {
    return;
  }
  (i);
  alert(i);
  (i);
}

Execution result Uncaught SyntaxError: illegal return statement(...)

  • Error means illegally captured query return statement.

When a return statement is executed, the function execution will stop even if there are other statements in the function topic!

<script type="text/javascript">
  if(username == "") {
    alert("please input your username: ");
    return false;
  } else if (qq == "") {
    alert("please input your qq number: ");
    return false;
  }
</script>
 

In the above example, when username is empty, it will not be executed downward. In some form submissions, you can also use return false to block the default submission method, and use Ajax submission method instead, for example:

<form  onSubmit="return false">
...
</form>

The global variables corresponding to this:

window == this Boolean equation is different in different situations.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  function a() {
    (window === this)
  }
  a();
</script>
</body>
</html>

At this time, window === this prints true, which means this is definitely equal to window.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  'use strict'
  function a() {
    (window === this)
  }
  a();
</script>
</body>
</html>

At this time, the value returned by window === this is false, and the printed this is undefined.

Therefore, the code operations under strict mode need to be more standardized and reasonable.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.