Dúvida com array

Oi, pessoal. Estou apanhando um pouco com array. Copiei esse código de alguém que fez certo, porque quebrei muito a cabeça. Como "ingredientes.length" funciona, se não há nada em "var ingredientes = []"? Não consegui entender essa lógica. Outra pergunta: colocando o "break" quando um ingrediente é repetido, eu não impeço de aparecer o prompt de novo, pra colocar outros ingredientes?

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        var existe = false;

        for( var posicao = 0;  posicao < ingredientes.length;  posicao++) {

            if(ingredientes [posicao] == ingrediente) {
                existe = true;
                break;

            }
        }

        if(existe == false) {
            ingredientes.push(ingrediente);
            contador++;
        }


    }

    console.log(ingredientes);
</script>