# What does a single vertical bar mean in JavaScript?

What does this expression mean in JS?

``````Value |= this.value
``````

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
``````

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.

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.

Read More:   What is the difference between the mouseover and mouseenter events?

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.

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;
( |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;
``````

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` The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .