JS Whale Talk project - Step 13 - Position of variable affects result

Hi,

As an attempt to keep the code tidy I declared the “resultString” variable at the top of the file with all the other variables and arrays. However, when I do this and log the result to the console it’s doesn’t log anything. In contrast I have logged “resultArray” also which works fine.

let input = 'turpentine and turtles'; const vowelsArr = ['a', 'e', 'i', 'o', 'u']; let resultArray = []; let resultString = resultArray.join("").toUpperCase(); for (let i = 0; i < input.length; i++){ // console.log('i is ' + i); if (input[i] === 'e'){ resultArray.push(input[i]); } if (input[i] === 'u'){ resultArray.push(input[i]); } for (let j = 0; j < vowelsArr.length; j++){ // console.log('j is ' + j); if (input[i] === vowelsArr[j]) { // console.log(vowelsArr[j]); resultArray.push(vowelsArr[j]); } } } console.log(resultArray); console.log(resultString);

But when I move the “resultString” down to the bottom it logs fine. Just wondering why this would be and why the same thing doesnt happen with “resultArray” given that’s at the top of the file too and “resultString” is based on “resultArray”?

let input = 'turpentine and turtles'; const vowelsArr = ['a', 'e', 'i', 'o', 'u']; let resultArray = []; for (let i = 0; i < input.length; i++){ // console.log('i is ' + i); if (input[i] === 'e'){ resultArray.push(input[i]); } if (input[i] === 'u'){ resultArray.push(input[i]); } for (let j = 0; j < vowelsArr.length; j++){ // console.log('j is ' + j); if (input[i] === vowelsArr[j]) { // console.log(vowelsArr[j]); resultArray.push(vowelsArr[j]); } } } let resultString = resultArray.join("").toUpperCase(); console.log(resultArray); console.log(resultString);

Many thanks
Adam

Hey there and welcome to the forums!

This requires some thinking about how Javascript works. When you run a Javascript file, the code executes from top to bottom generally (excluding things like function hoisting and so on, but that’s outside the scope of this answer). Therefore in the general sense, code higher in the script can never be affected by code below it.

The reason this has an effect here is because of how this code is constructed. You are declaring your variables, then appending to the resultArray, and then printing the variables. However do you see the issue here? Line 4 is called directly after Line 3. As a result, when the resultString variable is created, resultArray is empty as it has just been initialised. Therefore resultString is set to an empty string, and then the loop runs that actually appends the letters to the resultArray.

However when you declare resultString on Line 25 this isn’t an issue. The for loop has already run and resultArray actually has the values inside of it now. Therefore when the join is executed, there’s actually characters to be joined together. Therefore you have two options:-

  1. You can go with code block 2, declaring the resultString right at the end of the script. or;
  2. You can declare the resultString at the top, but assign it later on after the for loop has been carried out, like so.
let resultString;

for (let i = 0; i < input.length; i++) {
    // Loop stuff goes here
}

resultString = resultArray.join("").toUpperCase();

This way you can keep the script more organised with all your declarations up at the top, whilst also ensuring that the resultString is assigned only when resultArray actually has a value. This would be my preference as I like to declare all variables at the start since it means you know where to look for it, however either would work fine.

Hi Adam,

Thanks a lot for the explanation. That does make sense now I just needed the process laying out methodically. I think where I got confused was thinking that much like a spreadsheet if I update the resultArray var that resultString would update automatically too but of course I have to tell resultString to update/re-assign if I need it to.

I think i’d prefer to declare the variable at the top and then assign it later like you.

Many thanks for the help.

Adam