Bit Manipulation Basics AND OR XOR NOT Left Right Shift in DSA Javascript

Mental Model

Bit manipulation changes numbers by flipping or moving their tiny on/off switches called bits.

Analogy: Imagine a row of light switches where each switch can be on (1) or off (0). Bit operations flip, combine, or shift these switches to get new patterns.

Number 6 in bits (8 bits):
0 0 0 0 0 1 1 0
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
7 6 5 4 3 2 1 0 (bit positions)

Dry Run Walkthrough

Input: numbers: a = 6 (00000110), b = 3 (00000011)

Goal: Show how AND, OR, XOR, NOT, left shift, and right shift change bits of a and b

Step 1: Perform AND: a & b

a: 00000110 (6)
b: 00000011 (3)
a & b: 00000010 (2)

Why: AND keeps bits on only if both a and b have them on

Step 2: Perform OR: a | b

a: 00000110 (6)
b: 00000011 (3)
a | b: 00000111 (7)

Why: OR turns bits on if either a or b has them on

Step 3: Perform XOR: a ^ b

a: 00000110 (6)
b: 00000011 (3)
a ^ b: 00000101 (5)

Why: XOR turns bits on only if a and b differ at that bit

Step 4: Perform NOT: ~a

a: 00000110 (6)
~a: 11111001 (-7 in two's complement 8-bit)

Why: NOT flips every bit of a

Step 5: Perform left shift: a << 1

a: 00000110 (6)
a << 1: 00001100 (12)

Why: Left shift moves bits left, doubling the number

Step 6: Perform right shift: a >> 1

a: 00000110 (6)
a >> 1: 00000011 (3)

Why: Right shift moves bits right, halving the number

Result:

Final bit results:
AND: 00000010 (2)
OR: 00000111 (7)
XOR: 00000101 (5)
NOT a: 11111001 (-7)
Left shift a << 1: 00001100 (12)
Right shift a >> 1: 00000011 (3)

Annotated Code

DSA Javascript

class BitManipulation {
  static and(a, b) {
    return a & b; // bitwise AND
  }

  static or(a, b) {
    return a | b; // bitwise OR
  }

  static xor(a, b) {
    return a ^ b; // bitwise XOR
  }

  static not(a) {
    return ~a; // bitwise NOT
  }

  static leftShift(a, n) {
    return a << n; // left shift by n bits
  }

  static rightShift(a, n) {
    return a >> n; // right shift by n bits
  }
}

// Driver code using input from dry run
const a = 6; // 00000110
const b = 3; // 00000011

console.log('AND:', BitManipulation.and(a, b)); // 2
console.log('OR:', BitManipulation.or(a, b)); // 7
console.log('XOR:', BitManipulation.xor(a, b)); // 5
console.log('NOT a:', BitManipulation.not(a)); // -7
console.log('Left shift a << 1:', BitManipulation.leftShift(a, 1)); // 12
console.log('Right shift a >> 1:', BitManipulation.rightShift(a, 1)); // 3

return a & b; // bitwise AND

combine bits keeping only those on in both numbers

return a | b; // bitwise OR

combine bits turning on if either number has bit on

return a ^ b; // bitwise XOR

combine bits turning on only if bits differ

return ~a; // bitwise NOT

flip every bit of the number

return a << n; // left shift by n bits

move bits left by n places, filling with zeros

return a >> n; // right shift by n bits

move bits right by n places, filling with sign bit

Output

AND: 2

OR: 7

XOR: 5

NOT a: -7

Left shift a << 1: 12

Right shift a >> 1: 3

Complexity Analysis

Time: O(1) because bitwise operations work directly on fixed-size bits in constant time

Space: O(1) because no extra memory is needed beyond input and output variables

vs Alternative: Bitwise operations are much faster and use less memory than arithmetic or string-based methods for manipulating bits

Edge Cases

a or b is zero

AND results in zero, OR and XOR behave normally

DSA Javascript

return a & b; // bitwise AND

left shift causes bits to move out of fixed size

bits shifted out are lost, result may overflow standard integer size

DSA Javascript

return a << n; // left shift by n bits

right shift on negative number

sign bit is preserved (arithmetic shift), keeping negative sign

DSA Javascript

return a >> n; // right shift by n bits

When to Use This Pattern

When you need to quickly check, flip, or move individual bits in numbers, use bit manipulation because it is fast and memory efficient.

Common Mistakes

Mistake: Using logical operators (&&, ||) instead of bitwise (&, |)
Fix: Use & for AND, | for OR to operate on bits, not booleans

Mistake: Confusing left shift with multiplication without considering overflow
Fix: Remember left shift doubles only if no bits are lost; watch for overflow

Mistake: Not understanding that NOT flips all bits including sign bit, causing negative results
Fix: Know that ~a equals -(a+1) in two's complement representation

Summary

It changes numbers by flipping or moving their bits using AND, OR, XOR, NOT, and shifts.

Use it when you want fast, low-level control over individual bits in numbers.

Think of bits as tiny switches you can turn on/off or slide left/right to get new numbers.

Practice

1. What is the result of the bitwise AND operation between 5 and 3? (5 & 3)

easy

A. 1

B. 7

C. 0

D. 8

Solution

1. Step 1: Convert numbers to binary

   5 in binary is 0101, 3 in binary is 0011.

2. Step 2: Perform bitwise AND

   0101 & 0011 = 0001 (only bits set in both numbers remain set).

3. Final Answer:

   1 -> Option A

4. Quick Check:

   5 & 3 = 1 [OK]

Hint: AND keeps bits set in both numbers only [OK]

Common Mistakes:

• Confusing AND with OR operation
• Not converting numbers to binary before operation
• Assuming decimal addition instead of bitwise

2. Which of the following is the correct syntax for performing a bitwise XOR operation between variables a and b in JavaScript?

easy

A. let result = a | b;

B. let result = a && b;

C. let result = a % b;

D. let result = a ^ b;

Solution

1. Step 1: Identify bitwise XOR operator in JavaScript

   The XOR operator is represented by the caret symbol (^).

2. Step 2: Check syntax correctness

   let result = a ^ b; uses a ^ b, which is the correct syntax for bitwise XOR.

3. Final Answer:

   let result = a ^ b; -> Option D

4. Quick Check:

   XOR operator is ^ in JavaScript [OK]

Hint: XOR uses ^ symbol in JavaScript [OK]

Common Mistakes:

• Using && which is logical AND, not bitwise
• Using | which is bitwise OR, not XOR
• Using % which is modulo, unrelated to bits

3. What will be the output of the following JavaScript code?

let x = 8; // binary 1000
let y = x >> 2;
console.log(y);

medium

A. 2

B. 4

C. 1

D. 0

Solution

1. Step 1: Understand right shift operation

   Right shift by 2 means move bits 2 places to the right, dropping the rightmost bits.

2. Step 2: Apply right shift on binary 1000

   1000 >> 2 becomes 0010, which is decimal 2.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   8 >> 2 = 2 [OK]

Hint: Right shift divides by 2 for each shift [OK]

Common Mistakes:

• Confusing right shift with left shift
• Not converting binary to decimal after shift
• Assuming shift adds zeros on left without dropping bits

4. Find the error in the following code snippet that attempts to flip all bits of a number n using bitwise NOT:

let n = 5;
let flipped = ~n;
console.log(flipped);

What is the issue?

medium

A. Missing parentheses around ~n

B. Bitwise NOT returns a negative number due to two's complement representation

C. Variable n must be a string for bitwise NOT

D. Bitwise NOT operator (~) is not supported in JavaScript

Solution

1. Step 1: Understand bitwise NOT in JavaScript

   Bitwise NOT flips all bits and returns the two's complement negative number.

2. Step 2: Explain why output is negative

   For 5 (00000101), ~5 flips bits to 11111010 which is -6 in two's complement.

3. Final Answer:

   Bitwise NOT returns a negative number due to two's complement representation -> Option B

4. Quick Check:

   ~n flips bits and returns negative number [OK]

Hint: Bitwise NOT flips bits and returns negative in JS [OK]

Common Mistakes:

• Expecting positive flipped bits as output
• Thinking ~ is unsupported operator
• Assuming input must be string for bitwise ops

5. You want to set the 3rd bit (0-indexed from right) of a number num to 1 without changing other bits. Which expression correctly does this in JavaScript?

hard

A. num = num ^ (1 << 3);

B. num = num & (1 << 3);

C. num = num | (1 << 3);

D. num = num << 3;

Solution

1. Step 1: Understand setting a bit using OR and shift

   Left shift 1 by 3 gives 00001000, which targets the 3rd bit.

2. Step 2: Use OR to set the bit without changing others

   OR with this mask sets the 3rd bit to 1, keeping others unchanged.

3. Final Answer:

   num = num | (1 << 3); -> Option C

4. Quick Check:

   Use OR with shifted 1 to set bit [OK]

Hint: Use OR with (1 << bit_position) to set bit [OK]

Common Mistakes:

• Using AND which clears bits instead of setting
• Using XOR which toggles bits and may unset
• Using left shift alone which changes number value