Return Values in Functions

A return statement ends the execution of a function and returns a value to the function caller. By default, functions do not return a value.

function test() {}
test(); // undefined

You will get back whatever value you have after return.

function test() {
  return true;
}

test(); // true

You can return:

• numbers (integers and floats)
• booleans
• strings
• objects
• arrays
• functions
• null

Return stops function execution

Once the function reaches a return statement, the function ends. Anything that comes after the return statement is not executed.

function add(a, b) {
  return 'add function stops at first return';
  const sum = a + b;
  return sum;
}

add(1, 2); // 'add function stops at first return'

Conditional returns

The code goes through the conditionals and will return the indicated value. Have a return at the end that will return a default value if no conditions are met.

function isArrayEmpty(arr) {
  if (arr.length > 0) {
    return false;
  }
  return true;
}

// You can also write the function as:
function isArrayEmpty(arr) {
  if (arr.length > 0) {
    return false;
  } else {
    return true;
  }
}

isArrayEmpty(['cat', 'dog', 'car']); // false
isArrayEmpty([]); // true

Return in arrow functions

Using arrow functions can make your code more compact.

const divideInHalf = function(num) {
  return num / 2;
};

// vs

const divideInHalf = num => {
  return num / 2;
};

The syntax looks similar but the function(param) is replaced by (param) =>.

In arrow functions, there are also implicit returns. If there are no curly braces and the expression is on one line, that line gets returned.

Therefore, the function can also be written as:

const divideInHalf = num => num / 2;

Quiz - Spot the errors

1. Check if the number is even

function isNumberEven(num) {
  if (num % 2 === 0) {
    return true;
  }
}

2. Double all the values in an array of numbers

function doubleNumbersInArray(arr) {
  let newArr = [];

  for (let i = 0; i < arr.length; i++) {
    newArr.push(arr[i] * 2);

    return newArr;
  }
}

3. Greet a new friend

const greeting = name => {
  'Hi, nice to meet you ' + name;
};

Answers

1. Check if the number is even

In this function we want to know if a number is even or not. The expected result is either true or false. However, isNumberEven(6) returns true but isNumberEven(7) returns undefined.

The number 7 is odd and doesn’t fulfill the conditions of the if states so return true is skipped. The code continues but there are no return values defined for odd numbers so the return will be undefined.

Solution

function isNumberEven(num) {
  if (num % 2 === 0) {
    return true;
  }
  return false;
}

2. Double all the values in an array of numbers

What we want from this function is to take in an array of numbers, such as [1,2,3] and return an array with each number doubled, i.e. [2, 4, 6]. However, if we do doubleNumbersInArray([1,2,3]) it returns [2]. Why?

The most important thing to remember about returns is that once the function reaches its first return, nothing after it gets executed. In this function, the loop only reaches the first number and then is stopped.

It takes the first value of the array, multiplies it by two, then adds it to newArr. At this point, newArr = [2], which gets returned. The rest of the loop will not continue.

Solution

Move the return outside of the loop so the loop can finish before returning the newArr.

function doubleNumbersInArray(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    newArr.push(arr[i] * 2);
  }
  return newArr;
}

3. Greet a new friend

Arrow functions have implicit return only if the statements are not wrapped in a block by curly braces. In this question, everything is inside curly braces without an explicit return. If you do greeting('Rebecca') you will get undefined.

Solution

const greeting = name => {
  return 'Hi, nice to meet you ' + name; // explicit return
};

// OR

const greeting = name => 'Hi, nice to meet you ' + name; // remove the curly braces