Return

Sometimes things that seem insignificant can be quite powerful and that's the case with the return statement.

Return

function add(a, b) {
  return a+b
}
console.log(add(2,2)) //4

Whenever you invoke a function, it's a bit like generating an equation. And equations have results. So, the basic job of the return statement is to return the result of the execution of the function.

Expressions

function add(a, b) {
  return console.log('Success'),
    a+b
}
console.log(add(2,2))
// Success
// 4

Expressions in JavaScript are pretty important. They're valid units of code that resolve to a value.

Take a look at the output I added to the comments. It's printing out the keyword success and then the results of the addition.

Here, we're using a comma operator to do this. The comma operator is interesting in that it will evaluate each of the operands from left to right and then return the value of the last operand.

So in the function I'm returning two statement. The first one logs the word success to the console. The second adds the two numbers. Because the addition is the last thing, it's what actually gets returned to the caller.

When console.log calls the function, it only receives the result of the addition and it outputs that to the console.

The key is to understand how each of these statements work. Don't worry, we'll get to some practice in a minute.

Return Quirks

function add(a, b) {
  return
    console.log('Success'),
    a+b
}
console.log(add(2,2))
// undefined

Let's say, I want to use the same code as before, but I want to make it look nicer so I add a carriage return.

Another quirk of javascript is that it assumes that every line of code is a statement. The compiler will add a semicolon at the end of a line if it's not there

So, when the compiler re-writes this, there will be a semicolon at the end of the return statement.

One of the by-products of the return statement is that it stops the execution of the rest of the function, so the lines won't execute.

So if you try this in CodeSpaces, you'll just get a value of undefined...everything after the return statement gets ignored.

Return Quirks

function add(a, b) {
  return (
    console.log('Success'),
    a+b
  )
}
console.log(add(2,2))
// Success
// 4

To fix something like this, you'll often see a set of parenthesis added to return statements to prevent auto semicolon insertion from causing a problem.

Multiple Returns

function add(a, b) {
 if (a>b) { return a+b }
 else { return a-b }
}
console.log(add(2,3))// -1
console.log(add(3,2))// 5

You can have more than one return statement in a function so in this conditional statement, the operation will depend on the value of a and b.

The function will return -1 and then 5.

No Returns

function add(a, b) {
  console.log(a + b)
}
add(2,3)
// 5
// undefined

If you don't use a return statement, the function still returns something...in this case a value of undefined.

Since we're putting the function in a console.log statement, that statement would output undefined.

It's the same as writing a return statement without anything next to it. Sometimes you see that when you want the function to stop executing something.

Returning Functions

function counter() {
  let number = 1
  return function() { console.log(number++) }
}
let steps = counter();
steps() // 1
steps() // 2

Try it

This sounds weird, but since functions return a value, they can also return other functions. This is somewhat common and useful for a number of patterns.

For example here, I'm creating a function that keeps track of a number. Each time I call this function, it's going to add one to the current count.

Somethign really cool is happening so it's worth jumping into codespaces.

We initialize the steps variable so that it can basically act as the function.

When it first executes, it initializes the number to 1 and then the return function logs the number to the console.

The interesting bit is the ++ operator. That increases the value of a variable by one...and this is key AFTER whatever is happening.

When it executes again, you might think that the value of number gets reset to 1, but that's not the case.

The function being returned actually changes the value of number, so the second time it runs, the copy that's in the steps variable has a value of 2, so it outputs that.

Every time you call it the value of the number will increase.

The ability of a function inside a function to affect the value of a parent like this is called a closure and it's an extremely powerful programming pattern.

I wanted to mention that I'm always giving you access to a codespaces, if you're having a hard time understanding some of the other code in the slides you can copy and paste it from the slides to the codespace.