Array next JavaScript

In JavaScript, there are several ways to get the next item in an array. These approaches are index tracking, shifting and pushing, and generator functions to efficiently retrieve the next element from an array in JavaScript.

index

const arr = [1, 2, 3];
let currentIndex = 0;

function getNextItem() {
  const currentItem = arr[currentIndex];
  currentIndex = (currentIndex + 1) % arr.length;
  return currentItem;
}

shifting and pushing:

const arr = [1, 2, 3];

function getNextItem() {
  const currentItem = arr.shift();
  arr.push(currentItem);
  return currentItem;
}

Using a generator function:

function* nextItemGenerator(array) {
  let index = 0;
  while (true) {
    yield array[index];
    index = (index + 1) % array.length;
  }
}

const arr = [1, 2, 3];
const generator = nextItemGenerator(arr);

console.log(generator.next().value); // Output: 1
console.log(generator.next().value); // Output: 2
console.log(generator.next().value); // Output: 3

Array next JavaScript example

Simple example code of how to use the index-based approach to access the next item in an array in JavaScript:

const arr = ['apple', 'banana', 'cherry'];
let currentIndex = 0;

function getNextItem() {
  const currentItem = arr[currentIndex];
  currentIndex = (currentIndex + 1) % arr.length; // increment index and wrap around if it exceeds the array length
  return currentItem;
}

console.log(getNextItem()); 
console.log(getNextItem());
console.log(getNextItem()); 
console.log(getNextItem()); 
console.log(getNextItem()); 

Output:

You can keep track of the current index and increment it to get the next item. If the index exceeds the array length, you can reset it to 0 or handle it based on your requirements.

const array = [1, 2, 3, 4, 5];
let currentIndex = 0;

function getNextItem() {
  const currentItem = array[currentIndex];
  currentIndex = (currentIndex + 1) % array.length; // Wrap around if index exceeds the array length
  return currentItem;
}

console.log(getNextItem()); // Output: 1
console.log(getNextItem()); // Output: 2
console.log(getNextItem()); // Output: 3

The shift() method to remove the first item from the array and the push() method to add it back at the end. This approach modifies the original array.

const array = [1, 2, 3, 4, 5];

function getNextItem() {
  const currentItem = array.shift();
  array.push(currentItem);
  return currentItem;
}

console.log(getNextItem()); // Output: 1
console.log(getNextItem()); // Output: 2
console.log(getNextItem()); // Output: 3

You can use a generator function to iterate over the array and yield each item one by one. This approach allows you to iterate over the array indefinitely.

function* nextItemGenerator(array) {
  let index = 0;
  while (true) {
    yield array[index];
    index = (index + 1) % array.length; // Wrap around if index exceeds the array length
  }
}

const array = [1, 2, 3, 4, 5];
const generator = nextItemGenerator(array);

console.log(generator.next().value); // Output: 1
console.log(generator.next().value); // Output: 2
console.log(generator.next().value); // Output: 3

These are just a few examples of how you can get the next item in an array in JavaScript. The approach you choose depends on your specific requirements and the use case at hand.

How to move to the prev/next element of an array?

Answer: To move to the previous or next element of an array, you can use the index of the current element and add or subtract 1 from it.

let myArray = [1, 2, 3, 4, 5];
let currentIndex = 2; // current index is 2, which is the third element in the array

let prevIndex = currentIndex - 1; // to move to the previous element, subtract 1 from the current index
let prevElement = myArray[prevIndex]; // access the previous element using the new index

let nextIndex = currentIndex + 1; // to move to the next element, add 1 to the current index
let nextElement = myArray[nextIndex]; // access the next element using the new index

console.log(prevElement); // Output: 2
console.log(nextElement); // Output: 4

Note: you should check if the new index is within the bounds of the array to avoid index out-of-range errors.

Comment if you have any doubts or suggestions on this Js Array topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version