What does one vertical bar mean in JavaScript?

Question

What does this expression mean in JS?

Value |= this.value 

Answer 1

It is a binary OR, as in C, C ++ or Java. In this case, it is used in the form of an assignment operator, therefore

 value |= this.value 

means that this.value and value both converted to 32-bit integers, and a bitwise OR operation is performed. If value was 10 and this.value was 3 before the operation (i.e. 01010 and 011 in binary), the result would be 11 ( 01011 in binary).

Binary logic operators in Javascript are noticeable in Javascript because the work is done on integer values.

The term bit-wise is perhaps more accurate than binary. Operations act on each bit of a numerical value, in particular numerical values, forced to signed 32-bit integers. The result is also a signed 32-bit integer (as per specification).

However, JavaScript “idle” numbers are always 64-bit floating point binary values. Thus, the results of bitwise operators, although calculated with 32-bit integer math, are stored in floating point form. This works because the 32-bit integer range is convenient and accurate for a 64-bit float.

Answer 2

This will do a bitwise OR between the bits in this.value and the bits already stored in Value , and then save the result back to Value .

 var Value = 42; // 00101010 Value |= 96; // 01100000 window.alert(Value); // 01101010 -> 106 

Answer 3

As others have pointed out, this is a bitwise OR operator. However, I don’t think that people use it a lot in numeric values ​​in Javascript as usual - you do not do a lot of computation in Javascript. To give you a better idea of ​​why this statement is useful, consider a much more common scenario that a user must fill out with at least one of several text fields.

Let's say you have this HTML code:

 <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 opportunity to fill out several phone numbers, but will have to provide at least one.

The easiest way to do this (with jQuery in this case):

 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 the phone-nr class has a non-empty value.

If each field needs to be filled out (a more general requirement), you can do this as follows 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 the input fields all have a value.

If you need to fill in at least one field, but not more than one , you can use the XOR operator:

 var valid = false; $('.phone-nr').each(function(i, item){ valid ^= $(item).val(); }); // untested code 

This, in my opinion, is the real use of bitwise operators in Javascript.

Answer 4

I found some practical application for this operator:

 ( 3|0 ) === 3; //     ( 3.3|0 ) === 3; //       ( 3.8|0 ) === 3; //  ,      ( -3.3|0 ) === -3; //         ( -3.8|0 ) === -3; //   Math.floor(-3.3) == Math.floor(-3.8) == -4 ( "3"|0 ) === 3; //        ( "3.8"|0 ) === 3; //        ( "-3.8"|0 ) === -3; //         ( NaN|0 ) === 0; // NaN    ( Infinity|0 ) === 0; //       , ( -Infinity|0 ) === 0; //    , ( null|0 ) === 0; //   null, ( (void 0)|0 ) === 0; //   undefined, ( []|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; 

and some kind of magic for me:

 3 | '0px' === 3; 

Answer 5

This is a bitwise or assignment operator, similar to += . If you run a test on it as follows:

 <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 will get this output (in IE)

 1.false 2.1 3.0 

Essentially, x|=y same as x=x|y