Set Clear Toggle a Specific Bit in DSA Javascript - Execution Trace

Concept Flow - Set Clear Toggle a Specific Bit

Start with number

↓

Choose bit position

↓

Create mask: 1 << position

↓

Operation?

↓

Apply bitwise operation

↓

Resulting number with bit changed

Start with a number and a bit position. Create a mask by shifting 1 to that position. Then apply set, clear, or toggle operation using bitwise operators to change that bit.

Execution Sample

DSA Javascript

let num = 10; // binary 1010
let pos = 1;
// Set bit
num = num | (1 << pos);
console.log(num);

This code sets the bit at position 1 of number 10 (binary 1010), changing it if needed.

Execution Table

Step	Operation	Number (decimal)	Number (binary)	Mask (binary)	Bitwise Operation	Result (decimal)	Result (binary)
1	Start	10	00001010	-	-	10	00001010
2	Choose bit position	10	00001010	-	-	10	00001010
3	Create mask	10	00001010	00000010	-	10	00001010
4	Set bit	10	00001010	00000010	10 | 2	10	00001010
5	Clear bit	10	00001010	00000010	10 & ~2	8	00001000
6	Toggle bit	10	00001010	00000010	10 ^ 2	8	00001000
7	Toggle bit again	8	00001000	00000010	8 ^ 2	10	00001010
8	End	10	00001010	-	-	10	00001010

💡 All operations complete; toggling twice returns to original number.

Variable Tracker

Variable	Start	After Step 3	After Set (Step 4)	After Clear (Step 5)	After Toggle (Step 6)	After Toggle again (Step 7)	Final
num	10	10	10	8	8	10	10
pos	1	1	1	1	1	1	1
mask	-	2	2	2	2	2	2

Key Moments - 3 Insights

Why does setting a bit with OR not change the number if the bit is already 1?

Because OR with 1 keeps the bit as 1, so if the bit was already set, the number stays the same (see Step 4 in execution_table).

Why do we use ~ (NOT) when clearing a bit?

We invert the mask so that all bits are 1 except the target bit, then AND with the number clears that bit (see Step 5 in execution_table).

How does toggling a bit twice return the number to original?

XOR flips the bit; doing it twice flips it back (see Steps 6 and 7 in execution_table).

Visual Quiz - 3 Questions

Look at the execution_table at Step 5, what is the decimal result after clearing the bit?

A 2

B 10

C 8

D 0

💡 Hint

Check the 'Result (decimal)' column at Step 5 in execution_table.

At which step does toggling the bit first change the number from 10 to 8?

A Step 6

B Step 5

C Step 4

D Step 7

💡 Hint

Look at the 'Operation' and 'Result (decimal)' columns in execution_table.

If we change the bit position to 3, what would the mask binary be?

A 00000100

B 00001000

C 00000010

D 00010000

💡 Hint

Mask is 1 shifted left by position; see how mask is created in Step 3.

Concept Snapshot

Set, Clear, Toggle a bit:
- Use mask = 1 << position
- Set: num | mask
- Clear: num & ~mask
- Toggle: num ^ mask
- Bit positions start at 0 (rightmost bit)
- XOR toggles bit, doing twice restores original

Full Transcript

This lesson shows how to set, clear, and toggle a specific bit in a number using bitwise operations. We start with a number and choose a bit position. We create a mask by shifting 1 left by that position. To set a bit, we OR the number with the mask. To clear a bit, we AND the number with the inverted mask. To toggle a bit, we XOR the number with the mask. Toggling twice returns the number to its original value. The execution table traces these steps with decimal and binary values, showing how the number changes. Key moments clarify why OR doesn't change a bit if it's already set, why NOT is used for clearing, and how toggling twice works. The quiz tests understanding of these operations and mask creation.

Practice

1. What does the operation num | (1 << k) do to the number num in terms of bits?

easy

A. Toggles the k-th bit of num

B. Sets the k-th bit of num to 1

C. Clears the k-th bit of num to 0

D. Checks if the k-th bit of num is set

Solution

1. Step 1: Understand bitwise OR with shifted 1

   The expression 1 << k creates a number with only the k-th bit set to 1.

2. Step 2: Apply OR operation to set bit

   Using num | (1 << k) sets the k-th bit of num to 1 without changing other bits.

3. Final Answer:

   Sets the k-th bit of num to 1 -> Option B

4. Quick Check:

   Bitwise OR with 1 at position k sets that bit [OK]

Hint: Use OR with shifted 1 to set a bit [OK]

Common Mistakes:

• Confusing set with clear operation
• Thinking it toggles the bit
• Assuming it checks the bit instead

2. Which of the following JavaScript expressions correctly clears the k-th bit of a number num?

easy

A. num ^ (1 << k)

B. num | ~(1 << k)

C. num & (1 << k)

D. num & ~(1 << k)

Solution

1. Step 1: Understand clearing a bit

   To clear the k-th bit, we want to set it to 0 while keeping others unchanged.

2. Step 2: Use AND with NOT mask

   The mask ~(1 << k) has all bits 1 except the k-th bit 0. ANDing with this clears the k-th bit.

3. Final Answer:

   num & ~(1 << k) -> Option D

4. Quick Check:

   AND with inverted mask clears bit [OK]

Hint: AND with NOT of shifted 1 clears a bit [OK]

Common Mistakes:

• Using OR instead of AND to clear bits
• Forgetting to invert the mask
• Using XOR which toggles instead of clears

3. What is the output of the following JavaScript code?

let num = 10; // binary 1010
let k = 1;
num = num ^ (1 << k);
console.log(num);

medium

A. 8

B. 10

C. 12

D. 14

Solution

1. Step 1: Understand initial values and bit positions

   num = 10 (binary 1010), k = 1 means second bit from right (0-based).

2. Step 2: Apply XOR to toggle k-th bit

   1 << 1 = 2 (binary 0010). XOR toggles bit 1: 1010 ^ 0010 = 1000 (binary), which is 8 decimal.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   XOR toggles bit 1: 10 -> 8 [OK]

Hint: XOR toggles the bit at position k [OK]

Common Mistakes:

• Confusing XOR with OR or AND
• Miscounting bit positions (0-based)
• Not converting binary to decimal correctly

4. The following code is intended to toggle the k-th bit of num. What is the error?

function toggleBit(num, k) {
  return num & (1 << k);
}
console.log(toggleBit(5, 0));

medium

A. Function does not return a number

B. Incorrect bit shift direction

C. Using AND instead of XOR to toggle the bit

D. Missing parentheses around bit shift

Solution

1. Step 1: Identify intended toggle operation

   Toggling a bit requires flipping it: 0 to 1 or 1 to 0.

2. Step 2: Check the operator used

   The code uses AND (&) which masks bits, not toggles. XOR (^) is needed to toggle bits.

3. Final Answer:

   Using AND instead of XOR to toggle the bit -> Option C

4. Quick Check:

   Toggle needs XOR, not AND [OK]

Hint: Toggle bits with XOR, not AND [OK]

Common Mistakes:

• Using AND or OR instead of XOR for toggle
• Confusing toggle with set or clear
• Ignoring operator precedence

5. You want to write a function updateBit(num, k, bitValue) that sets the k-th bit of num to bitValue (0 or 1). Which of the following implementations is correct?

hard

A. return (num & ~(1 << k)) | (bitValue << k);

B. return (num | (bitValue << k)) & ~(bitValue << k);

C. return num ^ (bitValue << k);

D. return num & (bitValue << k);

Solution

1. Step 1: Clear the k-th bit first

   Use num & ~(1 << k) to clear the k-th bit regardless of its current value.

2. Step 2: Set the k-th bit to bitValue

   Shift bitValue to k-th position and OR it with cleared number to set the bit correctly.

3. Final Answer:

   return (num & ~(1 << k)) | (bitValue << k); -> Option A

4. Quick Check:

   Clear then set bit with OR [OK]

Hint: Clear bit then OR with shifted bitValue to update [OK]

Common Mistakes:

• Using XOR which toggles instead of sets
• Not clearing bit before setting
• Using AND which masks bits incorrectly