Rotate Array Elements by N Spaces in JavaScript

Question

Rotate Array Elements by N Spaces in JavaScript

Implement a function called "rotate" that will take an array and return a new array with the elements rotated by n spaces.

If n is positive, the array should be rotated to the right. If n is negative, then it should be rotated to the left. If n is 0, the array should remain unchanged.

For example:

var data = [1, 2, 3, 4, 5];

rotate(data, 1) // => [5, 1, 2, 3, 4]
rotate(data, 2) // => [4, 5, 1, 2, 3]
rotate(data, 3) // => [3, 4, 5, 1, 2]
rotate(data, 4) // => [2, 3, 4, 5, 1]
rotate(data, 5) // => [1, 2, 3, 4, 5]

rotate(data, 0) // => [1, 2, 3, 4, 5]

rotate(data, -1) // => [2, 3, 4, 5, 1]
rotate(data, -2) // => [3, 4, 5, 1, 2]
rotate(data, -3) // => [4, 5, 1, 2, 3]
rotate(data, -4) // => [5, 1, 2, 3, 4]
rotate(data, -5) // => [1, 2, 3, 4, 5]

Furthermore, this function should work with any type of array input, not just numbers:

rotate(['a', 'b', 'c'], 1)     // => ['c', 'a', 'b']
rotate([1.0, 2.0, 3.0], 1)     // => [3.0, 1.0, 2.0]
rotate([true, true, false], 1) // => [false, true, true]

Additionally, the rotation should wrap around if the index exceeds the length of the array:

For example:

var data = [1, 2, 3, 4, 5]
rotate(data, 7)     // => [4, 5, 1, 2, 3]
rotate(data, 11)    // => [5, 1, 2, 3, 4]
rotate(data, 12478) // => [3, 4, 5, 1, 2]

javascript arrays rotation

Answer 1

Answer №1

If you want to achieve this functionality, one way is to use a `while` loop along with `increment` or `decrement` depending on whether the number parameter is positive or negative.

function rotateArray(arr, num) {
  const result = [...arr]

  if (num === 0) {
    return arr
  }

  const isNegative = num < 0
  const lastIdx = result.length - 1
  const toIdx = isNegative ? lastIdx : 0
  const idx = isNegative ? 0 : lastIdx

  while ((isNegative ? num++ : num--) !== 0) {
    result.splice(toIdx, 0, result.splice(idx, 1)[0])
  }

  return result
}


var originalArray = [1, 2, 3, 4, 5];

console.log(rotateArray(originalArray, 2)) // => [4, 5, 1, 2, 3]
console.log(rotateArray(originalArray, 3)) // => [3, 4, 5, 1, 2]
console.log(rotateArray(originalArray, 4)) // => [2, 3, 4, 5, 1]
console.log(rotateArray(originalArray, 5)) // => [1, 2, 3, 4, 5]


console.log(rotateArray(originalArray, -1)) // => [2, 3, 4, 5, 1]
console.log(rotateArray(originalArray, -2)) // => [3, 4, 5, 1, 2]
console.log(rotateArray(originalArray, -3)) // => [4, 5, 1, 2, 3]
console.log(rotateArray(originalArray, -4)) // => [5, 1, 2, 3, 4]
console.log(rotateArray(originalArray, -5)) // => [1, 2, 3, 4, 5]

console.log(rotateArray(['a', 'b', 'c'], 1))
console.log(rotateArray([true, true, false], 1))

Answer 2

If you want to achieve this functionality, one way is to use a `while` loop along with `increment` or `decrement` depending on whether the number parameter is positive or negative.

function rotateArray(arr, num) {
  const result = [...arr]

  if (num === 0) {
    return arr
  }

  const isNegative = num < 0
  const lastIdx = result.length - 1
  const toIdx = isNegative ? lastIdx : 0
  const idx = isNegative ? 0 : lastIdx

  while ((isNegative ? num++ : num--) !== 0) {
    result.splice(toIdx, 0, result.splice(idx, 1)[0])
  }

  return result
}


var originalArray = [1, 2, 3, 4, 5];

console.log(rotateArray(originalArray, 2)) // => [4, 5, 1, 2, 3]
console.log(rotateArray(originalArray, 3)) // => [3, 4, 5, 1, 2]
console.log(rotateArray(originalArray, 4)) // => [2, 3, 4, 5, 1]
console.log(rotateArray(originalArray, 5)) // => [1, 2, 3, 4, 5]


console.log(rotateArray(originalArray, -1)) // => [2, 3, 4, 5, 1]
console.log(rotateArray(originalArray, -2)) // => [3, 4, 5, 1, 2]
console.log(rotateArray(originalArray, -3)) // => [4, 5, 1, 2, 3]
console.log(rotateArray(originalArray, -4)) // => [5, 1, 2, 3, 4]
console.log(rotateArray(originalArray, -5)) // => [1, 2, 3, 4, 5]

console.log(rotateArray(['a', 'b', 'c'], 1))
console.log(rotateArray([true, true, false], 1))

Answer 3

Answer №2

Shown here is an example that does not mutate the original array and avoids using loops:

const rotate = (arr, n) => {

  const i = ((n % arr.length) + arr.length) % arr.length

  if (!i) return [...arr]

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

Explanation

The key concept in this function is determining the starting index based on the arguments provided. This is achieved through the use of the modulo operator to calculate the index relative to the array length and a number that may exceed the array length.

For instance:

const i = n % arr.length

To handle negative numbers as well, a modified modulo operation is used (referencing this answer) because JavaScript's built-in modulo behaves differently with negative numbers compared to other languages.

Therefore..

const i = ((n % arr.length) + arr.length) % arr.length

After obtaining the correct index, ES6 spread operators are used to form the new array by combining portions from the end and start of the original array:

return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

This approach ensures that the function passes all test cases:

const rotate = (arr, n) => {

  const i = ((n % arr.length) + arr.length) % arr.length

  if (!i) return arr

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

const data = [1, 2, 3, 4, 5]

console.log(rotate(data, 1)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, 2)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, 3)) // => [3, 4, 5, 1, 2]
console.log(rotate(data, 4)) // => [2, 3, 4, 5, 1]
console.log(rotate(data, 5)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, 0)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, -1)) // => [2, 3, 4, 5, 1]
console.log(rotate(data, -2)) // => [3, 4, 5, 1, 2]
console.log(rotate(data, -3)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, -4)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, -5)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, 7)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, 11)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, 12478)) // => [3, 4, 5, 1, 2]

Below is the TypeScript version of the code:

const rotate = <T,>(arr: T[], n: number): T[] => {

  const i = ((n % arr.length) + arr.length) % arr.length;

  if (!i) return [...arr]

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

Answer 4

Shown here is an example that does not mutate the original array and avoids using loops:

const rotate = (arr, n) => {

  const i = ((n % arr.length) + arr.length) % arr.length

  if (!i) return [...arr]

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

Explanation

The key concept in this function is determining the starting index based on the arguments provided. This is achieved through the use of the modulo operator to calculate the index relative to the array length and a number that may exceed the array length.

For instance:

const i = n % arr.length

To handle negative numbers as well, a modified modulo operation is used (referencing this answer) because JavaScript's built-in modulo behaves differently with negative numbers compared to other languages.

Therefore..

const i = ((n % arr.length) + arr.length) % arr.length

After obtaining the correct index, ES6 spread operators are used to form the new array by combining portions from the end and start of the original array:

return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

This approach ensures that the function passes all test cases:

const rotate = (arr, n) => {

  const i = ((n % arr.length) + arr.length) % arr.length

  if (!i) return arr

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

const data = [1, 2, 3, 4, 5]

console.log(rotate(data, 1)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, 2)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, 3)) // => [3, 4, 5, 1, 2]
console.log(rotate(data, 4)) // => [2, 3, 4, 5, 1]
console.log(rotate(data, 5)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, 0)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, -1)) // => [2, 3, 4, 5, 1]
console.log(rotate(data, -2)) // => [3, 4, 5, 1, 2]
console.log(rotate(data, -3)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, -4)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, -5)) // => [1, 2, 3, 4, 5]

console.log(rotate(data, 7)) // => [4, 5, 1, 2, 3]
console.log(rotate(data, 11)) // => [5, 1, 2, 3, 4]
console.log(rotate(data, 12478)) // => [3, 4, 5, 1, 2]

Below is the TypeScript version of the code:

const rotate = <T,>(arr: T[], n: number): T[] => {

  const i = ((n % arr.length) + arr.length) % arr.length;

  if (!i) return [...arr]

  return [...arr.slice(-i), ...arr.slice(0, arr.length - i)]

}

Rotate Array Elements by N Spaces in JavaScript

Answer №1

Answer №2

Explanation

Similar questions

Issues with Tailwind functionality within a monorepo setup

Upgrade to the most recent versions of packages using npm

The node.js system automatically restarts an API call when a timeout occurs

Tips for targeting an element for focus following a re-render in ReactJS

Using Angular's $q service in the run block

What is the best way to retrieve information in an autosuggest textbox from a server or database?

Tips on adding an image using Reactjs

"Obtaining a URL that begins with using jQuery: A Step-by-

Is there a Syntax Issue Preventing the Jquery Accordion from Working in IE7?

Is Angular automatically assigned to `window.angular` on a global level when it is loaded as a CommonJS module?

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

Enable the ability to upload multiple images on a single page using droparea.js

The image is not appearing on mobile devices, but it is displaying correctly on desktop computers

Tips for effectively utilizing props in react

`javascript pop up notification will only display one time`

What is the best way to loop through a list of questions and save the answers in an array of user input?

Best practice for stopping routing in angular

Redirect to a new URL using $routeProvider's resolve feature

Observables and the categorization of response data

Unforeseen outcomes of JavaScript when using the let and var keywords