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

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

Определение и вызов функции

Объявление функции начинается с ключевого слова function, за которым следует имя функции, которую вы хотите создать, после чего круглые скобки, т.е. (), и, наконец, код вашей функции, заключенный в фигурные скобки {}. Вот основной синтаксис для объявления функции:

function functionName() {
    // Code to be executed
}

Вот простой пример функции, которая покажет приветственное сообщение:

// Функция
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Вызов функции
sayHello(); // Выводит: Hello, welcome to this website!

Как только функция определена, ее можно вызывать из любого места в документе, вводя ее имя, а затем набор скобок, например, sayHello(), как в приведенном выше примере.

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

Добавление параметров в функции

Вы можете указать параметры, когда определяете свою функцию для приема входящих значений во время выполнения. Параметры (аргументы) работают как переменные-заполнители внутри функции; они заменяются во время выполнения значениями, предоставленными функции во время вызова.

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

function functionName(parameter1, parameter2, parameter3) {
    // Code to be executed
}

Функция displaySum() в следующем примере принимает два числа в качестве аргументов, просто складывает их вместе и затем отображает результат в браузере.

// Функция
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Вызов функции
displaySum(6, 20); // Выводит: 26
displaySum(-5, 17); // Выводит: 12

Вы можете определить столько параметров, сколько хотите. Однако для каждого указанного параметра необходимо передать соответствующий аргумент функции при его вызове, в противном случае его значение становится undefined. Давайте рассмотрим следующий пример:

// Функция
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Вызов функции
showFullname("Clark", "Kent"); // Выводит: Clark Kent
showFullname("John"); // Выводит: John undefined

Значения по умолчанию для параметров функции

С ES6, теперь вы можете указать значения по умолчанию для параметров функции. Это означает, что если при вызове функции не предоставлено никаких аргументов, будут использоваться эти значения параметров по умолчанию. Вот пример:

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, John

Хотя до ES6, чтобы добиться того же, нам пришлось написать что-то вроде этого:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, John

Чтобы узнать о других функциях ES6, ознакомьтесь с Руководством по функциям ES6 в JavaScript.

Возвращение значений из функции

Функция может вернуть значение обратно с помощью оператора return. Значение может быть любого типа, включая массивы и объекты.

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

// Функция
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Отображение возвращенного значения
alert(getSum(6, 20)); // Выводит: 26
alert(getSum(-5, 17)); // Выводит: 12

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

// Функция
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Сохраняем возвращаемое значение в переменной
var all = divideNumbers(10, 2);
 
// Отображение отдельных значений
alert(all[0]); // Выводит: 10
alert(all[1]); // Выводит: 2
alert(all[2]); // Выводит: 5

Работа с выражениями функций

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

// Объявление функции
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Выражение функции
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

Как только выражение функции сохранено в переменной, переменная может использоваться как функция:

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // Выводит: 15
 
var sum = getSum(7, 25);
alert(sum); // Выводит: 32

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

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

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

declaration(); // Выводит: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

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

ES6 ввел еще более короткий синтаксис для написания выражения функции, которое называется arrow-функцией. См. Руководство по функциям ES6 в JavaScript.

Область действия переменной

Вы можете объявлять переменные в любом месте JavaScript. Но расположение объявления определяет степень доступности переменной в программе JavaScript, т.е. где переменная может использоваться. Эта доступность называется областью действия переменной (variable scope).

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

// Функция
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Выводит: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

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

var greet = "Hello World!";
 
// Функция
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Выводит: Hello World!
 
alert(greet); // Выводит: Hello World!

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.