JavaScript - Push multiple results from for loop into array

Question

I have created a basic system to output users that match with the same genre interests as a specified user. I want to push the results of the for loop into an array however I can only get the last for loop output to be pushed into the array but I want all of the results to be 'pushed'. Any suggestions?

// User database
var jon = {username: 'Jon', genrePref: 'Rock'};
var lucy = {username: 'Lucy', genrePref: 'Pop'};
var mike = {username: 'Mike', genrePref: 'Rock'};
var luke = {username: 'Luke', genrePref: 'House'};
var james = {username: 'James', genrePref: 'House'};
var dave = {username: 'Dave', genrePref: 'Bass'};
var sarah = {username: 'Sarah', genrePref: 'Country'};
var natalie = {username: 'Natalie', genrePref: 'Bass'};

//userProfile.push()

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {username: 'Harry', trackGenre: 'Rock'};

// For loop listing usernames of users with genre preference the same as the distributed track
for(i = 0; i < userProfile.length; i++){

  if(userProfile[i].genrePref == trackGenre.trackGenre){

    console.log(userProfile[i].username);

    var matchs = [];

    matchs.push(userProfile[i].username);

  }
}

console.log(matchs)

Answer 1

Move the declaration of var higher up - you are reinstatiating it every time, thus clearing it out:

var trackGenre = {username: 'Harry', trackGenre: 'Rock'};

var matchs = [];

// For loop listing usernames of users with genre preference the same as the distributed track
for(i = 0; i < userProfile.length; i++){

 if(userProfile[i].genrePref == trackGenre.trackGenre){

    console.log(userProfile[i].username);

    matchs.push(userProfile[i].username);

    }
}

Answer 2

As a supplementary answer to that posted by @Montagist I thought I'd show two alternative approaches to achieve your stated goal, the first using Array.prototype.forEach(), rather than a for loop, which also iterates over the array of users:

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
var mike = {
  username: 'Mike',
  genrePref: 'Rock'
};
var luke = {
  username: 'Luke',
  genrePref: 'House'
};
var james = {
  username: 'James',
  genrePref: 'House'
};
var dave = {
  username: 'Dave',
  genrePref: 'Bass'
};
var sarah = {
  username: 'Sarah',
  genrePref: 'Country'
};
var natalie = {
  username: 'Natalie',
  genrePref: 'Bass'
};

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },
  matches = [];

// iterating over the userProfile Array, using
// Array.prototype.forEach():
userProfile.forEach(function(user) {
  // 'user', the first and only argument, is a
  // reference to the current Array element of
  // the Array over which we're iterating.

  // if the genrePref property of the current
  // user Object is equal to the trackGenre
  // property of the trackGenre Object:
  if (user.genrePref === trackGenre.trackGenre) {

    // we use Array.prototype.push() to add that
    // property to the matches Array:
    matches.push(user.username);
  }
});

console.log(matches) // ["Jon", "Mike"]

JS Fiddle demo.

And another using both Array.prototype.map() and Array.prototype.filter():

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
var mike = {
  username: 'Mike',
  genrePref: 'Rock'
};
var luke = {
  username: 'Luke',
  genrePref: 'House'
};
var james = {
  username: 'James',
  genrePref: 'House'
};
var dave = {
  username: 'Dave',
  genrePref: 'Bass'
};
var sarah = {
  username: 'Sarah',
  genrePref: 'Country'
};
var natalie = {
  username: 'Natalie',
  genrePref: 'Bass'
};

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },

  // Array.prototype.map() returns a new Array:
  matches = userProfile.map(function(user) {
    // 'user', the first and only argument here, is
    // a reference to the current Array element of
    // the Array over which we're iterating; here
    // it's an Object.

    // if the genrePref property of the current
    // user Object is exactly equal to the
    // trackGenre property of the trackGenre Object:
    if (user.genrePref === trackGenre.trackGenre) {

      // we return the username of the current
      // user Object
      return user.username;
    }

  // in those situations where the if condition evaluated
  // to false the anonymous function returns undefined; so
  // here we use Array.prototype.filter(), with a Boolean,
  // to retain only those array-elements which are true/truthy:
  }).filter(Boolean);

console.log(matches) // ["Jon", "Mike"]

JS Fiddle demo.

References:

• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.map().