Its a bit verbose because its maybe over commented but heres my answer in summary.
Theres two issues here.
The second one is simple. Javascript uses the exclamation mark to express NOT. "!true==false" whereas "~true==WTF?"
The first one took me a little to get my head round when I learned it. Theres two different OR operators.
A single "|" is used for bitwise oprations like
5 | 4 = 5 (because 5 is composed 1 + 4)
6 | 1 = 7 (becasue 6 is composed 2 + 4 and the 1 makes 1+2+4=7)
The double "||" is used for logical operations such that every value operated on is
regarded as a boolean.
true || 0 = true
true || 12345 = true
123 || 456 = true
0 || null = false
The & also has its equivalent && to distinguish between bitwise and logical operations.
In short the "|","&" operators always return integer values and the "||","&&" always return boolean values.
Your code adjusted verbosely:
let a = (4>1); //resolves to boolean true (4 is greater than 1)
let b = (3<1); //resolves to boolean false (3 is not less than 1)
console.log("a:",a); //(logs a boolean value of a (true)
console.log("b:",b); //(logs a boolean value of b (false)
//"bitwise OR" operation on the integer values (a=0x0001,b=0x0000)
//which just luckily resolved to 0x0001 which resolves to true in boolean context
console.log("(a|b):",(a|b));
//"logical OR" operation on the boolean values (a=true,b=false)
console.log("(a||b):",(a||b));
//incorrect NOT operator for javascript "~"
console.log("~(a|b):",~(a|b));
//correct NOT operator for javascript "!" using "bitwise OR" on integers
console.log("!(a|b):",!(a|b));
//correct NOT operator for javascript "!" using "logical OR" on booleans
console.log("!(a||b):",!(a||b));
if((a|b)){
console.log("#")
}
if(~(a|b)){
console.log("#2")
}