If/Else Logic order - Javascript Example - Please explain the difference between these 2 blocks of code

Question

I have spent hours trying to understand this - I know it has something to do with if...else statement logic order, but each time I have tried to follow I got lost. Someone please explain this to me and if possible give a pointer of how to handle if...else logic order(a hack/ quick method to remember e.g: "always start with the larger sample space ...")

Here it is:

The Task is as follows: We have an array of objects representing different people in our contacts lists.

A lookUpProfile function that takes firstName and a property (prop) as arguments has been pre-written for you.

The function should check if firstName is an actual contact's firstName and the given property (prop) is a property of that contact.

If both are true, then return the "value" of that property.

If firstName does not correspond to any contacts then return "No such contact"

If prop does not correspond to any valid properties then return "No such property"

CODE

This code is wrong

    var contacts = [
        {
            "firstName": "Akira",
            "lastName": "Laine",
            "number": "0543236543",
            "likes": ["Pizza", "Coding", "Brownie Points"]
        },
        {
            "firstName": "Harry",
            "lastName": "Potter",
            "number": "0994372684",
            "likes": ["Hogwarts", "Magic", "Hagrid"]
        },
        {
            "firstName": "Sherlock",
            "lastName": "Holmes",
            "number": "0487345643",
            "likes": ["Intriguing Cases", "Violin"]
        },
        {
            "firstName": "Kristian",
            "lastName": "Vos",
            "number": "unknown",
            "likes": ["Javascript", "Gaming", "Foxes"]
        }
    ];
    
    function lookUpProfile(firstName, prop){
      
      for(var i=0;i < contacts.length;i++){
        
        if (contacts[i].hasOwnProperty(prop))
          {
            if(contacts[i].firstName === firstName){
              return contacts[i][prop];
            }
            else {
              return "No such contact";
            }
    
          }
    // Only change code above this line
    }
      return "No such property";
    }
    // Change these values to test your function
    console.log(lookUpProfile("Harry", "likes"));

THIS code is correct:

    var contacts = [
        {
            "firstName": "Akira",
            "lastName": "Laine",
            "number": "0543236543",
            "likes": ["Pizza", "Coding", "Brownie Points"]
        },
        {
            "firstName": "Harry",
            "lastName": "Potter",
            "number": "0994372684",
            "likes": ["Hogwarts", "Magic", "Hagrid"]
        },
        {
            "firstName": "Sherlock",
            "lastName": "Holmes",
            "number": "0487345643",
            "likes": ["Intriguing Cases", "Violin"]
        },
        {
            "firstName": "Kristian",
            "lastName": "Vos",
            "number": "unknown",
            "likes": ["Javascript", "Gaming", "Foxes"]
        }
    ];
    
    function lookUpProfile(firstName, prop){
      
      for(var i=0;i < contacts.length;i++){
        
        if (contacts[i].firstName === firstName)
          {
            if(contacts[i].hasOwnProperty(prop)){
              return contacts[i][prop];
            }
            else {
              return "No such property";
            }
    
          }
    // Only change code above this line
    }
      return "No such contact";
    }
    // Change these values to test your function
    console.log(lookUpProfile("Harry", "likes"));

I will really appreciate if someone can help me explain the difference. Thank you in advance!

Answer 1

The hasOwnProperty() method returns true or false if an object contains the specified property. In the correct version you are looking for a property(likes) within Harry which returns true. In the invalid one you are looking for a property of an object that is not specified yet so it will always be false.

Answer 2

The difference in these codes is the use of if condition. In the failing code, if the username does not match the parameter-passed name, you are returning from the function. So, when the first item will not match, it will return.

if (contacts[i].hasOwnProperty(prop))
  { 
    //INCORRECT USE OF NAME CHECK IF CONDITION
    if(contacts[i].firstName === firstName){
      return contacts[i][prop];
    }
    else {
      return "No such contact";
    }

  }

In the second one, you are going to return only when the first name matches.

//CORRECT USE OF IF CONDITION FOR NAME CHECK
if (contacts[i].firstName === firstName)
      {
        if(contacts[i].hasOwnProperty(prop)){
          return contacts[i][prop];
        }
        else {
          return "No such property";
        }

      }

Answer 3

    if (contacts[i].hasOwnProperty(prop))
      {
        if(contacts[i].firstName === firstName){
          return contacts[i][prop];
        }
        else {
          return "No such contact";
        }

So when it encounters a contact with likes, but firstName not equal to "Harry", it will return "no such contact" immediately.