Функции в JavaScript

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

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

Синтаксис

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

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

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

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

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

{ } - в фигурных скобках - тело функции.

Вызов

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

    
    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: