How to compare two arrays without checking each value for simon game?

This works perfectly but I want to know that here I am checking only the most recent user input value(with their index number) with the randomly generated value and their lengths, but how can I check previous values?

Suppose the user input value is a=[red,blue,green]

and the randomly generated value is b=[red,yellow,green]

Then here I am checking only the a[2] and b[2] which is equal in this case and also their lengths are equal but their elements are not equal.

But in this code, it works perfectly. I want to know how? without a for loop, how can this code check the previous values of that array?

…………………………..***********………………………..

 var buttonColours = ["red", "blue", "green", "yellow"];

 var gamePattern = [];
 var userClickedPattern = [];

 var started = false;
 var level = 0;

 $(document).keypress(function() {
 if (!started) {
 $("#level-title").text("Level " + level);
 nextSequence();
 started = true;
 }
 });

 $(".btn").click(function() {

 var userChosenColour = $(this).attr("id");
 userClickedPattern.push(userChosenColour);

 playSound(userChosenColour);
 animatePress(userChosenColour);

 checkAnswer(userClickedPattern.length-1);
 });

function checkAnswer(currentLevel) {

if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
  if (userClickedPattern.length === gamePattern.length){
    setTimeout(function () {
      nextSequence();
    }, 1000);
  }
} else {
  playSound("wrong");
  $("body").addClass("game-over");
  $("#level-title").text("Game Over, Press Any Key to Restart");

  setTimeout(function () {
    $("body").removeClass("game-over");
  }, 200);

  startOver();
}
}


function nextSequence() {
userClickedPattern = [];
level++;
$("#level-title").text("Level " + level);
var randomNumber = Math.floor(Math.random() * 4);
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);

$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
playSound(randomChosenColour);
}

function animatePress(currentColor) {
$("#" + currentColor).addClass("pressed");
setTimeout(function () {
$("#" + currentColor).removeClass("pressed");
}, 100);
}

function playSound(name) {
var audio = new Audio("sounds/" + name + ".mp3");
audio.play();
}

function startOver() {
level = 0;
gamePattern = [];
started = false;
}

>Solution :

In the code below you can see that when a user clicks a button it calls checkAnswer with userClickedPattern.length - 1 for level.

$(".btn").click(function() {
  var userChosenColour = $(this).attr("id");
  userClickedPattern.push(userChosenColour);

  playSound(userChosenColour);
  animatePress(userChosenColour);

  checkAnswer(userClickedPattern.length-1);
});

When a new sequence starts userClickedPattern is set to []. After the first click it becomes ['red'] and you check ifuserClickedPattern[0] // ['red'] is equal to gamePattern[0] // ['red', 'yellow', 'green']. And it goes on and on until userClickedPattern.length === gamePattern.length and user completed with success every checkAnswer (failing it would trigger startOver and reset the game)

You are actually checking all the values at runtime when user clicks. The array length check only detects if the user has completed the level.