Why does the second array remain empty?

Question

The goal of this "counter" is to see how many different words are inside the "ToCount"string. To do that it makes ToCount an array and then iterates over the elements, checking if they already are there and if not, adding them there.

The ToCountArr2 remains empty after the loop and a length of 0 is being displayed. Why does that happen and what can I do about it?

I ran a debugger and saw that no elements are added to the second list, as if nothing appenned inside the "if" control if the i-th element of the first array already is inside the second array.

function counter(){
    var ToCount = document.getElementById("demo").value; //the contents of a textbox
    var ToCountArr1 = ToCount.split(" ");
    var ToCountArr2 = new Array;
    var i = 0;
    var lengthToCountArr1 = ToCountArr1.length;
    var wordToPush;
    while (i < lengthToCountArr1){
    if(ToCountArr2.includes(ToCountArr1[i] === false)) {
            wordToPush = ToCountArr1[i];
            ToCountArr2.push(wordToPush);
        }
        i = i + 1;
    }
    alert(ToCountArr2.length);
}

Answer 1

The issue is with this line if(ToCountArr2.includes(ToCountArr1[i] === false)) . Here the braces need to be after ToCountArr1[i] , where as this line ToCountArr1[i] === false) is checking whether that value in ToCountArr1 is true or false.

This line

if(ToCountArr2.includes(ToCountArr1[i] === false)) will be evaluated as

if(ToCountArr2.includes(true/false)) depending on result of ToCountArr1[i] === false)

 function counter() { var ToCount = document.getElementById("demo").value; //the contents of a textbox var ToCountArr1 = ToCount.split(" "); var ToCountArr2 = new Array; var i = 0; var lengthToCountArr1 = ToCountArr1.length; var wordToPush; while (i < lengthToCountArr1) { if (ToCountArr2.includes(ToCountArr1[i]) === false) { wordToPush = ToCountArr1[i]; ToCountArr2.push(wordToPush); } i = i + 1; } console.log(ToCountArr2.length); } counter() 

 <input type='text' id='demo' value='Test Values'> 

You can minimize if (ToCountArr2.includes(ToCountArr1[i]) === false) { by replacing it with

if (!ToCountArr2.includes(ToCountArr1[i])) {

Answer 2

Your wordcount function should use a parameter so you can pass a string in. This means you can use the wordcount function on an any string, not just the "demo" element. Also, this is a good time to learn about Map -

 const wordcount = (str = "") => { const result = new Map for (const s of str.split(/ /)) if (s === "") continue else if (result.has(s)) result.set(s, result.get(s) + 1) else result.set(s, 1) return Array.from(result.entries()) } const prettyPrint = (value) => console.log(JSON.stringify(value)) 

 <!-- pass this.value as the string for wordcount -- wordcount returns a value that we could use elsewhere -- prettyPrint displays the value to the console --> <input onkeyup="prettyPrint(wordcount(this.value))"> 

Run the code snippet and copy/paste the following line into the field -

this is the captain speaking. is this the commander?

You will see this output -

[["this",2],["is",2],["the",2],["captain",1],["speaking.",1],["commander?",1]]

Answer 3

Here is an working example. I think it will help you right way. Here I use indexOf to check the value exist on a array.

function counter(){
    var ToCount = "I am string just for text.";//document.getElementById("demo").value; //the contents of a textbox
    var ToCountArr1 = ToCount.split(" ");
    var ToCountArr2 = new Array;
    var i = 0;
    var lengthToCountArr1 = ToCountArr1.length;
    var wordToPush;
    while (i < lengthToCountArr1){
    if( ToCountArr2.indexOf(ToCountArr1[i]) == -1 ) {
            wordToPush = ToCountArr1[i];
            ToCountArr2.push(wordToPush);
        }
        i = i + 1;
    }
    alert(ToCountArr2.length);
}
counter();