Array Rotation Techniques in DSA Javascript - Build from Scratch

Array Rotation Techniques

📖 Scenario: Imagine you have a list of daily tasks arranged in order. Sometimes, you want to rotate this list so that the tasks start from a different point, like moving the first few tasks to the end. This helps you plan your day differently without changing the order of tasks themselves.

🎯 Goal: You will create a program that rotates an array of tasks to the left by a given number of positions. This means the first few tasks move to the end, and the rest shift forward.

📋 What You'll Learn

Create an array called tasks with these exact values: 'Email', 'Meeting', 'Coding', 'Review', 'Lunch'

Create a variable called rotateBy and set it to 2

Write a function called rotateArrayLeft that takes an array and a number, and returns the array rotated to the left by that number

Print the rotated array using console.log

💡 Why This Matters

🌍 Real World

Rotating arrays is useful in scheduling, gaming, and data processing where order changes but elements remain the same.

💼 Career

Understanding array manipulation is fundamental for software development, especially in frontend and backend programming.

1

Create the initial array of tasks

Create an array called tasks with these exact values in order: 'Email', 'Meeting', 'Coding', 'Review', 'Lunch'

DSA Javascript

// Your code here

Hint

Use square brackets [] to create an array and separate items with commas.

2

Set the number of positions to rotate

Create a variable called rotateBy and set it to the number 2

DSA Javascript

const tasks = ['Email', 'Meeting', 'Coding', 'Review', 'Lunch'];
// Your code here

Hint

Use const to create a variable that does not change.

3

Write the function to rotate the array left

Write a function called rotateArrayLeft that takes two parameters: arr (an array) and positions (a number). The function should return a new array rotated to the left by positions. Use array slicing and concatenation.

DSA Javascript

const tasks = ['Email', 'Meeting', 'Coding', 'Review', 'Lunch'];
const rotateBy = 2;

// Your code here

Hint

Use slice to get parts of the array and concat to join them back.

4

Print the rotated array

Use console.log to print the result of calling rotateArrayLeft with tasks and rotateBy as arguments.

DSA Javascript

const tasks = ['Email', 'Meeting', 'Coding', 'Review', 'Lunch'];
const rotateBy = 2;

function rotateArrayLeft(arr, positions) {
    const len = arr.length;
    const pos = positions % len;
    return arr.slice(pos).concat(arr.slice(0, pos));
}

// Your code here

Hint

Call the function with tasks and rotateBy, then print the result.

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