ИТ Блог. Создание сайтов с применением JavaScript
Функция представляет собой блок кода, который выполняет действие или возвращает значение. Пользовательский код в функции определяется программистами, которые могут повторно использоваться, и, следовательно, могут сделать ваши программы более модульными и эффективными.
В этой статье мы выучим несколько способов определения функции, вызов функции, и использовать параметры функции в JavaScript.
Определяются функции, или объявляются с ключевым словом function. Ниже приведен синтаксис функции в JavaScript.
function nameOfFunction() {
// Код, который будет выполнен
}
Объявление начинается с ключевого слова function, за которым следует имя функции. Имена функций подчиняются тем же правилам, что и переменные – они могут содержать буквы, цифры, символы подчеркивания и знаки доллара, и часто написаны как ВерблюжийРегистр. После имени следует набор скобок, которые могут быть использованы для дополнительных параметров. Код функции содержится в фигурных скобках, так же, как для заявления for или заявления if.
В нашем первом примере, мы сделаем объявление функции для печати приветствия.
// Инициализация функции приветствия
function greet() {
console.log("Привет, Мир!");
}
Здесь мы имеем код для печати «Привет, Мир!» на консоли, находящейся внутри функции greet(). Однако, ничего не произойдет, и код не будет выполняться, пока мы вызовем функцию. Вы можете вызвать функцию, написав имя функции, за которым следуют скобки.
// Вызов функции greet();
Теперь мы поставим их вместе, определяя нашу функцию и ссылающегося на него.
// Инициализация функции приветствия
function greet() {
console.log("Привет, Мир!");
}
// Вызов функции
greet();
При вызове greet(); функция будет работать, и мы получим «Привет, Мир!» в качестве вывода программы.
Привет, Мир!
Теперь у нас есть код greet(), содержащийся в функции, и может использовать его столько раз, сколько мы хотим.
Используя параметры, мы можем сделать код более динамичным.
В нашем файле greet.js мы создали основную функцию, которая выводит «Привет, Мир!» на консоль. Используя параметры, мы можем добавить дополнительную функциональность, которая позволит сделать код более гибким. Параметры вводятся, которые передаются в функцию как имена и ведут себя как локальные переменные.
Когда пользователь регистрируется в приложении, мы хотим, чтобы программа приветствовала их по имени, вместо того, чтобы просто сказать, «Привет, Мир!».
Мы добавим параметр в функцию, которая называется name, чтобы представить имя приветствующего человека.
// Инициализация пользовательской функции приветствия
function greet(name) {
console.log(`Привет, ${name}!`);
}
В функции greet теперь мы имеем один параметр внутри скобок. Имя параметра следует тем же правилам, что и имя переменной. Внутри функции, вместо статической строки, состоящей из «Привет, Мир!», у нас есть шаблон буквальной строки, содержащую наш параметр, который теперь ведет себя как локальная переменная.
Вы заметите, что мы не определили наш параметр name в любом месте. Мы присваиваем ему значение, когда мы вызываем нашу функцию. Предполагая, что наш пользователь называется AndreyEx, мы будем вызывать функцию и поместим имя пользователя в качестве аргумента. Аргумент является фактическим значением, которое передается в функцию, в данном случае это строка “AndreyEx”.
// Вызов функции приветствия с "AndreyEx" в качестве аргумента
greet("AndreyEx");
Значение “AndreyEx”в настоящее время передается в функцию через параметр name. Теперь каждый раз, когда name используется по всей функции, она будет представлять “AndreyEx”. Вот весь код.
// Инициализация пользовательской функции приветствия
function greet(name) {
console.log(`Привет, ${name}!`);
}
// Вызов функции приветствия с "AndreyEx" в качестве аргумента
greet("AndreyEx");
Когда мы запустим программу выше, мы получим следующий результат.
Привет, AndreyEx!
Теперь у нас есть пример того, как функция может быть использована повторно. В реальном мире, например, функция будет тянуть имя из базы данных вместо того, чтобы напрямую поставлять имя в качестве значения аргумента.
В дополнение к параметрам, переменные могут быть объявлены внутри функции. Эти переменные известны как локальные переменные, и будут существовать только внутри рамки их собственного функционального блока. Область видимости переменной определяет доступность переменных; переменные, которые определены внутри функции не доступны за пределами функции, но они могут быть использованы столько раз, сколько их функция используется по всей программе.
Более чем один параметр может быть использован в функции. Мы можем передать несколько значений в функции и возвращать значение. Мы создадим функцию, чтобы найти сумму двух значений, представленных x и y.
// Инициализация функции добавления
function add(x, y) {
return x + y;
}
// Вызов функции для поиска суммы
add(9, 7);
В приведенной выше программе, мы определили функцию с параметрами x и y, а затем передаем значения 9 и 7 в функцию. Когда мы запустим программу, мы получим сумму этих чисел, как вывод.
16
В этом случае, 9 и 7 передаются в функцию sum(), программа возвращает 16.
Когда используется ключевое слово return, функция перестает выполняться и значение выражения возвращается. Хотя в этом случае браузер будет отображать значение в консоли, это не то же самое, как с помощью console.log() печать на консоль. Вызов на выходе функции будет значение именно там, где функция была вызвана. Это значение можно использовать сразу или поместить в переменную.
В последнем разделе мы использовали объявление функции, чтобы получить сумму двух чисел и вернуть это значение. Мы также можем создать выражение функции, присвоив функцию переменной.
Используя нашу же функцию примера, мы можем непосредственно применить возвращаемое значение переменной, в данном случае sum.
// Назначить функцию добавления константе summ
const sum = function add(x, y) {
return x + y;
}
// Вызов функции для поиска summ
sum(20, 5);
25
Теперь sum постоянная функция. Мы можем сделать это выражение более кратким, превратив его в анонимную функцию, которая является неназванной функцией. В настоящее время наша функция имеет имя add, но с функцией выражения не следует назвать функцию и имя обычно опускается.
// Назначить функцию константе summ
const sum = function(x, y) {
return x + y;
}
// Вызов функции для поиска summ
sum(100, 3);
103
В этом примере, мы удалили имя функции, которая была add, и превратили ее в анонимную функцию. Именованные выражение функции может быть использованы, чтобы помочь в отладке, но они обычно опускается.
До сих пор мы рассматривали, как определить функции, используя ключевое слово function. Тем не менее, есть более новый, более краткий способ определения функции, известная как функции выражения стрелкой от ECMAScript 6. Функции стрелки, как они обычно известны, представлены знаком равенства с последующим большим, чем знак: =>.
Функция стрелки всегда анонимная функция и тип выражения функции. Мы можем создать простой пример, чтобы найти произведение двух чисел.
// Определение функции умножения
const multiply = (x, y) => {
return x * y;
}
// Вызов функции для поиска продукта
multiply(30, 4);
120
Вместо того, чтобы писать ключевое слово function, мы используем стрелку =>, чтобы указать функцию. В противном случае, она работает так же, как регулярное выражение функции, с некоторыми расширенными различиями.
В случае только одного параметра, скобки могут быть исключены. В этом примере мы возводим x в квадрат, которая требует только одно число, которое будет передано в качестве аргумента. Скобки были опущены.
// Определение функции квадрата
const square = x => {
return x * x;
}
// Вызов функции
square(8);
64
С помощью этих конкретных примеров, которые только состоят из заявления return, функция стрелки позволяет синтаксису быть уменьшенным еще больше. Если в функции только одна строка, return, обе фигурные скобки и оператор return может быть опущены, как показано в приведенном ниже примере.
// Определение функции возведения в квадрат const square = x => x * x; // Вызов функции square(10);
100
Все три этих типа синтаксиса приводят к одному выводу. Как правило, вопрос предпочтений или стандартов кодирования компаний, решают, как вы будете структурировать свои собственные функции.
В этой статье мы рассмотрели объявления функций и функциональные выражения, возвращая значения из функции, присваивание значения функции для переменных и функций стрелок ES6.
Функции – это блоки кода, которые возвращают значение или выполняют действие, делая программы масштабируемыми и модульными.
Тэги: , операторы JavaScript, программирование Категории: JavaScript
