Explicação de como não repetir ingrediente no array

Galera, boa tarde!

Percebi que muitas pessoas, assim como eu, tiveram muitas dúvidas neste exercício. Depois de várias revisões, consegui entender melhor essa lógica, vou compartilhar o código aqui junto com comentários para facilitar a compreensão.

Por exemplo: eu usarei 3 ingredientes, eles são: batata, sal e óleo. No array, as posições desses ingredientes serão [0] para a batata, [1] para o sal e [2] para o óleo.

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>

    var ingredientes = [];  //esta variável é a lista (array)

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

    var contador = 1;  //variável para auxiliar no loop do while

    while( contador <= quantidade) {                                                    
                         //batata                            //1
        var ingrediente = prompt("Informe o ingrediente " + contador);

        var existe = false;  //como o javascript ainda não leu o "ingredientes.push", a batata está apenas na variável que recebe o prompt, por isso que a variável existe recebe false

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

            if( ingredientes[posicao] == ingrediente) {  //a posição [0] do array recebe o mesmo valor que a variável ingrediente(batata, no caso)? não, pois ainda não temos nada na lista. Agora, o loop do for volta e analisa a posição, 1, 2, 3, e assim por diante, até o limite que definimos (ingredientes.length)

                existe = true;
                break;
            }
        }

        if( existe == false) {  //como a variável ingrediente não era igual a posição [0] do array, a outra variável existe manteve o valor false, e então a "batata" poderá ser adicionada na lista

            ingredientes.push(ingrediente);
            contador++;
        }
    }

    console.log(ingredientes);
</script>

Agora, imagine que eu queira repetir o ingrediente batata:

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>

    var ingredientes = [];  //esta variável é a lista (array)

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

    var contador = 1;  //variável para auxiliar no loop do while

    while( contador <= quantidade) {      

                                            //batata, vamos tentar repetir      //2, agora o contador está no dois, pois já adicionamos o primeiro ingrediente na lista
        var ingrediente = prompt("Informe o ingrediente " + contador);

        var existe = false;   

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

            if( ingredientes[posicao] == ingrediente) {  //agora, neste if, o javascript vai ler assim: posição do array [0], é igual a variável ingrediente (neste caso, batata novamente)? sim, então a variável existe vai receber true e vai quebrar o for

                existe = true;
                break;
            }
        }

        if( existe == false) {  //uma vez que o for acima é quebrado, o javascript parte para a próxima instrução que é este IF, ele vai interpretar que a variável existe recebe true, então NÃO pode executar este if, portanto, batata não será adicionada novamente ao array

            ingredientes.push(ingrediente);
            contador++;
        }
    }

    console.log(ingredientes);
</script>

Agora, imagine que eu queira adicionar o sal:

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>

    var ingredientes = [];  //esta variável é a lista (array)

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

    var contador = 1;  //variável para auxiliar no loop do while

    while( contador <= quantidade) {      

                         //sal                //2, o contador ainda está no dois, pois não conseguimos adicionar batata novamente, como no exemplo anterior
        var ingrediente = prompt("Informe o ingrediente " + contador);

        var existe = false;   

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

            if( ingredientes[posicao] == ingrediente) {  //posição [0] (batata), é igual ao ingrediente (sal)? Não. Posição [1] igual ao ingrediente? Não, ainda não temos nada nesta posição, assim como no [2]

                existe = true;
                break;
            }
        }

        if( existe == false) {    //como nenhuma posição do array era igual a variável ingrediente (no caso, sal), mantivemos a outra variável existe recebendo false, portanto, conseguimos adicionar sal a lista/array

            ingredientes.push(ingrediente);
            contador++;
        }
    }

    console.log(ingredientes);
</script>