I wonder how (ar1 | ar2 [I]) works in this code

Question

let n = 6;

let arr1 = [46, 33, 33, 22, 31, 50];
let arr2 = [27, 56, 19, 14, 14, 10];

let answer;

let solution = (n, arr1, arr2) => {
  answer = arr1.map(
    (arr1, i) =>
      (arr1 | arr2[i])
        .toString(2)
        .padStart(n, 0)
        .replace(/0/g, " ")
        .replace(/1/g, "#"),
    console.log(arr2)
  );
  console.log(answer);
};
solution(n, arr1, arr2);

I'm asking because there is something I don't understand in the code above. How did (arr1 | arr2[i]) work? Why are the two arrays combined?

`|` is the bit-wise OR operator, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR — CBroe, Sep 02 '22 at 12:50
`|` is a [bitwise OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) operator. Why that is there, in that code... Who knows? What's that code supposed to do? — Cerbrus, Sep 02 '22 at 12:50
I don't understand how it does anything at all, given that the `=>` callback to `.map()` appears to return `undefined` (because of the `console.log()`). — Pointy, Sep 02 '22 at 12:51
_"Why are the two arrays combined?"_ - they aren't. `arr1` at _that_ point is not the array, it is one element - the one passed into the callback function by `arr1.map`. So this is a bit-wise OR of the current element of array 1, and the `arr2[i]` element from the second one. And since `i` is the index of the current array1 element, `arr2[i]` accesses the corresponding element in the other, that has the same index. — CBroe, Sep 02 '22 at 12:52
Why was this closed as a duplicate of "What does the '|' (single pipe) do in JavaScript"? That only answers part of the question. There's more to this one - the confusion over the map function re-using the same variable name `arr1`, as @CBroe pointed out. This question is a good example of a complex use of the bitwise or operator, and should be given a chance to be answered properly. — DaveS, Sep 02 '22 at 13:37
Fair enough, but the rest of the question is mostly speculation, right? It doesn't seem answerable. — isherwood, Sep 02 '22 at 13:52

DaveS · Accepted Answer · 2022-09-02T14:10:03.980

"Bitwise or" is the name of the | operator. JavaScript coerces arr1 and arr2[i] to binary (a set of 0s and/or 1s), then ors them.

For a given set of bits, the bitwise operator evaluates them like this:

(0 | 0) === 0
(0 | 1) === 1
(1 | 0) === 1
(1 | 1) === 1

arr1.map(arr1, i)... creates a locally scoped variable arr1 with the same name as the array it's mapping. So, inside the map function, arr1 refers to the item at array index i. It should be renamed for clarity.

arr2[i] just evaluates to the value from the 2nd array, which is in the same position during the map's loop. So, in this case, for a given index of the loop:

`i`	`arr1`	`arr2[i]`
0	46	27
1	33	56
2	33	19
3	22	14
4	31	14
5	50	10

Then the confusing part of your code ((arr1 | arr2[i])) does a bitwise or on the binary values:

arr1	Number(arr1).toString(2)	arr2[i]	Number(arr2[i]).toString(2)	Bitwise Or (binary)
46	101110	27	011011	111111
33	100001	56	111000	111001
33	100001	19	010011	110011
22	010110	14	001110	011110
31	011111	14	001110	011111
50	110010	10	001010	111010

Then your code .toString(2).padStart(n, 0).replace(/0/g, " ").replace(/1/g, "#") just uses the binary values above and replaces zeroes with spaces, and ones with octothorpes: ['######', '### #', '## ##', ' #### ', ' #####', '### # ']

I wonder how (ar1 | ar2 [I]) works in this code

1 Answers1