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

Concept Flow - Bit Manipulation Basics AND OR XOR NOT Left Right Shift

Start with two numbers

↓

Apply AND (&)

→Result: bits set only if both bits are 1

↓

Apply OR (|)

→Result: bits set if any bit is 1

↓

Apply XOR (^)

→Result: bits set if bits differ

↓

Apply NOT (~)

→Result: bits flipped

↓

Apply Left Shift (<<)

→Result: bits shifted left, zeros fill right

↓

Apply Right Shift (>>)

→Result: bits shifted right, sign bit fills left

↓

End

Start with two numbers and apply bitwise AND, OR, XOR, NOT, left shift, and right shift operations step-by-step to see how bits change.

Execution Sample

DSA Javascript

let a = 5;  // 0101 in binary
let b = 3;  // 0011 in binary
console.log(a & b);  // AND
console.log(a | b);  // OR
console.log(a ^ b);  // XOR
console.log(~a);     // NOT
console.log(a << 1); // Left shift
console.log(a >> 1); // Right shift

This code applies bitwise AND, OR, XOR, NOT, left shift, and right shift on two numbers and prints the results.

Execution Table

Step	Operation	Input Values (a, b)	Bitwise Operation	Result (decimal)	Result (binary)
1	AND (&)	a=5 (0101), b=3 (0011)	0101 & 0011	1	0001
2	OR (|)	a=5 (0101), b=3 (0011)	0101 | 0011	7	0111
3	XOR (^)	a=5 (0101), b=3 (0011)	0101 ^ 0011	6	0110
4	NOT (~)	a=5 (0101)	~0101	-6	11111111111111111111111111111010 (32-bit two's complement)
5	Left Shift (<< 1)	a=5 (0101)	0101 << 1	10	1010
6	Right Shift (>> 1)	a=5 (0101)	0101 >> 1	2	0010
7	End	-	-	-	-

💡 All bitwise operations completed on inputs a=5 and b=3.

Variable Tracker

Variable	Start	After AND	After OR	After XOR	After NOT	After Left Shift	After Right Shift	Final
a	5 (0101)	5 (0101)	5 (0101)	5 (0101)	5 (0101)	5 (0101)	5 (0101)	5 (0101)
b	3 (0011)	3 (0011)	3 (0011)	3 (0011)	-	-	-	3 (0011)
result	-	1 (0001)	7 (0111)	6 (0110)	-6 (two's complement)	10 (1010)	2 (0010)	-

Key Moments - 3 Insights

Why does the NOT (~) operation on 5 result in -6 instead of a positive number?

Because NOT flips all bits including the sign bit in two's complement representation, resulting in a negative number. See step 4 in execution_table where ~0101 becomes 11111111111111111111111111111010, which is -6.

Why does left shift (<<) multiply the number by 2?

Left shift moves bits to the left, adding a zero on the right, effectively doubling the number. Step 5 shows 0101 (5) shifted left once becomes 1010 (10).

What happens to bits when right shifting a positive number?

Right shift moves bits to the right, discarding the rightmost bit and filling the left with the sign bit (0 for positive). Step 6 shows 0101 (5) shifted right once becomes 0010 (2).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the binary result of a ^ b?

A 0001

B 0110

C 0111

D 1010

💡 Hint

Check the 'Result (binary)' column at step 3 in execution_table.

At which step does the result become negative due to two's complement?

A Step 2 (OR)

B Step 4 (NOT)

C Step 5 (Left Shift)

D Step 6 (Right Shift)

💡 Hint

Look for negative decimal results in the 'Result (decimal)' column in execution_table.

If we change a from 5 to 6, what would be the result of a & b at step 1?

A 2

B 1

C 3

D 0

💡 Hint

Calculate bitwise AND of 6 (0110) and 3 (0011) and check the 'Result (decimal)' logic in execution_table step 1.

Concept Snapshot

Bit Manipulation Basics:
- AND (&): bits 1 only if both bits 1
- OR (|): bits 1 if any bit 1
- XOR (^): bits 1 if bits differ
- NOT (~): flips all bits (two's complement)
- Left Shift (<<): shifts bits left, multiplies by 2
- Right Shift (>>): shifts bits right, divides by 2 (sign preserved)

Full Transcript

This lesson shows how to use basic bit manipulation operations on two numbers. We start with numbers 5 and 3, represented in binary as 0101 and 0011. We apply AND, OR, XOR, NOT, left shift, and right shift operations step-by-step. Each operation changes bits in a specific way: AND keeps bits set only if both bits are 1; OR sets bits if any bit is 1; XOR sets bits if bits differ; NOT flips all bits including the sign bit, resulting in a negative number in two's complement; left shift moves bits left adding zeros on the right, doubling the number; right shift moves bits right filling left with the sign bit, halving the number for positives. The execution table tracks each step's input, operation, and result in decimal and binary. Variable tracker shows how variables change after each operation. Key moments clarify common confusions like why NOT results in negative numbers and how shifts affect values. The visual quiz tests understanding by asking about specific steps and results. This helps beginners see exactly how bits change with each operation.

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