JS syntax pt2 mini linter || weird behavior with object-in-function grammar

Hi, I approached pts 4-5 of this lesson by making counter objects at the top of a function which incremented the counts with each pass of the array.forEach iteration below it. Here’s the code:

let story = 'Last weekend, I took literally the most beautiful bike ride of my life. The route is called "The 9W to Nyack" and it actually stretches all the way from Riverside Park in Manhattan to South Nyack, New Jersey. It\'s really an adventure from beginning to end! It is a 48 mile loop and it basically took me an entire day. I stopped at Riverbank State Park to take some extremely artsy photos. It was a short stop, though, because I had a really long way left to go. After a quick photo op at the very popular Little Red Lighthouse, I began my trek across the George Washington Bridge into New Jersey.  The GW is actually very long - 4,760 feet! I was already very tired by the time I got to the other side.  An hour later, I reached Greenbrook Nature Sanctuary, an extremely beautiful park along the coast of the Hudson.  Something that was very surprising to me was that near the end of the route you actually cross back into New York! At this point, you are very close to the end.';

let overusedWords = ['really', 'very', 'basically'];

let unnecessaryWords = ['extremely', 'literally', 'actually' ];

//
const storyWords = story.split(' ');

const betterWords = storyWords.filter(stWord => !(overusedWords.includes(stWord)))

const ouCounter = (txtArray, elimArray) => { 
  ouCounterObj = { };
  elimArray.forEach(elimWord => ouCounterObj[elimWord] = 0);
  txtArray.forEach(
    function(stWord) { if (elimArray.includes(stWord)) {
       this.ouCounterObj[stWord]++ 
       }
    }
    )
  return ouCounterObj;
}

const txtCounter = txtArray => { 
  txtCounterObj = { 
    wordCount: 0,
    sentCount: 0
  };
  txtArray.forEach(function(stWord) { txtCounterObj.wordCount++; if (stWord.includes('.')) { txtCounterObj.sentCount++} });
  return txtCounterObj; 
}

const logCounts = (txtArray, elimArray) => { 
  let ouCount = ouCounter(txtArray, elimArray);
  let txtCount = txtCounter(txtArray);
  console.log(`Text consists of ${txtCount.wordCount} words over ${txtCount.sentCount} sentences. \nThe following unnecessaryWords were used these numbers of times: \n${Object.keys(ouCount)[0]} (${Object.values(ouCount)[0]} times), \n${Object.keys(ouCount)[1]} (${Object.values(ouCount)[1]} times), \n${Object.keys(ouCount)[2]}: (${Object.values(ouCount)[2]} times).`)
}

//
logCounts(betterWords, unnecessaryWords)
console.log(betterWords.join(' '))

So in ouCounter() and txtCounter(), if I simply initialize the empty object as it appears above, no problems and it all works. But if I type “const ouCounterObj = …” or “let ouCounterObj = …” or “var ouCounterObj = …” I get "Type Error: cannot read property “literally” of undefined. The error appears on line 17, and I can console.log() below line 14 and confirm that the properties are being created inside the counter objects. The properties just cannot be updated in the array.forEach() loop.

Curious as to why this is! For now it’s easy to just leave off the “var” but this seems important to understand.

Here’s the project: JS >> Mini Linter

There is no need for the keyword this in this context. If you declare ouCounterObj as a variable with either let or const, you can simply refer to it as ouCounterObj[stWord] within your function.

1 Like