Why Array Rotation Techniques in DSA Typescript?

The Big Idea

What if you could reorder your entire playlist in just a few smart moves instead of tedious shuffling?

The Scenario

Imagine you have a list of your favorite songs, and you want to play them starting from a different song without changing the order of the others. Doing this by moving each song one by one manually is tiring and confusing.

The Problem

Manually moving each item in the list takes a lot of time and effort, especially if the list is long. It's easy to make mistakes, lose track of items, or accidentally overwrite songs. This slow process can ruin the fun of quickly changing the order.

The Solution

Array rotation techniques let you shift the list efficiently by a certain number of steps. Instead of moving items one by one, these methods rearrange the list smartly, saving time and avoiding errors. This makes changing the order quick and reliable.

Before vs After

✗ Before

for (let i = 0; i < k; i++) {
  let first = arr[0];
  for (let j = 0; j < arr.length - 1; j++) {
    arr[j] = arr[j + 1];
  }
  arr[arr.length - 1] = first;
}

✓ After

function rotateArray(arr: number[], k: number): void {
  k = k % arr.length;
  reverse(arr, 0, arr.length - 1);
  reverse(arr, 0, arr.length - k - 1);
  reverse(arr, arr.length - k, arr.length - 1);
}

function reverse(arr: number[], start: number, end: number): void {
  while (start < end) {
    const temp = arr[start];
    arr[start] = arr[end];
    arr[end] = temp;
    start++;
    end--;
  }
}

What It Enables

It enables fast and error-free rearrangement of lists, making tasks like scheduling, gaming, and data processing smoother and more efficient.

Real Life Example

In a photo slideshow app, rotating the array of images lets you start the show from any picture without changing the original order, giving users a seamless experience.

Key Takeaways

Manual shifting is slow and error-prone.

Rotation techniques rearrange arrays efficiently.

They help in many real-world applications like playlists and slideshows.

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