Array Rotation Techniques in DSA Javascript

Mental Model

Rotating an array means moving its elements so that some elements shift to the front or back, like a circle turning.

Analogy: Imagine a carousel with horses arranged in a circle. Rotating the array is like spinning the carousel so the horses move positions but stay in the same circle.

Original array:
[1] -> [2] -> [3] -> [4] -> [5] -> null

Rotate right by 2 steps:
[4] -> [5] -> [1] -> [2] -> [3] -> null

Dry Run Walkthrough

Input: array: [1, 2, 3, 4, 5], rotate right by 2

Goal: Move last 2 elements to the front, shifting others right

Step 1: Calculate effective rotation steps as 2 (since array length is 5)

[1] -> [2] -> [3] -> [4] -> [5] -> null

Why: We need to know how many steps to rotate within array length

Step 2: Split array into two parts: first part [1, 2, 3], second part [4, 5]

[1] -> [2] -> [3] -> null and [4] -> [5] -> null

Why: We separate the elements to rotate the last part to front

Step 3: Concatenate second part [4, 5] before first part [1, 2, 3]

[4] -> [5] -> [1] -> [2] -> [3] -> null

Why: Joining parts in new order completes the rotation

Result:

[4] -> [5] -> [1] -> [2] -> [3] -> null

Annotated Code

DSA Javascript

class ArrayRotator {
  constructor(arr) {
    this.arr = arr;
  }

  rotateRight(k) {
    const n = this.arr.length;
    if (n === 0) return;
    k = k % n; // effective rotation
    if (k === 0) return;

    // split and join
    const part1 = this.arr.slice(0, n - k); // first part
    const part2 = this.arr.slice(n - k);    // last k elements
    this.arr = part2.concat(part1); // rotated array
  }

  print() {
    console.log(this.arr.join(' -> ') + ' -> null');
  }
}

// Driver code
const rotator = new ArrayRotator([1, 2, 3, 4, 5]);
rotator.rotateRight(2);
rotator.print();

k = k % n; // effective rotation

Calculate rotation steps within array length to avoid extra cycles

if (k === 0) return;

No rotation needed if steps is zero after modulo

const part1 = this.arr.slice(0, n - k);

Extract first part before rotation point

const part2 = this.arr.slice(n - k);

Extract last k elements to move to front

this.arr = part2.concat(part1);

Join parts in rotated order

Output

4 -> 5 -> 1 -> 2 -> 3 -> null

Complexity Analysis

Time: O(n) because slicing and concatenating arrays each take linear time over n elements

Space: O(n) because new arrays are created during slicing and concatenation

vs Alternative: Compared to rotating one step at a time (O(n*k)), this method is efficient for large k by using slicing and concatenation

Edge Cases

empty array

No rotation occurs, array remains empty

DSA Javascript

if (n === 0) return;

rotation steps equal to array length

Rotation results in the same array, no change

DSA Javascript

k = k % n; if (k === 0) return;

rotation steps greater than array length

Rotation steps are reduced modulo array length to avoid extra cycles

DSA Javascript

k = k % n;

When to Use This Pattern

When you need to shift elements in a circle-like fashion in an array, use array rotation techniques to rearrange efficiently without moving elements one by one.

Common Mistakes

Mistake: Rotating by more steps than array length without modulo causes incorrect results or errors
Fix: Always use modulo operation to reduce rotation steps within array length

Mistake: Trying to rotate empty array without checking causes errors
Fix: Check for empty array and return early

Mistake: Rotating by zero or multiple of array length but still performing operations wastes time
Fix: Return early if effective rotation steps is zero

Summary

Rotates array elements by moving last k elements to the front.

Use when you want to shift array elements circularly without moving one by one.

The key is to split the array and join parts in rotated order using modulo for steps.

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