Функция возвращает undefined javascript

return

Функция возвращает результат, который будет передан в вызвавший её код. Для этого и используется ключевое слово return .

Пример

Скопировать ссылку «Пример» Скопировано

Примеры использования return. Функция проверки возраста на совершеннолетие и функция создания строки заданной длины со случайным содержимым — просто введите произвольные числа 😎

Как пишется

Скопировать ссылку «Как пишется» Скопировано

return используется только в функциях. Этот код приведёт к ошибке, так как не является функцией:

 const result = 42if (result > 10)  return true>return false const result = 42 if (result > 10)  return true > return false    Скопировать Скопировано Не удалось скопировать   

 function isAdult(age)  return age > 18> function isAdult(age)  return age > 18 >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Определённый код «сгруппирован» и объединён в функцию, например проверка — чётное число или нет:

 function isEven(value)  if (undefined === value || null === value)  return false > return value % 2 == 0> function isEven(value)  if (undefined === value || null === value)  return false > return value % 2 == 0 >    Скопировать Скопировано Не удалось скопировать   

Пример

Скопировать ссылку «Пример» Скопировано

Для возврата значения используется инструкция return

Она может находиться в любом месте функции. Как только до неё доходит управление — функция завершается и значение передаётся обратно.

Писать return в функции необязательно. Рассмотрим пример:

 function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg)> function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) >    Скопировать Скопировано Не удалось скопировать   

Такой функции нечего возвращать, она служит только для группировки набора команд.

Несмотря на отсутствие return , такая функция будет возвращать undefined , будто бы в ней последней строчкой написано return undefined

Ниже пример, который показывает что это действительно так:

 function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg)>function notifyFull(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) return undefined>const a = notify('Сообщение')const b = notifyFull('Сообщение')console.log(a === b)// true function notify(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) > function notifyFull(msg, type)  if (type === 'error')  alert('ОШИБКА:' + msg) > alert(msg) return undefined > const a = notify('Сообщение') const b = notifyFull('Сообщение') console.log(a === b) // true    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

🛠 Благодаря return можно использовать результат работы функции где угодно. Например, в условиях или при формировании новых значений. Пример ниже использует функцию с return для проверки условия — действительно ли счёт игрока больше 100:

 function checkScore(score)  return score > 100>const s1 = 10const s2 = 15const s3 = 20if (checkScore(s1)) alert('игрок 1 проходит')if (checkScore(s2)) alert('игрок 2 проходит')if (checkScore(s3)) alert('игрок 3 проходит') function checkScore(score)  return score > 100 > const s1 = 10 const s2 = 15 const s3 = 20 if (checkScore(s1)) alert('игрок 1 проходит') if (checkScore(s2)) alert('игрок 2 проходит') if (checkScore(s3)) alert('игрок 3 проходит')    Скопировать Скопировано Не удалось скопировать   

 const s1 = 10const s2 = 15const s3 = 20if (s1 > 100) alert('игрок 1 проходит')if (s2 > 100) alert('игрок 2 проходит')if (s3 > 100) alert('игрок 3 проходит') const s1 = 10 const s2 = 15 const s3 = 20 if (s1 > 100) alert('игрок 1 проходит') if (s2 > 100) alert('игрок 2 проходит') if (s3 > 100) alert('игрок 3 проходит')    Скопировать Скопировано Не удалось скопировать   

Почему эффективнее?

• если условие проверки очков изменится — его придётся писать в нескольких местах.
• если условие будет состоять более чем из одной проверки, то if усложнится и его будет сложнее понимать. Функцию, дающую ответ true или false легче читать в условном операторе.

Необходимо помнить, если выполнение функции завершилось не через return , то возвращаемое значение будет undefined ;

Самый простой способ этого избежать — всегда добавлять return с каким-либо значением перед концом функции.

• Ещё return останавливает выполнение функции. Обычно это ожидаемое поведение, но если про это забыть — возможны баги.

Источник

Функции в JavaScript

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

Функция — это блок кода, который решает определенную задачу или возвращает значение и может выполняться многократно в разных местах и с разными входными данными. В JavaScript уже есть встроенные функции, такие как Math.random() , prompt(message, default) , Date() и многие другие. Здесь мы поговорим о тех, которые можно создавать самостоятельно.

Синтаксис

Работу с функциями можно разделить на два этапа: создание (объявление) и выполнение (вызов).

Объявление функции

function — ключевое слово, обозначающее функцию.

showIntention() — имя функции, а в круглых скобках её параметры.

< >— в фигурных скобках — тело функции.

Вызов

Для того, чтобы функция отработала мы должны ее вызвать.

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

 function showIntention() < alert( 'Я хочу стать программистом!' ); >showIntention(); showIntention(); 

1. Из названия функции должно быть предельно понятно, что там происходит.
2. Для нейминга функций обозначающих действие чаще всего используют глагольные префиксы + уточнение. К первым относят: show, get, calc, create, check.
3. Название может быть написано, как в стиле lowerCamelCase, так и в стиле snake_case. Первый вариант более предпочтителен и рекомендуется к применению в JavaScript. Какой вариант вы бы не выбрали, важно помнить, что название функции чувствительно к регистру.
4. Не используйте для нейминга кириллицу или транслит. Несмотря на то, что в первом случае все будет работать, а во втором вроде все понятно, подобная практика считается дурным тоном.
5. Используйте для названия функций английские слова.
6. Имя функции не должно начинаться с цифры.

Далее разберем особенности и нюансы, которые необходимо знать при работе с функциями в JavaScript

Параметры и аргументы

Параметры функции в JavaScript записываются в круглых скобках и передаются в качестве аргументов в тело программы, как локальные переменные.

 function showStudentIntention(studentName, profession) < alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention("Лера", "React-разработчик"); showStudentIntention("Константин", "Web-разработчик"); 

При вызове showStudentIntention в локальные переменные name и profession копируются значения имени и профессии в первом случае это «Лера» и «React-разработчик». Далее они используются в теле функции — в итоге мы получаем “Лера хочет освоить профессию React-разработчик”.

Функция не меняет внешние переменные, а получает копии, с которыми и работает.

 let studentName = "Лера"; let profession = "React-разработчик" function showStudentIntention(studentName, profession) < studentName = "Константин"; profession = "Web-разработчик"; alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention(studentName, profession); alert(studentName + " хочет освоить профессию " + profession); 

В этой программе первое модальное окно, которое вызывается showStudentIntention будет содержать информацию о Константине — внутри функции мы объявили переменные studentName и profession — внешние проигнорированы. Второй alert будет про Леру, так как здесь значения берутся уже из внешних переменных, которые еще называются глобальными. Такие переменные располагаются снаружи всех функций — в рабочих проектах их использование стараются сводить к минимуму.

Локальные переменные

Область видимости переменных объявленных внутри функции ограничиваются этой функцией.

 function showStudentIntention() < let studentName = "Константин"; let profession = "Web-разработчик"; alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention() alert(studentName + " считает профессию " + profession + " бесперспективной"); 

В данном примере отработает только вызов функции, второй alert не сработает, а в консоли можно будет увидеть ошибку — Uncaught ReferenceError: studentName is not defined.

Параметры по умолчанию

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

 function showStudentIntention(studentName, profession = "программист") < alert(studentName + " хочет освоить профессию " + profession); >showStudentIntention("Лера"); //Лера хочет освоить профессию программист 

Здесь это — profession = «программист»

Также параметры по умолчанию могут использовать значения предыдущих параметров, которые расположены левее.

 function calcScores(studentName, scoresFirstExam, scoresSecondExam, examResults = scoresFirstExam + scoresSecondExam) < alert(studentName + " набрала за экзамены " + examResults + " баллов"); >calcScores("Лера", 50, 80); 

Если говорить о максимальном количестве аргументов, которые может принять функция — это 255.

Возврат значения — return

В качестве результата функция может передавать определенное значение, для этого используют директиву return .

 function calcScores(scoresFirstExam, scoresSecondExam, scoresThirdExam) < let examResults = "Результат за три экзамена " + (scoresFirstExam + scoresSecondExam + scoresThirdExam); return examResults; >alert(calcScores(50, 50, 80)); 

По умолчанию функция возвращает undefined , в том числе и при пустом return . Сама директива может встречаться в теле функции несколько раз. Как выполнение кода доходит до первого return программа останавливается и возвращается соответствующее значение.

 function calcScores(scoresFirstExam, scoresSecondExam, scoresThirdExam) < let examResults = scoresFirstExam + scoresSecondExam + scoresThirdExam; if (examResults >= 185) < return "Вы поступили!"; >else < return "Вы не поступили!"; >> alert(calcScores(50, 50, 100)); // Вы поступили! alert(calcScores(50, 50, 50)); // Вы не поступили! 

Пустой return используется и для того, чтобы просто прекратить выполнение функции.

При длинной записи может появиться соблазн добавить перевод строки между return и его значением. Однако делать этого нельзя, если только не заключить значение в круглые скобки.

 return a + b + c; // верно return ( a + b + c // верно ) return // интерпретатор автоматически поставит ; после return a + b + c // функция не вернет значение 

Итого

Функции являются одними из важнейших строительных блоков программы на JavaScript. Они бывают встроенными, когда функционал уже заложен в языке и самописными. Самописные функции в свою очередь могут быть записаны с помощью разного синтаксиса: Function Declaration, Function Expression и «стрелочные функции». В данном уроке мы рассмотрели только первый способ.

Основные моменты работы с функциями записанными в стиле Function Declaration:

• для создания функции её необходимо объявить с помощью специальной команды function ;
• функция может иметь в своем арсенале до 255 параметров, которые записываются в круглых скобках — function name(param1, param2, param3) ;
• для вызова функции нужно прописать её название, круглые скобки и там же параметры, если они есть — functionName(param1, param2) ;
• функция имеет доступ к внешним переменным, но внешнее окружение не имеет доступа к переменным объявленным внутри функции;
• с помощью директивы return функция может возвращать необходимое значение, по умолчанию это undefined .

Skypro — научим с нуля

Источник