What is the best way to loop back to the beginning of an array after reaching the last element in JavaScript?

Question

What is the best way to loop back to the beginning of an array after reaching the last element in JavaScript?

I have an array in JavaScript containing music notes:

const musicNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];

The user will select a note from an HTML select list, and the selected value will be stored in a variable tonalityNote.

This tonalityNote will then be passed to a function like this:

getThirdDegreeNote(tonalityNote) {
        /* Get the index of tonalityNote in the musicNotes array */
        const tonalityNoteIndex = musicNotes.indexOf(tonalityNote);
        /* Get the value at the index tonalityNoteIndex + 2 in the musicNotes array */
        return musicNotes[tonalityNoteIndex + 4];
    }

If tonalityNote is 'C' (the first element of the musicNotes array), there's no issue - it will always work.

However, if tonalityNote is 'B', the formula

musicNotes[tonalityNoteIndex + 4]

will return undefined.

Is there a way to wrap around to the beginning of the array when encountering such issues?

For instance, if I'm at the index with the value 'B' in the musicNotes array, can I ensure that

return musicNotes[tonalityNoteIndex + 4]

will actually return 'D#' (considering the array 'musicNotes' and counting + 4 from 'B' for clarity)?

I hope I have explained the problem clearly. This is causing me quite some struggle.

Thank you in advance.

javascript arrays

Answer 1

Answer №1

To find the index, use the formula

(tonalityNoteIndex + 4) % musicNotes.length

. This will loop back to the beginning if the index exceeds the length of the musicNotes array.

const musicNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
function getThirdDegreeNote(tonalityNote) {
  /* Find the index of tonalityNote in the musicNotes array */
  const tonalityNoteIndex = musicNotes.indexOf(tonalityNote);
  /* Retrieve the value at the index tonalityNoteIndex + 2 in musicNotes array */
  return musicNotes[(tonalityNoteIndex + 4) % musicNotes.length];
}

console.log(getThirdDegreeNote('C'));
console.log(getThirdDegreeNote('B'));

Answer 2

To find the index, use the formula

(tonalityNoteIndex + 4) % musicNotes.length

. This will loop back to the beginning if the index exceeds the length of the musicNotes array.

const musicNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
function getThirdDegreeNote(tonalityNote) {
  /* Find the index of tonalityNote in the musicNotes array */
  const tonalityNoteIndex = musicNotes.indexOf(tonalityNote);
  /* Retrieve the value at the index tonalityNoteIndex + 2 in musicNotes array */
  return musicNotes[(tonalityNoteIndex + 4) % musicNotes.length];
}

console.log(getThirdDegreeNote('C'));
console.log(getThirdDegreeNote('B'));

What is the best way to loop back to the beginning of an array after reaching the last element in JavaScript?

Answer №1

Similar questions

Unable to retrieve the value from the selected radio button

Exploring the differences between client-side and server-side data manipulation

Vue Router is not updating the router view when the router link clicked is embedded within the view

CSS to Vertically Display Input Values

The Div element refuses to budge from its current position on the page's layout

avoiding the duplication of effects on an object when new objects are added via ajax

AngularJS ng-focus does not function properly with iframes

Delete the event handler if the original selector used to set up the handler is unknown

Retrieve the vector3 that points in the direction of the pointerlockcontrols in Three.js

Understanding the default value type in React's setState method

webdriverIO encountered an unhandled promise rejection, resulting in a NoSuchSessionError with the message "invalid session id

Exploring the inner structure of an STL Object with the power of three.js

The TypeScript function was anticipating one argument, however it received two instead

When working with Vuejs, if you try to use "axios" in a .js file, you may encounter an error

Activate Form Submission from Child Component Using Parent Button in React

Combining two JSON objects with sailsjs-nodejs to create a single merged object

Tips for saving a string value in a JSON file using Node.js:

Is there a way to retrieve a returned value from a `.ajax` request in the `done()` function in JavaScript?

Bringing in functions - NodeJS - non-HTML

What are some ways I can implement lighting techniques similar to those used in clara.io within Three