What does a single vertical bar mean in JavaScript?

Question

What does this expression mean in JS?

Value |= this.value

Answer 1

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

Answer 2

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.

Answer 3

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-nrhas 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.

Answer 4

Practical use for the operator

( 3|0 )                        === 3;
( 3.3|0 )                      === 3;
( 3.8|0 )                      === 3;
( -3.3|0 )                     === -3;
( -3.8|0 )                     === -3;
( "3"|0 )                      === 3;
( "3.8"|0 )                    === 3;
( "-3.8"|0 )                   === -3;
( NaN|0 )                      === 0;
( Infinity|0 )                 === 0;   
( -Infinity|0 )                === 0;     
( null|0 )                     === 0;          
( (void 0)|0 )                 === 0;      
( []|0 )                       === 0;            
( [3]|0 )                      === 3;           
( [-3.8]|0 )                   === -3;       
( [" -3.8 "]|0 )               === -3;   
( [-3.8, 22]|0 )               === 0     
( {}|0 )                       === 0;            
( {'2':'3'}|0 )                === 0;     
( (function(){})|0 )           === 0;
( (function(){ return 3;})|0 ) === 0;

Some magic for me

3 | '0px' === 3;

Answer 5

It's a bitwise or assignment operator, similar to +=. If you run a test on it like this:

<ol>
<script language="javascript">
var x=false;
document.writeln("<li>"+x+"</li>");
x|=true;
document.writeln("<li>"+x+"</li>");
x&=false;
document.writeln("<li>"+x+"</li>");
</script>
</ol>

You'll get this output (in IE)

1.false
2.1
3.0

Essentially, x|=y is the same as saying x=x|y