CODEWITHSUNDEEP
javascript
Kuzey
Kuzey

Reputation: 859

What is the use of the following colon in javascript

Following code block executed successfully. I was wondering what would be the use of this labeling other than using for loops?

<script>

js:
{
   alert("x");  
}

</script>

Upvotes: 6

Views: 317

Answers (5)

What have you tried
What have you tried

Reputation: 11138

The : has a few uses in javascript, that I know of anyway.

  1. ternary operator - used to evaluate an if statement in a single line:

    var x = "yes" == "yes" ? true : false;

    The above line of code is functionally equivalent to:

    if("yes" == "yes"){
    var x = true;
}
else{
    var x = false;
}

  2. Mark the beginning of a code block - Move to a block of code

    begin:
for(int i = 0; i < 10; i++){
    break begin;
}

  3. Object Literals - Thanks @Ian for the reminder

    var someObject= {
    item: 'some value',
    anotherItem: 2 // Can put any type of variable here
};

    This type of notation is commonly seen when using JSON

Upvotes: 6

Justin Ethier
Justin Ethier

Reputation: 134157

The colon is used to add a label. As explained by the MDN documentation for label:

Provides a statement with an identifier that you can refer to using a break or continue statement.

For example, you can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.

MDN includes a code example as well:

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i == 1 && j == 1) {
         continue loop1;
      } else {
         console.log("i = " + i + ", j = " + j);
      }
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

Also, as the article states, this kind of logic generally makes your code harder to understand, so you are better off restructuring the code to use other types of flow control (functions, etc) to avoid having to use labels.

Note that this syntax might be confusing since it is also similar to the object syntax, for example: 

{ js: {1}, ... }

Upvotes: -1

Harsh Baid
Harsh Baid

Reputation: 7249

It is called Labels [MDN] in javascript

myPrettyLabel:
{
   alert('testMe');
}

Provides a statement with an identifier that you can refer to using a break or continue statement.

For example, you can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.

Same as goto in general programs

Please note

Avoid using labels as Labels are not very commonly used in JavaScript since they make programs harder to read and understand. As much as possible, avoid using labels and, depending on the cases, prefer calling functions or throwing an error.

Reference: SO - What does the colon (:) in JavaScript represent?

Upvotes: 3

Pointy
Pointy

Reputation: 413709

It's a labeled statement. You can use labeled statements with a form of the break and continue statements:

outer: for (var i = 0; i < 1000; ++i) {
  for (var j = 0; j < 1000; j++) {
    if (somethingBad())
      break outer;
  }
}

It's (rarely) useful to be able to get out of an inner nested loop to an outer iteration level. I don't think I've ever used it across many thousands of lines of code. In the example code posted in the original question, the label has no apparent purpose.

Upvotes: 3

lrl
lrl

Reputation: 263

This is how you mark labels, a very bad practice which give the ability to implement the old 'goto', which is simple jump to code in sequential executing

Upvotes: 2

Related Questions