Проверка данных массива. Почему часть else выполняется несколько раз?

Question

[Jorlian]

Есть массив данных пользователя. При вводе данных на странице происходит проверка на существование введенных данных в массиве и выводится сообщение об успехе. Иначе данные с input должны добавляется в массив.
Все вроде работает, но данные добавляются несколько раз
Хотелось бы чтобы только 1 раз добавлялось

<div class="container">
        <h1 class="title">Форма входа</h1>
        <div>
            <p></p>
        </div>
        <form class="form" action="">
            <input id="login" type="text" placeholder="Логин">
            <input id="password" type="password" placeholder="Пароль">
            <button onclick={signUp()}>Войти</button>
        </form>
    </div>
<div id="list">
    <p id="out"></p>
</div>

let users = [
    {
        login: "111",
        password: "pass111"
    },
    {
        login: "222",
        password: "pass222"
    },
    {
        login: "333",
        password: "pass333"
    },
    {
        login: "444",
        password: "pass444"
    },
    {
        login: "555",
        password: "pass555"
    },
    {
        login: "666",
        password: "pass666"
    },
    {
        login: "777",
        password: "pass777"
    },

];

for (let key in users) {
    let loginState = users[key].login;
    let passwordState = users[key].password;
    out.innerHTML += 'Login: ' + loginState + '<br>';
    out.innerHTML += 'Password: ' + passwordState + '<br>' + '<br>';


}

let signUp = () => {

    let login = document.getElementById('login').value;
    let password = document.getElementById('password').value;


    for (let i = 0; i <= users.length; i++) {
        if (login == users[i].login && password == users[i].password) {
            alert('ry-ry')
            debugger
        }else {
            users.push(
                {
                    login: document.getElementById('login').value,
                    password: document.getElementById('password').value
                }
            )
        }
    }
}

Answer 1

[hzzzzl]

let login = document.getElementById('login').value;
let password = document.getElementById('password').value;

const existingUser = users.find(u => u.login === login)

if (!existingUser) {
  users.push(  { login, password }  )
}

отвечая на вопрос, смотри

for (let i = 0; i <= users.length; i++) {
        // цикл выполнится много раз
        if (login == users[i].login && password == users[i].password) {
            // воу, мы нашли юзера!
            alert('ry-ry')
            debugger
        }else {
            // это не юзер, пишем в массив
            // а цикл ведь выполнится много раз
            users.push(
                {
                    login: document.getElementById('login').value,
                    password: document.getElementById('password').value
                }
            )
        }
    }