Javascript Portfolio Project - Mixed Msgs - Questions

Projects
1

Mixed Messages | Codecademy

Hello! Thank you for reading. I have 2 examples of code. The first one works exactly as intended, and the second one uses an unnecessary object that hampers its functioning. However, I don’t know why it’s not working, and I feel understanding that is key to my Javascript education. Any insight would be appreciated!

WORKING CODE:

const generateRandomNumber = num => {
    // Generates number from 0 --> num - 1
    return Math.floor(Math.random() * num);
}

const arrObj = {
    greeting: ['Hello', 'Hiya', 'Howdy', 'Hellur', 'Hallo'],
    adj: ['Smelly', 'Strange', 'Angry', 'Scary', 'Weird'],
    noun: ['Human', 'Gorilla', 'Beast', 'Munchkin', 'Animal']
}

const newArr = [];

for (let item in arrObj) {
    let optionIndex = generateRandomNumber(arrObj[item].length);
    switch(item) {
        case 'greeting':
            newArr.push(arrObj[item][optionIndex]);
            break;
        case 'adj':
            newArr.push(arrObj[item][optionIndex]);
            break;
        case 'noun':
            newArr.push(arrObj[item][optionIndex]);
            break;
        default:
            newArr.push('');
    }
}

const formatArr = arr => {
    let formatted = arr.join(' ');
    console.log(formatted);
}

formatArr(newArr);

FAILING CODE:

const overObj = {
    generateRandomNum(num) {
        return Math.floor(Math.random() * num.length);
    },

    arrObj: {
        greeting: ['Hello', 'Hiya', 'Howdy', 'Hellur', 'Hallo'],
        adj: ['Smelly', 'Strange', 'Angry', 'Scary', 'Weird'],
        noun: ['Human', 'Gorilla', 'Beast', 'Munchkin', 'Animal']
    },

    newArr: [],

    formatArr(arr) {
        arr.join(' ');
        console.log(arr);
    }
}

for (let item in overObj.arrObj) {
    let optionIndex = overObj.generateRandomNum(overObj.arrObj[item].length);

    switch(item) {
        case 'greeting':
            overObj.newArr.push(overObj.arrObj[item][optionIndex]);
            break;
        case 'adj':
            overObj.newArr.push(overObj.arrObj[item][optionIndex]);
            break;
        case 'noun':
            overObj.newArr.push(overObj.arrObj[item][optionIndex]);
            break;
        default:
            overObj.newArr.push('');
    }
}

overObj.formatArr(overObj.newArr);

ERROR RELATED TO FAILING CODE (returning undefined):

[Running] node "c:\Users\jayyy\OneDrive\Desktop\Projects\JS Portfolio Project\newTry.js"

[ undefined, undefined, undefined ]

[Done] exited with code=0 in 0.432 seconds

In-depth responses are appreciated. Thanks again!

2

I don’t think that an in depth explanation is necessary here, because the error is just a matter of sloppiness.
One core key of Javascript understanding is the ability of debugging. The simple, but a little laborious way is to log every single variable and parameter. Go to the first one that is undefined or NaN or anything deviating from what you expect as a value. Then investigate the code that produces it. That way you can trace the error down. There are also many tutorials about how you can investigate your code in the dev tools.

I’m sure you can find the error this way all by yourself. If you did all that and found the exact line that fails and still don’t understand, post the line in question here.

3

If I’m honest, this response doesn’t feel helpful at all. . .and I don’t mean this with any offense, but you basically just said “something’s wrong, figure it out with logs.” Considering the code examples are nearly identical - aside from accounting for overObj{} - I can’t fathom what is wrong with it or what is ‘sloppy’. Which is why I’m reaching out for help in the first place. I already tried to debug using console logs, and I couldn’t figure anything out. I would appreciate more in-depth help and responses from you or anyone reading this. I’m not far enough along in my Javascript education to be getting these kinds of criticisms. My confusion right now lies in the logic of the language and why or how it may or may not work under certain conditions or with certain changes.

4

Nearly – there is a slight difference.

It was not meant as criticism. And not ironic. Logging every single variable really helps. It is a sincere recommendation.

1. Inspect the code block that is running first:

for (let item in overObj.arrObj) {
   console.log('item', item) // logs the item --> check
   let optionIndex = overObj.generateRandomNum(overObj.arrObj[item].length);
   console.log('overObj.arrObj[item].length', overObj.arrObj[item].length)
   // logs 5 --> check
   console.log('optionIndex', optionIndex) 
   // logs NaN --> inspect generateRandomNum
   // no need to log more in this block --> the culprit is in generateRandomNum
...
}

2. Inspect the failing function

const overObj = {
    generateRandomNum(num) {
    console.log('num', num) // it's a number --> check
    console.log('Math.floor(Math.random() * num.length)', Math.floor(Math.random() * num.length)) 
    // NaN --> investigate this line and compare it 
    // to the equivalent in your first working code
        return Math.floor(Math.random() * num.length);
    },

And calling it sloppiness was also not meant as criticism. That happens to all of us – at any level. It’s all about knowing the techniques to finding it. We’ll never stop debugging.