When the "return" keyword is required within a function

Lesson:

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-i/modules/fecp-learn-javascript-syntax-functions/lessons/functions/exercises/function-declaration

I’m having difficulty understanding when “return” is required within a function, and when it is not.

In the code below, the function call executes just fine using console.log. No return keyword is required.

However, when I change the formatting to the following - the return keyword IS required. Without it, this will log “undefined” to the console.

Any help understanding the role the placement of console.log plays in determining whether the return keyword is needed in a function would be appreciated :slight_smile:

return is not required in a function, although it is the only place we can write it. If we omit a return, JS supplies one as the function is exited: undefined.

Functional programming relies upon the flow of data into and out of functions. We pass a value in (the argument) and it gets assigned to a local variable (the parameter). The function acts upon that value in some useful way, to generate a result. That result is then passed back to the caller (return) which can then assign it to a variable, store it in a data structure, or output it in some completed form.

Ideally, our functions will not do the logging, but as in your second example, leave it to the caller.

let reminder = getReminder()
console.log(reminder)

Same as yours, only in two statements. This way we may continue to use the variable as needs be.

Thanks so much. Would you be able to provide any further clarification on why console.log should take place on the call, and not in the body of the function - and how this affects how we are able to use a variable? I’m having difficulty understanding this part.

1 Like

Logging is a conclusive action. There is nothing given back from the operation, except the returned, undefined.

Functions are very useful for taking action on some value and giving back the result. It’s as simple as the equation,

y = f(x)

That says, “y is a function of x”, in simplest terms. How we define f(x) is up to us, but just as in maths, we wouldn’t be printing the outcome, but rather assigning it to y.

If all we want to do is log something, then just log it. We don’t need a function for that. A lot of learners equate console.log() with return but that couldn’t be farther than the reality. Only return will further us along the data chain. Logging is a one and done operation, with no net value.

Likewise, logging has zero side effect on what we pass into it, unless we include the undefined that it returns.

Here’s a twister for you…

console.log(a = 6 * 7, a)

What would we expect from that? Note the assignment within the argument.

Surprise!

42 42

Even while a is assigned inside the argument, the variable still remains, as we see by the second output. That’s as about as elaborate as we can write that statement. It lets the evaluation process occur first, before streaming the output.

Logging is for most purposes, auxiliary. It is the reporting mechanism we have for once all our operations are concluded and the outcomes safely stored away for further action. Not only that, logging can only be done in the JavaScript console, not in the HTML document facing the user. We use it for debugging and tracing during a build cycle.

There is no connection between logging and how we use our variables. That is up to our design.

const f = x => x ** 2;

for (let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
    console.log(f(x))
}

Now compare to,

const squares = []
for (let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
    const y = f(x)
    console.log(y)
    squares.push(y)
}
console.log(squares)
1
4
9
16
25
36
49
64
81
100
[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Now let’s put all that into a function:

const squaresArray = array => {
  const f = x => x ** 2;    // utility function inside closure
  const squares = []
  for (let x of array) {
    const y = f(x)
    console.log(y)
    squares.push(y)
  }
  return squares
}
const squares = squaresArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

The output inside the loop will be the same (for debugging purposes) but the final result is stored as the squares array (the global has no relation to the local one in the function). You’ll learn about scope in upcoming lessons if it hasn’t been touched on yet.

To see the output,

console.log(squares)
[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Stored data is re-usable, just as a function is re-usable. Consider,

const quarts = squaresArray(squares)

Can you predict what that outcome will be? You guessed it…

console.log(quarts)
[ 1, 16, 81, 256, 625, 1296, 2401, 4096, 6561, 10000 ]
1 Like

This is awesome! Thank you for this in depth example, diving into it now…

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.