Array Rotation Techniques in DSA Typescript - Execution Trace

Concept Flow - Array Rotation Techniques

Start with array

↓

Choose rotation direction

↓

Rotate Left

↓

Shift elements accordingly

↓

Handle wrap-around

↓

Update array state

↓

Done

This flow shows how an array is rotated either left or right by shifting elements and wrapping around the ends.

Execution Sample

DSA Typescript

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

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

Execution Table

Step	Operation	Array State	Pointer Changes	Visual State
1	Start with original array	[1, 2, 3, 4, 5]	head=0	1 -> 2 -> 3 -> 4 -> 5 -> null
2	Calculate k=2 for rotation	[1, 2, 3, 4, 5]	k=2	1 -> 2 -> 3 -> 4 -> 5 -> null
3	Slice from k to end	[3, 4, 5]	slice1 = arr[2..end]	3 -> 4 -> 5 -> null
4	Slice from start to k	[1, 2]	slice2 = arr[0..1]	1 -> 2 -> null
5	Concatenate slices	[3, 4, 5, 1, 2]	rotated = slice1 + slice2	3 -> 4 -> 5 -> 1 -> 2 -> null
6	Print rotated array	[3, 4, 5, 1, 2]	output	3 -> 4 -> 5 -> 1 -> 2 -> null
7	End	[3, 4, 5, 1, 2]	-	Rotation complete

💡 Rotation done after concatenating slices and printing the result.

Variable Tracker

Variable	Start	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]
k	undefined	2	2	2	2
slice1	undefined	[3, 4, 5]	[3, 4, 5]	[3, 4, 5]	[3, 4, 5]
slice2	undefined	undefined	[1, 2]	[1, 2]	[1, 2]
rotated	undefined	undefined	undefined	[3, 4, 5, 1, 2]	[3, 4, 5, 1, 2]

Key Moments - 3 Insights

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

Because rotating left by k means elements from index k to end come first, then elements from start to k-1 follow. This is shown in execution_table rows 3, 4, and 5.

What happens if k is larger than the array length?

We usually take k modulo array length to avoid errors. This ensures rotation wraps correctly. This is not shown in this example but is important for correctness.

Why do we concatenate slices instead of shifting elements one by one?

Concatenation is simpler and efficient in many languages. Shifting one by one is slower and more complex. The execution_table shows slicing and concatenation steps clearly.

Visual Quiz - 3 Questions

Look at the execution_table at Step 3, what is the array slice1?

A [1, 2, 3]

B [1, 2]

C [3, 4, 5]

D [4, 5]

💡 Hint

Check the 'Array State' column at Step 3 in execution_table.

At which step does the rotated array become [3, 4, 5, 1, 2]?

A Step 4

B Step 5

C Step 6

D Step 3

💡 Hint

Look at the 'Array State' column and find when concatenation happens.

If k was 0, what would be the rotated array after Step 5?

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

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

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

D []

💡 Hint

Consider what slicing arr.slice(0) and arr.slice(0, 0) returns.

Concept Snapshot

Array Rotation Techniques:
- Rotate left by k: newArray = arr.slice(k).concat(arr.slice(0, k))
- Rotate right by k: newArray = arr.slice(-k).concat(arr.slice(0, -k))
- Use modulo for k > length
- Slicing splits array, concatenation joins
- Efficient and simple method

Full Transcript

This visualization shows how to rotate an array by shifting elements. We start with the original array and choose the rotation count k. For left rotation, we slice the array from index k to the end, then slice from start to k, and concatenate these two slices. This results in the rotated array. The execution table tracks each step, showing how slices are created and combined. Variables like arr, k, slice1, slice2, and rotated are tracked to show their values at each step. Key moments clarify why slicing and concatenation are used and how to handle cases when k is larger than the array length. The quiz tests understanding of these steps and the resulting array states. This method is simple, efficient, and widely used for array rotation.

Practice

1. What does rotating an array to the right by 1 position mean?
Example: [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

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

2. Step 2: Apply to example 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: Right rotate by 1 means last element moves front [OK]

Common Mistakes:

• Confusing right rotation with left rotation
• Not moving the last element to front
• Shifting elements incorrectly

2. Which of the following TypeScript code snippets correctly rotates an array arr to the left by 1 position?

easy

A. arr.push(arr.shift()!)

B. arr.unshift(arr.pop()!)

C. arr.pop(); arr.unshift(arr.pop()!)

D. arr.shift(); arr.push(arr.shift()!)

Solution

1. Step 1: Understand left rotation by 1

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

2. Step 2: Check code snippets

   arr.push(arr.shift()!) uses arr.shift() to remove first element and arr.push() to add it at end, correct for left rotation.

3. Final Answer:

   arr.push(arr.shift()!) -> Option A

4. Quick Check:

   Left rotate = shift then push [OK]

Hint: Left rotate by 1 = remove first, add to end [OK]

Common Mistakes:

• Using pop instead of shift for left rotation
• Using unshift with pop for left rotation
• Calling shift or pop twice incorrectly

3. What is the output of the following TypeScript 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. [50, 10, 20, 30, 40]

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

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

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

Solution

1. Step 1: Understand slicing for rotation

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

2. Step 2: Concatenate slices

   Concatenating gives [40, 50, 10, 20, 30], which is right rotation by 2.

3. Final Answer:

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

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 with wrong indices
• Confusing left and right rotation
• Not concatenating slices in correct order

4. Find the error in this TypeScript function that rotates an array to the left by k positions:

function rotateLeft(arr: number[], k: number): number[] {
  for (let i = 0; i < k; i++) {
    arr.push(arr.shift());
  }
  return arr;
}

medium

A. arr.push() should be arr.unshift()

B. Loop should run from i = 1 to k

C. arr.shift() can return undefined, causing push(undefined)

D. Function should return void, not number[]

Solution

1. Step 1: Check arr.shift() return type

   arr.shift() returns element or undefined if array empty. Here, no check for undefined.

2. Step 2: Effect on arr.push()

   If arr.shift() returns undefined, arr.push(undefined) adds undefined to array, causing incorrect result or runtime issues.

3. Final Answer:

   arr.shift() can return undefined, causing push(undefined) -> Option C

4. Quick Check:

   shift may be undefined, must check [OK]

Hint: Check shift() return before push to avoid undefined [OK]

Common Mistakes:

• Ignoring undefined from shift()
• Wrong loop range assumptions
• Confusing push and unshift methods

5. Given an array arr of length n, how can you rotate it to the left by k positions efficiently without using extra space? Choose the correct approach.

hard

A. Use a temporary array to store first k elements, then shift rest left, then copy temp at end

B. Sort the array and then rotate by k positions

C. Rotate one by one k times using shift and push

D. Reverse first k elements, reverse last n-k elements, then reverse whole array

Solution

1. Step 1: Understand in-place rotation using reversal

   Reversing parts of array and then whole array rotates left by k without extra space.

2. Step 2: Apply reversal steps

   Reverse first k elements, reverse last n-k elements, then reverse entire array to get rotated array.

3. Final Answer:

   Reverse first k, reverse last n-k, reverse whole array -> Option D

4. Quick Check:

   Reversal method = in-place left rotate [OK]

Hint: Use triple reversal for in-place left rotation [OK]

Common Mistakes:

• Using extra array when not needed
• Rotating one by one causing O(n*k) time
• Sorting array unrelated to rotation