====== Java Script | Bitwise OR, ^ Bitwise XOR, & Bitwise AND, ? Ternary Conditional Operator and ?. Optional Chaining Operator ======

In JavaScript, there are the **| (bitwise OR)** and **& (bitwise AND)** operators, which are different from **||** and **&&**. These operators perform bitwise operations, which means **they operate on the binary representations of numbers**.

===== | Bitwise OR =====

The **|** operator returns a value where each bit is set if the corresponding bit is set in **either** of the two operands:
<code javascript>
const a = 5; // binary: 101
const b = 3; // binary: 011
const result = a | b; // binary: 111, decimal: 7
</code>

===== ^ Bitwise XOR =====

The ^ XOR (exclusive or) operation returns true if exactly one of the bits being compared is true:
<code javascript>
let a = 5; // binary: 0101
let b = 3; // binary: 0011

let result = a ^ b; // binary: 0110, decimal: 6

</code>

===== & Bitwise AND =====

The **&** operator returns a value where each bit is set if the corresponding bit is set in **both** operands:
<code javascript>
const a = 5; // binary: 101
const b = 3; // binary: 011
const result = a & b; // binary: 001, decimal: 1
</code>

<note important>
The bitwise operators work on integer values at the level of individual bits, and their behavior is entirely different from the logical operators **||, ??, and &&**. While the logical operators evaluate values in a boolean context, the bitwise operators work directly with the binary representation of numbers.
</note>

<note tip>
Bitwise operations are typically used in lower-level programming tasks, such as manipulating flags and masks, whereas logical operators are used for flow control and combining conditions.
</note>

===== ? Ternary Conditional Operator =====

The ternary conditional operator is a concise way to perform a conditional (if-else-like) operation. \\ 
Its syntax is:
<code javascript>
condition ? expressionIfTrue : expressionIfFalse
</code>

Example:
<code javascript>
const age = 18;
const status = age >= 21 ? 'adult' : 'minor';
console.log(status); // Output: 'minor'
</code>

===== ?. Optional Chaining Operator =====

Introduced in ECMAScript 2020, the optional chaining operator **?.** allows you to access properties of objects without having to check if the object or property exists. If the object or property doesn't exist, the expression **short-circuits** and returns undefined. \\ 

Example:
<code javascript>
const user = { 
     name: 'John', 
     address: { city: 'New York' } 
};
const city = user?.address?.city; // 'New York'
const zip = user?.address?.zip;   // undefined
</code>

<note tip>
This operator can be particularly helpful when dealing with objects that may or may not have certain properties or nested structures.
</note>

<note tip>
See also the [[java-script:nullish-coalescing-vs-logicar-or-vs-logical-and|logical operators]].
</note>