Array Rotation Techniques in DSA Javascript - Execution Trace

Concept Flow - Array Rotation Techniques

Start with array

↓

Choose rotation direction

↓

Rotate Left

↓

Shift elements accordingly

↓

Wrap shifted elements to other end

↓

Result: rotated array

Start with an array, choose left or right rotation, shift elements, wrap shifted elements to the other end, and get the rotated array.

Execution Sample

DSA Javascript

const arr = [1, 2, 3, 4, 5];
const k = 2;
// Rotate left by k
const rotated = arr.slice(k % arr.length).concat(arr.slice(0, k % arr.length));
console.log(rotated);

Rotate the array [1,2,3,4,5] left by 2 positions.

Execution Table

Step	Operation	Array State	Explanation	Visual State
1	Start with original array	[1, 2, 3, 4, 5]	Initial array before rotation	1 -> 2 -> 3 -> 4 -> 5 -> null
2	Calculate k modulo length	k = 2 % 5 = 2	Effective rotation steps	No change
3	Slice from k to end	[3, 4, 5]	Take elements from index 2 to end	3 -> 4 -> 5 -> null
4	Slice from start to k	[1, 2]	Take elements from start to index 2	1 -> 2 -> null
5	Concatenate slices	[3, 4, 5, 1, 2]	Combine slices to form rotated array	3 -> 4 -> 5 -> 1 -> 2 -> null
6	Output rotated array	[3, 4, 5, 1, 2]	Final rotated array after left rotation	3 -> 4 -> 5 -> 1 -> 2 -> null
7	End	-	Rotation complete	-

💡 Rotation ends after concatenating slices to form the rotated array.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
arr	[1, 2, 3, 4, 5]	[1, 2, 3, 4, 5]	[1, 2, 3, 4, 5]	[1, 2, 3, 4, 5]	[1, 2, 3, 4, 5]	[1, 2, 3, 4, 5]
k	2	2	2	2	2	2
slice1	N/A	N/A	[3, 4, 5]	[3, 4, 5]	[3, 4, 5]	[3, 4, 5]
slice2	N/A	N/A	N/A	[1, 2]	[1, 2]	[1, 2]
rotated	N/A	N/A	N/A	N/A	[3, 4, 5, 1, 2]	[3, 4, 5, 1, 2]

Key Moments - 3 Insights

Why do we use k modulo array length before rotation?

Because rotating by the array length or its multiples results in the same array. Using k % length ensures we only rotate the necessary steps, as shown in step 2 of the execution_table.

Why do we slice the array into two parts before concatenation?

Slicing splits the array at the rotation point. The part after k moves to the front, and the part before k moves to the end. This is shown in steps 3 and 4 where slices are created, then combined in step 5.

What happens if k is zero or equal to array length?

If k is zero or a multiple of the array length, the array remains unchanged after rotation. This is because the slices will be the whole array and an empty array, resulting in the original array as in step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 4?

A [3, 4, 5]

B [3, 4, 5, 1, 2]

C [1, 2]

D [1, 2, 3, 4, 5]

💡 Hint

Check the 'Array State' column at step 4 in the execution_table.

At which step does the rotation actually combine the two slices?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look for the step where 'Concatenate slices' happens in the execution_table.

If k was 5 for the array of length 5, what would be the rotated array?

A [1, 2, 3, 4, 5]

B [5, 1, 2, 3, 4]

C [2, 3, 4, 5, 1]

D []

💡 Hint

Refer to the key_moments about k modulo length and step 2 in the execution_table.

Concept Snapshot

Array Rotation Techniques:
- Rotate array left or right by k steps.
- Use k % array.length to handle large k.
- For left rotation: newArray = arr.slice(k).concat(arr.slice(0, k))
- For right rotation: newArray = arr.slice(-k).concat(arr.slice(0, -k))
- Result is a rotated array with elements shifted and wrapped around.

Full Transcript

This visual execution trace shows how to rotate an array by k positions to the left. We start with the original array and calculate k modulo the array length to handle cases where k is larger than the array size. Then, we slice the array into two parts: from k to the end, and from the start to k. These slices are concatenated to form the rotated array. The variable tracker shows how slices and the rotated array change step by step. Key moments clarify why modulo is used and how slicing works. The quizzes test understanding of array states at different steps and the effect of k values.

Practice

1. What does rotating an array to the right by 1 position mean?
arr = [1, 2, 3, 4] rotated right by 1 becomes?

easy

A. [4, 1, 2, 3]

B. [2, 3, 4, 1]

C. [1, 2, 3, 4]

D. [3, 4, 1, 2]

Solution

1. Step 1: Understand right rotation by 1

   Right rotation by 1 means the last element moves to the front, and others shift right.

2. Step 2: Apply to given array

   Last element 4 moves to front, rest shift right: [4, 1, 2, 3].

3. Final Answer:

   [4, 1, 2, 3] -> Option A

4. Quick Check:

   Right rotate by 1 = last element front [OK]

Hint: Last element moves front on right rotation by 1 [OK]

Common Mistakes:

• Confusing left and right rotation
• Shifting elements left instead of right
• Not moving last element to front

2. Which of the following is the correct JavaScript syntax to rotate an array arr to the left by 1 position?

easy

A. arr.unshift(arr.pop())

B. arr.push(arr.shift())

C. arr.pop(arr.unshift())

D. arr.shift(arr.push())

Solution

1. Step 1: Understand left rotation by 1

   Left rotation by 1 means first element moves to the end.

2. Step 2: Match syntax to operation

   arr.shift() removes first element, arr.push() adds it to end. So arr.push(arr.shift()) rotates left by 1.

3. Final Answer:

   arr.push(arr.shift()) -> Option B

4. Quick Check:

   Left rotate = shift then push [OK]

Hint: Left rotate = shift first, then push it back [OK]

Common Mistakes:

• Using pop instead of shift for left rotation
• Using unshift incorrectly
• Mixing push and pop order

3. What is the output of the following code?

const arr = [10, 20, 30, 40, 50];
const k = 2;
const rotated = arr.slice(-k).concat(arr.slice(0, arr.length - k));
console.log(rotated);

medium

A. [40, 50, 10, 20, 30]

B. [30, 40, 50, 10, 20]

C. [50, 10, 20, 30, 40]

D. [20, 30, 40, 50, 10]

Solution

1. Step 1: Understand slicing for right rotation by k=2

   arr.slice(-2) gets last 2 elements: [40, 50]. arr.slice(0, 3) gets first 3 elements: [10, 20, 30].

2. Step 2: Concatenate slices

   Concatenate [40, 50] + [10, 20, 30] = [40, 50, 10, 20, 30].

3. Final Answer:

   [40, 50, 10, 20, 30] -> Option A

4. Quick Check:

   Right rotate by 2 = last 2 front [OK]

Hint: Right rotate by k = last k elements + rest [OK]

Common Mistakes:

• Using slice(0, k) instead of slice(-k)
• Concatenating in wrong order
• Confusing left and right rotation

4. Find the error in this code that tries to rotate an array arr left by k positions:

function rotateLeft(arr, k) {
  for(let i = 0; i < k; i++) {
    arr.unshift(arr.shift());
  }
  return arr;
}

medium

A. Using unshift instead of push inside loop

B. Loop should run from i = 1 to k

C. No error, code works correctly

D. shift() removes last element, should use pop()

Solution

1. Step 1: Analyze loop operation

   Inside loop, arr.shift() removes first element correctly for left rotation.

2. Step 2: Check insertion method

   arr.unshift() adds element to front, which reverses the shift effect. It should be arr.push() to add at end.

3. Final Answer:

   No error, code works correctly -> Option C

4. Quick Check:

   Code rotates left by k positions correctly [OK]

Hint: Left rotate = shift then push, not unshift [OK]

Common Mistakes:

• Using unshift instead of push
• Confusing shift and pop
• Incorrect loop range

5. Given an array arr = [1, 2, 3, 4, 5], how can you rotate it left by k = 7 positions efficiently without extra space?

hard

A. Rotate left by k positions using nested loops

B. Rotate left by k positions directly using slice and concat

C. Rotate right by k positions using pop and unshift

D. Rotate left by k % arr.length = 2 positions using reversal algorithm

Solution

1. Step 1: Calculate effective rotation

   Since k=7 and arr.length=5, effective rotation is k % 5 = 2.

2. Step 2: Use reversal algorithm for in-place rotation

   Reverse first 2 elements, reverse last 3 elements, then reverse whole array to rotate left by 2 efficiently without extra space.

3. Final Answer:

   Rotate left by k % arr.length = 2 positions using reversal algorithm -> Option D

4. Quick Check:

   Use k mod length and reversal for efficient rotation [OK]

Hint: Use k mod array length and reversal for efficient rotation [OK]

Common Mistakes:

• Rotating by k without modulo causes extra rotations
• Using slice creates extra space
• Using nested loops is inefficient