Для чего return в функции возвращает что-то?

Будем считать, что Вы знаете основы языка и его базовые конструкции (циклы, условные операторы и пр.)

Если говорить условно, то в реальных проектах зачастую необходимо получить данные, в зависимости от действий пользователя\того что пришло с сервера.

Есть у Вас некий input. Пользователь ввел своё имя.

А что дальше? Давайте разбираться.

Вы хотите добавить к нему торжественное приветствие!

 function getValue(){
    //гипотетический input с атрибутом id='input_name';
    var name = document.getElementById("input_name").value;
    alert('Hello, Dear' + name + '!');
  }

И это будет работать.

Но после, Ваша программа разрастается, и там уже несколько инпутов, например, добавим инпут получения возраста пользователя:

 function getValue(){
    var name = document.getElementById("input_name").value;
    var age = document.getElementById("input_age").value;
    alert('Hello, Dear' + text + '!');
    alert('Dear' + name + 'your age is' + age);
  }

И тут в Вашу голову приходит мысль - а что если таких инпутов будет много? и для каждого случая не факт, что нужно будет одновременно выводить все, кому то достаточно увидеть возраст, а кому-то имя.

И Вы решаете разделить функционал на более мелкие части - ради простоты поддержки кода в будущем, чтобы не ломалось и работало как надо.

Само собой вы напишете примерно следующее:

function getName() {
  var name = document.getElementById("input_name").value;
}
function getAge() {
  var age = document.getElementById("input_age").value;
}

и уже будете вызывать в функции то, что вам необходимо:

function render() {
  var name(?);
  var age(?);
  if(name) {
    alert(name);
  }
  if(age) {
    alert(age);
  }
}

И тут появляется загвоздка. У нас 2 функции получают наши данные, которыми мы должны воспользоваться, но функция для того, чтобы ими воспользоваться - ничего о них не знает(области видимости разные, не добраться).

Тут нам на помощь и приходит return

Перепишем функции выше, чтобы функция показывающая пользователю данные узнала про данные из других функций:

//можно сделать 2мя способами
function getName() {
  //1й, более подробный
  var name = document.getElementById("input_name").value;
  return name;
  //2й
  return document.getElementById("input_name").value;
  //использовать либо 1й, либо 2й. Если использовать оба, то функция сработает до первого найденного `return` - всё, что дальше выполнено не будет.
}
//аналогично
function getAge() {
  //используем второй способ, нам незачем сохранять значение в переменной, ведь она кроме чем в `return` использоваться не будет.
  return document.getElementById("input_age").value;
}

Теперь мы можем в любой написанной или написанной в будущем функции получить значения из этих двух функций:

function render() {
  var name = getName();
  var age = getAge();
  if(name) {
    alert(name);
  }
  if(age) {
    alert(age);
  }
}

И всё это даже без использования входных параметров, с ними все становится еще более гибко, и удобно.

Вся суть программирования в том, чтобы получить какой-то результат.
Желательно, желаемый.

return именно это и делает - возвращает результат выполнения функции.
Иначе теряется смысл функции (не процедуры, а функции).