"undefined" in devtools and codepen - why?

JavaScript
1

Tell us what’s happening:
Why does the output say “undefined” when running it on codepen or devtools and also in VSCode when you run node in the terminal?

Your code so far

let catName;
let quote;
function catTalk() {
    "use strict";

  catName = "Oliver";
  quote = catName + " says Meow!";

}
console.log(catTalk());

var catName;
var quote;
function catTalk() {
"use strict";

catName = "Oliver";
quote = catName + " says Meow!";

}
catTalk();

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15.

Challenge: Explore Differences Between the var and let Keywords

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

If you’re talking about this:

console.log(catTalk());

It’s because this:

function catTalk() {
  catName = "Oliver";
  quote = catName + " says Meow!";
}

doesn’t return anything. If a function doesn’t return anything (in this case needing the return keyword) then it is has undefined as a return value.

4

Not sure I understand. It works when I enter it in freecodecamp browser and doesn’t give me “undefined” yet, when I use it in VS Code or codepen, it gives me “undefined”.

do you mean that I have to add:

return quote;

?

5

Just give it a try!

When you run a function, the function can:

  • do operations, e.g. creating new variables, assigning new values etc.
  • return something

Your current catTalk function does some operations (assigning new values to catName and quote), but doesn’t return something.

You want to return something so that other functions can use the return values, e.g. console.log wants to use the return value.

6

Right, to add to what miku is saying, if I wanted that function to just return “meow”, I’d just do:

function catTalk() {
  var sound = "Meow!";
  return sound;
}

Can you adapt that to what you want?

7

Yes, I added

This works. I think when I ran the tests without the return quote; it worked and it shouldn’t have without the return quote line, right?

return quote; // as in

let catName;
let quote;
function catTalk() {
    "use strict";

  catName = "Oliver";
  quote = catName + " says Meow!";
  return quote; //this works!

}
console.log(catTalk());
8

Right, I don’t know how it would have without the return. There is a way to do it without a return if you use an arrow function (you’ll learn that later) but with a function like you’re writing it, if you’re not using an explicit return, it’s not returning anything, in other words it’s returning undefined.

9

Yeah, that’s why I was surprised that it did work in the browser without the return statement. This is why I always work in my editor and get it working there first so I get used working like I normally would build. Mystery :slight_smile: