1

I was looking into the AngularJS Framework. I found that they were using | operator to add things up. What is the difference when you use + operator and | operator?

Is it related to performance? If so how?

Here is the Code that was Requested:-

var manualLowercase = function(s) {
    return isString(s)
        ? s.replace(/[A-Z]/g, function(ch) {
            return String.fromCharCode(ch.charCodeAt(0) | 32);
    }): s;
};
Abilash
  • 6,049
  • 5
  • 23
  • 29

4 Answers4

5

They are different operators.

Where x and y are numbers2, x | y is a bit-wise or and x + y is addition. For some values of x and y they will have the same results - for everything else, the result will be different3.

Anyway, use the form that means what is desired1. Don't worry about performance unless there is a performance case - jsperf is a handy tool for this. Then realize that micro-benchmarks and inherently biased and it usually doesn't matter.


1 For this particular problem, note the regular expression matches each A-Z character and replaces it with the result of the function.

Thus we know that charCodeAt(0) is the character code for A..Z. Looking at a character table we can see these values are in the range [0x41, 0x5a] and note that [0x61, 0x7a] are the corresponding lower-case letters. Thus we can go { A, B .. Z } -> { a, b .. z } by adding 0x20 (or 32) to the upper-case letter's character code.

It can also be observed that adding 32 (or 1 << 5) to a number without the 5th bit set (such as number in the range [0x41, 0x5a]) can be achieved with a bit-wise or with 1 << 5 (i.e x | 32). This is why | and + are interchangeable here. Adding 32 (i.e. x + 0x20) is arguably more clear even though both operators will behave equivalently under the rules above.

In any case, if curious about performance implications of either approach, benchmark the code in it's entirety (and in context) on the relevant/target environments.


2 The operator x | y is always a bit-wise or (via [ToInt] conversions), but x + y could be a string concatenation.

3 The results will be the same only when x and y are both numbers (or rather, neither is a string), are convertible via [ToInt], have no set bits in common, and are in the range of about [0, 2^32) or so.

4

+ is addition operator, | is bitwise operator. But because you says "Is it related to performance?" so I think your means which is better between below two:

x = 0 | '5';

or

x = + '5';

according to MDN page on Arithmetic Operators:

unary plus is the fastest and preferred way of converting something into a number

additionally, read comments to my answer here some browsers performs better with | instead.

Also read wiki: Bitwise operation

On simple low-cost processors, typically, bitwise operations are substantially faster than division, several times faster than multiplication, and sometimes significantly faster than addition

Here is an interesting link 'jsperf' for you.

Community
  • 1
  • 1
Grijesh Chauhan
  • 52,958
  • 19
  • 127
  • 190
1

I am a just starting to learn javascript. Till now I heard about "+" operator which is used to add two string values or two values. If you add a number and string then it will provide string result only. If you provide both number then I gives the result of two number addition.

Richard Brown
  • 11,043
  • 4
  • 31
  • 42
-1

When operating in binary variables we can use or(|) instead of plus(+) operator. It will give the same result. You may want to know about the binary arithmetic. Just google and you will stumble upon may good searches.

Master Chief
  • 2,380
  • 15
  • 27
  • 3
    `|` is a bitwise **or**, not a bitwise **and**. Also, it's incorrect that they will give the same result. Compare `true | true` with `true + true`. – Justin Morgan Mar 09 '13 at 06:00
  • oops really sorry about that. Corrected that one. But isn't `true | true` and `true + true` will give same result, when they are binary vars. – Master Chief Mar 09 '13 at 06:05
  • No, `true | true === 1` and `true + true === 2`. So they have different results. Both of those values would be `true` if you evaluated them as booleans, but that's not the same as getting equivalent results. – Justin Morgan Mar 09 '13 at 06:12