Question about the Basic JavaScript Profile Lookup

[Jane2963637 (Jane)]

Hi All!

It’s been a while! I haven’t had time to do my coding for a bit, so going back over all the basic JavaScript before I try to tackle more complex exercises such as those to do with Fibonacci sequences.

Before I post my code with the question, here is my question up front - it is a bit swamped in the code otherwise.

Question 1: Why does (contacts[i].firstName === name && contacts[i].hasOwnProperty(prop)) not work here? What is wrong with using the && operator? I get this wrong every time and I don’t understand why it needs to be split into two consecutive ‘if’ statements.
I would really like an answer to this question if possible as it is severely affecting my ability to be able to write code that works.

Question 1a: As an aside to this, why does writing the statement the other way around not work? What I mean is, usually I start this exercise with name === contacts[i].firstName instead of having name on the right hand side. I only change name to the RHS after I check the hints and see it does not work with name on the LHS. Is there a reason for this?

I feel if I could have a definitive answer to these questions I would be better able to write code which works.

So I am hoping there is an answer, and it is not just “one of those things”. I have a feeling that it will be just one of those things though.

// Setup
const 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(name, prop) {
  // Only change code below this line
 
    for (let i = 0; i < contacts.length; i++) {
  if (contacts[i].firstName === name) {
 if (contacts[i].hasOwnProperty(prop)) {
  //MY QUESTION - why does (contacts[i].firstName === name && contacts[i].hasOwnProperty(prop)) not work here? What is wrong with using the && operator? I get this wrong every time and I don't understand why it needs to be split into two consecutive 'if' statements.
  
  return contacts[i][prop];

} else if (prop !== contacts[i].firstName || prop !== contacts[i].lastName) {
  return "No such property";
} 
  }
    
    }  return "No such contact"   
  // Only change code above this line
}

console.log(lookUpProfile("Harry", "likes"));
console.log(lookUpProfile("Kristian", "lastName"));
console.log(lookUpProfile("Bob", "number"));

[Tzerio (Tzerie)]

Hello Jane!
I hope I can help you
Question 1: There is nothing wrong with the && operator. It is always possible to express it with && instead of nested statements, so if it doesn’t work there is some other error.

I modified yours a bit because your else if was superfluous:

function lookUpProfile(name, prop) {
  // Only change code below this line
  for (let i = 0; i < contacts.length; i++) {
    if (name === contacts[i].firstName) {
      if (contacts[i].hasOwnProperty(prop)) {
        return contacts[i][prop];
      } else {
        return "No such property";
      }
    }
  }
  return "No such contact"
  // Only change code above this line
}

Here you can directly see: if name is not this contact’s firstName, directly continue with the next contact.
But if the name matched, there are two cases, one of them will be used and the function returns something.

Here is the same but with &&:

function lookUpProfile(name, prop) {
  // Only change code below this line
  for (let i = 0; i < contacts.length; i++) {
    if (name === contacts[i].firstName && contacts[i].hasOwnProperty(prop)) {
      return contacts[i][prop];
    } 
    else if (name === contacts[i].firstName && !contacts[i].hasOwnProperty(prop)) {
      return "No such property";
    }
  }
  return "No such contact"
  // Only change code above this line
}

Note that it wasn’t possible to just use else here for the second ‘case’, because then it directly would be used when encountering the first contact which firstName doesn’t match name.
Because the order of if statements matters, you can shorten the else if to:
else if (name === contacts[i].firstName) {}
(we already know that contacts[i] doesn’t have prop or else the previous if would have been true)

So why using nested if statements?

1. Readability - no need to worry about another statement that has the same condition, because they are all grouped together
2. Easier to find (and avoid) mistakes - when looking for an error, you may often have to test each condition separately. If you have 10 if / else if with overlapping conditions, you still have to test each. With nested statements that reduces to each condition once
3. Runtime - if it’s not nested, you have to check each statement in each iteration. The first solution has in the worst case (no contact matches) one check for each iteration. The second solution (&&) has two checks for each iteration. So each nested statement may save a lot of ressources, especially if you have more than just two cases like here.

1a: Only for assignments ( = ) the variable that receives the new value has to be left, when comparing it’s all the same, you probably had a typo somewhere.

Nevertheless you can use && in the statements if the conditions are only used together, in that case a nested statement would be more confusing.

[Jane2963637 (Jane)]

Hello Tzerio,

Thank you very much for taking the time to help me. I will try and work through this exercise again and swap various statements in and out to see what works and see if I can get closer to understanding the underlying concepts here. Your codes are very helpful, thanks.

Best from Jane

[carlost2672543 (Carlos T)]

Hello Jane

Apart MDN web docs you can use this page as reference too https://javascript.info/. Hardly recommend it for professionals, even Mozilla. It has a lot of examples an exercises, it is a great reference and you will find smart examples wich will help you understand concepts deeper.
Welcome back to the hard work. Happy coding!!

[Jane2963637 (Jane)]

Thank you very much Carlos! And happy coding to you too!