Learning loops, can't figure out how this one works

Question

my first question here: I was learning about loops from developer.mozzila.org and this was an example for 'break;' The user provides a name and this code searches through the array contacts and returns the number.

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

I'm failing to understand how this code is not returning 'Contact not found.' on every iteration. Instead, according to MDN, it only does so if the name is not found in the array. Won't the code under 'else' execute every time the 'if' condition is not met?

Thanks and apologies if I'm missed some StackOverflow etiquette.

It is doing what you think, thought it's not "returning" that value. The function never returns anything. It does, however exit the loop as soon as it updates the text when a contact is found. — Pointy, May 12 '20 at 18:59
@Pointy I actually didn't include the HTML code which is responsible for showing 'Contact not found' if the name doesn't match. You can try running it here: https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html — Divyanshu, May 12 '20 at 19:03
Updating HTML is not the same thing as "returning" something. — Pointy, May 12 '20 at 19:06
This code is reminiscent of a common error that many beginners make when searching for something, which I describe in [this question](https://stackoverflow.com/questions/42913798/searching-array-reports-not-found-even-though-its-found/42913882#42913882). But it has a significant difference that's specific to the way the error message is displayed in the DOM. It's still a confusing way to write it. — Barmar, May 12 '20 at 19:14

David · Answer 1 · 2020-05-12T19:08:45.203

I'm failing to understand how this code is not returning 'Contact not found.'

This code is not returning anything, it's performing an operation. It may seem like a nitpick, but it's an important distinction. Because returning will end the execution of the function, but performing an operation will not.

Won't the code under 'else' execute every time the 'if' condition is not met?

Indeed it will! Which is an astute observation on your part. But the question at that point is not necessarily whether the else block will be executed at all, but rather...

What happens when the else block is executed?
What does the if block do differently?
What will be the state of the system after the loop finishes?

In this case the else block can execute as many times as the loop iterates, and nothing will change. It repeats the same non-destructive operation over and over, changing nothing. But if the if block ever executes, the break causes the loop to terminate. So either the if block will never execute, or it will be the last operation to execute.

Thus, the state after the loop will either be that the else block executed multiple times or that the if block was the last thing to execute and the last thing to change the state.

Consider as a simple thought experiment example, what happens if you set a variable to 0 a hundred times? It's 0. What happens if you set it to 0 a hundred times and then set it to 1? It's 1. Repeating the former operation many times makes no difference on the resulting state. One may be able to argue a performance impact, but if that's negligible (which it is here) then it may not be worth addressing.

score 2 · Answer 2 · answered May 12 '20 at 19:03

I'm failing to understand how this code is not returning 'Contact not found.' on every iteration. Instead, according to MDN, it only does so if the name is not found in the array. Won't the code under 'else' execute every time the 'if' condition is not met?

It's not returning anything, it's setting a DOM element's property to something. And it is indeed setting it to Contact not found. for every iteration until (if) it finds what it's searching for, in which case it will set it to the found string and then break out of the loop.

It's inefficient, but the end result is most likely going to be the one you'd expect.

score 0 · Answer 3 · answered May 12 '20 at 19:03

0

Yes you are right, it will set para.textContent each time splitContact[0].toLowerCase() !== searchName, but it won't end, so it doesn't break the loop or doesn't return, so it continue to the end

answered May 12 '20 at 19:03

Reza

18,865
13
88
163

1

Oh, it's relying on changing the value once it's found instead of setting it to ' contact not found' at the end. I should have figured it out earlier. Thanks! – Divyanshu May 12 '20 at 19:07

Learning loops, can't figure out how this one works

3 Answers3