What does a single vertical bar mean in JavaScript?
It's binary "OR", just like in C or C++ or Java. In this case, it's used in its assignment operator form, so
value |= this.value
means that this.value
and value
are both converted to 32-bit integers, and a bitwise OR operation is performed. If value
were 10 and this.value
were 3 before the operation (that is, 01010
and 011
in binary) the result would be 11 (01011
in binary).
The binary logic operators in Javascript are notable in Javascript because the work is carried out on integer values.
The term "bit-wise" is perhaps more accurate than "binary". The operations act on each bit of a numeric value, specifically the numeric values coerced to signed 32-bit integers. The result is also a signed 32-bit integer (according to the spec).
However, JavaScript numbers "at rest" are always 64-bit binary floating point values. Thus the results of bitwise operators, though computed with 32-bit integer math, are stored in floating point form. That works because the range of 32-bit integers fits comfortably and precisely in a 64-bit float.
This will perform a bitwise OR between the bits in this.value
and the bits already stored in Value
, then store the result back into Value
.
var Value = 42; // 00101010
Value |= 96; // 01100000
window.alert(Value); // 01101010 -> 106
As others have pointed out, this is the bitwise OR operator. However, I don't think people use it much on numerical values in Javascript as - generally - you don't do a lot of computation in Javascript. To give you a better idea why this operator is useful, consider the far more common scenario that the user needs to fill in at least one of multiple textfields.
Say you have this HTML:
<input type="text" class="phone-nr" id="home-phone-nr-1" />
<input type="text" class="phone-nr" id="home-phone-nr-2" />
<input type="text" class="phone-nr" id="home-phone-nr-3" />
<input type="text" class="phone-nr" id="mobile-phone-nr-1" />
<input type="text" class="phone-nr" id="mobile-phone-nr-2" />
<input type="text" class="phone-nr" id="mobile-phone-nr-3" />
The user has the option to fill in multiple phone numbers, but will have to supply at least one.
The easiest way to do this (with jQuery in this case) is:
var valid = false;
$('.phone-nr').each(function(i, item){
valid |= $(item).val();
}); // untested code
valid
will be true if at least one input field with class phone-nr
has a non-empty value.
If every field must be filled in (a more common requirement) you can do it like this with the bitwise AND operator:
var valid = true;
$('.phone-nr').each(function(i, item){
valid &= $(item).val();
}); // untested code
valid
will only be true if all input fields have a value.
If at least single field is required to be filled in, but no more than one you can use the XOR operator:
var valid = false;
$('.phone-nr').each(function(i, item){
valid ^= $(item).val();
}); // untested code
Those are, in my opinion, the real-world uses of bitwise operators in Javascript.