Using variables inside a function block - Returns lesson

I am currently working on the ‘Intro to Functions’ lesson and have come to learning about ‘returns’.

I have completed the exercise following the required steps, solution below:

function monitorCount(rows, columns) {
  return rows * columns;
}

const numOfMonitors = monitorCount(5, 4);
console.log(numOfMonitors);

But I also tried to solve it anoter way, including the const inside the function block, see here:

function monitorCount(rows, columns) {
  const numOfMonitors = rows * columns;
  return numOfMonitors;
}

monitorCount(5, 4);
console.log(numOfMonitors);

But this does not work. Please could someone explain to me why this doesn’t work?

Thanks

1 Like

variables have scope, In the second code sample, numOfMonitors variable only exists within the body of the function (block scope)

this is precisely the reason why we use return

1 Like

Expanding on stetim’s answer on scope …

In the first code block, you stored the return value of your function (in this case, 20) inside a variable called numOfMonitors:

const numOfMonitors = monitorCount(5, 4);

Then, when you console.log(numOfMonitors); that’s exactly what you get… the stored value, 20, gets logged.

However, in the second code block, you created the same variable locally inside of a function, but then you returned it’s value into… nothingness. You didn’t save that value anywhere outside of that function. That’s why it’s said to exist locally, numOfMonitors only exists inside that function.

That’s why when you console.log(numOfMonitors); in the second example, you get an undefined result. The program doesn’t know to run the function to look inside for the result. It’s looking for a variable that doesn’t exist. But knowing this, you should still be able to log the value by logging the result of calling the function where the value exists, i.e. console.log(monitorCount(5, 4));

I hope this was clear. Happy coding :slight_smile:

Edit. Can you think of a way that you could still return a value from the second example while keeping numOfMonitors within the function? Hint: use a function expression instead of a function declaration.

Hi Both.

Thanks for the responses. Understand the issue now. So the solution is:

function monitorCount(rows, columns) {
    const numOfMonitors = rows * columns;
    return numOfMonitors;
  }
  
  console.log(monitorCount(5, 4));

Edit. Can you think of a way that you could still return a value from the second example while keeping numOfMonitors within the function? Hint: use a function expression instead of a function declaration.

Thanks for the challenge. This is what I came up with and it seems to work:

  const monitorCount = (rows, columns) => {
    const numberOfMonitors = rows * columns;
    return numberOfMonitors;
  }
  
console.log(monitorCount(5, 4));

Does one have an advantage over the other?

Why, just today I came across a discussion on the forum about that topic.

We could simplify your code and remove the named variable altogether:

const monitorCount = (rows, columns) => {return rows * columns};

And further again (using implicit return):

const monitorCount = (rows, columns) => rows * columns;

As an exercise, I always try to think of the many ways I could write a function when I need one.