Undefined output in sleep debt JS project

Expected output:

56
77
You need 21 hours of more rest per week

Actual output:
56
77
You need 21 hours of more rest per week
undefined

Question:

Where is the undefined coming from?

Code:

const getSleepHours = day => {
if (day === ‘monday’) {
return 8;
} else if (day === ‘tuesday’) {
return 8;
} else if (day === ‘wednesday’) {
return 8;
} else if (day === ‘thursday’) {
return 8;
} else if (day === ‘friday’) {
return 8;
} else if (day === ‘saturday’) {
return 8;
} else if (day === ‘sunday’) {
return 8;
} else {
return ‘error’;
}
};

const getActualSleepHours = () => getSleepHours(‘monday’) + getSleepHours(‘tuesday’) + getSleepHours(‘wednesday’) + getSleepHours(‘thursday’) + getSleepHours(‘friday’) + getSleepHours(‘saturday’) + getSleepHours(‘sunday’);

const getIdealSleepHours = () => {
const idealHours = 11;
return (idealHours * 7);
};

const calculateSleepDebt = () => {
const actualSleepHours = getActualSleepHours();
const idealSleepHours = getIdealSleepHours();

if (actualSleepHours === idealSleepHours)
{console.log(‘You got the perfect amount of sleep’)
} else if (actualSleepHours < idealSleepHours)
{console.log(You need ${idealSleepHours - actualSleepHours} hours of more rest per week)
} else if (actualSleepHours > idealSleepHours)
{console.log(You got ${actualSleepHours - idealSleepHours} hours of extra sleep this week)
} else {console.log(‘something is broken’)}
}

console.log(getActualSleepHours())
console.log(getIdealSleepHours())
console.log(calculateSleepDebt())

Hey @arc0358655042! How are you doing? Check this out, it may answer your question:

In your case specifically is your arrow function getActualSleepHours that doesn’t return anything. :wink:

^this is wrong sorry, I forgot that oneline arrow function returns by default without the keyword. :slight_smile:

Edit:
And calculateSleepDebt() too! As @midlindner pointed out :slight_smile: I missed that haha
Cheers,

Hello, @arc0358655042. Welcome to the forums.

When you have a function that doesn’t explicitly return a value in javascript, the function implicitly returns undefined.

console.log() is a function that prints the argument to the console. You have three calls to console.log(). In each case you are passing another function call as the argument to console.log(). What gets printed is the value returned by those functions. getActualSleepHours() returns 56, so it gets printed. getIdealSleepHours() returns 77, so it gets printed. calculateSleepDebt() returns…?

Ever wonder what console.log() returns?

console.log(console.log('Hello world!'));

You guessed it! undefined

Thank you for the guidance.

I ran an empty console.log() to test and the console is blank not “undefined”.

“return” is still an abstract concept for me. I think it means to write down (record) the result of the function back to the declared variable (let, var or const), is that correct?

In the case of this sleep demo, we are invoking an anonymous function using a variable name and printing results, but not ever writing down the result (returning) back to the variables memory black.

Yes, but if you do this: console.log(console.log()); the inner console.log() will print nothing because that is the argument passed to it, but the outer console.log() will print the return value of its argument. The return value is undefined.

return simply hands a value back to the caller. If you have an explicit return statement, the value specified will be returned. If you don’t, undefined is implicitly returned. Your first two functions have explicit returns. You intentionally returned the values 56 and 77. Your last function calculateSleepDebt prints something to the console, but doesn’t explicitly return anything, so undefined is implicitly returned to the caller. The caller in this case is a console.log() function call, so the returned value of undefined gets printed. If you want a function to run without printing what it returns, you can just call the function:

const someFunction = someParameter => console.log(someParameter);

//call the function
someFunction("Hello");

//call the function, and print its return value
console.log(someFunction("Bye"));

Output:

Hello
Bye
undefined

Thank you again!

I need to keep studying this. It’s not quite landing for me.

What happens if you just call calculateSleepDebt() without passing it as an argument to console.log()?

Hint
//change the line from console.log(calculateSleepDebt()); to the following:
calculateSleepDebt();

I ran an empty console.log() to test and the console is blank not “undefined”.

That actually depends from the console, if you open the console of any Browser it will output undefined:

image

Thank you again so much.

“Return” is making more sense. Send XYZ back to the thing that calls (aka invokes) you.

This exercise tested my thinking. No doubt. Because you have a function ‘calculateSleepDebt’ who’s job is to do some logical condition checks and then print to the console various strings based on the conditions.

Then you have other functions like ‘getIdealSleepHours’ that are doing computations and returning the result, but no condition checks or other actions like printing.

The mind numbing part is the nested console.log exercise. And I admit I am still only holding on by a thread here. Inner function is printing nothing, because nothing is a thing it was told to print. Outer is printing undefined, because nothing was passed into it. What got me there was running console.log(console.log()) and seeing two lines 1) blank 2) undefined. In other words, nothing can be blank, but when nothing/blank is passed it becomes undefined.

Not exactly. undefined is the return value of the console.log() function, so the outer console.log() prints it. It wouldn’t matter if the inner console.log() printed an entire book. It would still return undefined. It’s job is to print to the console, but like any function in javascript, it will implicitly return undefined since it doesn’t have an explicit return value.

This may help illustrate.

const printAndReturn = () => { console.log("I'm printed!"); return "I'm the return value"; } //call the function only, and do nothing with the returned value printAndReturn(); console.log(); //blank line //call the function and assign a variable to the returned value to const whatIsReturned = printAndReturn(); //print the value console.log(whatIsReturned); console.log(); //call the function and print the return value without saving it console.log(printAndReturn());

“its job is to print”.

I think I got it!!!

The console log needs some value to print, either directly specified or returned by a function it called. And console.log does not return anything to anyone, that is not it’s job. So nesting console.log inside console.log is not giving the outer console.log anything to print. The outer console.log can’t do it’s job.

Breakthrough?

And, the flood gates opened.

Should have been:
//seeing if my function math works
console.log(getActualSleepHours())
console.log(getIdealSleepHours())

//directly invoking the main function who’s very job is conditional checks and printing to the console.
calculateSleepDebt()

1 Like

Getting there. The outer console.log does its job. It prints the value returned by its argument. That value is undefined, so it prints it.

1 Like

Yeah, makes total sense.

I’ll take the mental victory before I go drink from the firehose again.

1 Like

Ha, ha! Understanding the difference between console.log() and return can be tricky for some at first. I think part of the issue is due to how the lessons progress. Folks start to think that somehow console.log() is required in order to call a function. It’s just another function that does its job like any other function. Technically, it’s a method because it is a function that belongs to an object (the console). You’ll learn about objects and methods later. Happy coding!