Функции в JavaScript

Функции в JavaScript
Антон Ларичев
Основатель школы PurpleSchool

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

Определение функции в JavaScript

Функции в JavaScript - это блоки кода, которые могут быть вызваны для выполнения определенных задач. Они представляют собой участки кода, которые могут принимать параметры (входные данные для описания функции), выполнять определенные операции и возвращать результат (выходные данные). Любая функция в JavaScript является объектом, а следовательно может быть передана в виде аргумента (входные данные для выполнения функции) другой функции, быть возвращена в качестве результата работы другой функции и присвоена в качестве значения переменной или свойства объекта. Далее мы рассмотри способы объявления функций и разницу между ними.

Function Declarations: базовое объявление функции

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

Функции в JavaScript

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

Функции в JavaScript

Function Expressions: функциональные выражения

Как мы уже знаем, функция это объект, а значит может быть задана в качестве значения переменной (”const a = function b(){}”). При таком объявлении мы получаем возможность присвоить функцию в качестве свойства объекта и создавать безымянные функции, которые будут вызываться через имя переменной или свойства объекта, которым они присвоены как значения.

Функции в JavaScript

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

Функции в JavaScript

Arrow Functions: стрелочные функции

У обоих предыдущих способов объявления функции есть недостатки. Во-первых значение объекта контекста this для таких функций определяется в зависимости от многих факторов (новый объект в случае конструктора, undefined в strict mode, контекстный объект, если функция вызвана как метод объекта, и т.д.) и это приходится отслеживать для каждой функции. Во-вторых длинный синтаксис с ключевым словом function и обязательным заключением тела функции в фигурные скобки. Оба недостатка исправлены в стрелочных функциях для которых this явно определяется окружающим функцию контекстом, а синтаксис в самом минимальном виде представляет собой набор параметров в скобках и “стрелка” из знаков равно и закрывающей угловой скобки (”()⇒”).

Функции в JavaScript

Кроме того все стрелочные функции безымянны и в них могут быть объявлены выходные данные без явного указания инструкции return.

Функции в JavaScript

IIFE: Самовызывающиеся функции

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

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

Функции в JavaScript

Параметры и аргументы функций

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

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

Кроме того, при объявлении параметров мы можем задать для значения по-умолчанию, которые будут присвоены, если аргумент не передан.

Функции в JavaScript

Заключение

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

JavaScript с нуля - основы языка и практика для начинающих

- 16 часов коротких лекций по 10 - 15 минут

- 15 упражнений для закрепления на практике1

- 5 тестов для проверки знаний

- Рейтинг ⭐ 4.9 на основании отзывов

- 30-ти дневная гарантия возврата денег

JavaScript Advanced - продвинутые концепции языка и ООП

- 18 часов коротких лекций по 10 - 15 минут

- 30упражнений для закрепления на практике

- 14 тестов для проверки знаний

- Рейтинг ⭐ 4.9 на основании отзывов

- 30-ти дневная гарантия возврата денег

Начать дискуссию