---
description: JavaScript простым языком
---

# Функции

[![Generic badge](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)

![](https://3367117456-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8VRUyYIp5X-d6oGwV2%2F-M8VvgCNc4No1l3WxSor%2F-M8VvwYHyy9N4LvjdCHz%2Fimg-17.png?alt=media\&token=87e22e5e-0959-4d47-acce-bf0af102111c)

За все предыдущие уроки, ты уже не раз пользовался различными функциями, такими как: `alert()`, `prompt()`.

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

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

Представь, у тебя есть форум. У каждого пользователя есть свой профиль, где он имеет возможность пополнить свой внутренний счет. На форуме очень много разделов и кнопка «**Пополнить счет»** встречается в нескольких местах сайта. Как обрабатывать множество кнопок? Что ж, мы можем для каждой кнопки написать один и тот же код обработки, но тогда это будет копированием одного и того же кода через весь проект. Т.е, мы можем делать примерно так:

```javascript
let amount = +prompt('На какую сумму Вы хотите пополнить \
счет?');
alert(`Счет пополнен на сумму ${amount} $`);
```

И мы можем копировать этот код по всему проекту, где нужно будет обработать нажатие кнопки. Но представь, что потом тебе нужно будет поменять валюту пополнения, т.е. сменить значок `$` на значок рубля (`₽`). Тебе придется искать по всему проекту, куда ты копировал эти обработчики и в каждом куске заменять этот знак.

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

```javascript
function callPayment() {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} $`);
}
```

Немного разберем синтаксис ([живой пример](https://repl.it/@JSstupid/functions-part-1-1)). Для того чтобы написать свою функцию, сначала нужно написать ключевое слово `function`, после него написать **имя** будущей **функции**, после имени, обязательно, открыть и закрыть скобочки `()`, затем открыть **тело функции** открывающей фигурной скобкой `{`написать весь требуемый код и закрыть тело функции закрывающей фигурной скобкой `}`. _Весь этот процесс называется определением функции._

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

```javascript
callPayment();
```

Вот и все. В этом и есть прелесть функций. Если вызвать функцию 3-5-10 раз, то весь код выполнится ровно столько же раз ([живой пример](https://repl.it/@JSstupid/functions-part-1-2)) :

```javascript
callPayment();
callPayment();
callPayment();
```

И, теперь, если нужно будет что-то поменять в процессе пополнения счета, то все что тебе будет нужно – это изменить саму функцию в одном месте.

#### **Аргументы функции** <a href="#toc_1" id="toc_1"></a>

Возьмем ту же самую функцию:

```javascript
function callPayment() {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} $`);
}
```

После имени функции есть скобки – `()`. Они не просто для красоты, а еще и для того, чтобы засунуть в функцию какие-либо данные. Сейчас все поймешь.

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

```javascript
alert(`Счет пополнен на сумму ${amount} $`);
```

И еще встает один вопрос: для каждой валюты писать свою функцию? `Ответ: нет`.

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

```javascript
function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}
```

Как видишь, в скобках появилась переменная с именем `currency`. Эту переменную можно использовать внутри функции. Для полноты картины ([живой пример](https://repl.it/@JSstupid/functions-part-1-3)):

```javascript
function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

let userCurrencyRub = '₽'; // валюта: рубль
let userCurrencyUSD = '$'; // валюта: доллар

callPayment(userCurrencyRub); // вызываем функцию с \
// валютой: рубль
callPayment(userCurrencyUSD); // вызываем функцию с \
// валютой: доллар
```

Если не понял, поясняю: мы берем нужную нам валюту и засовываем (**передаем**) ее внутрь **функции**. Переданное нами значение `userCurrency` записывается в переменную `currency`, которую мы написали при определении функции внутри `()`. Затем, полученную переменную `currency`, можно использовать внутри функции и в ней будет лежать именно то значение, которое мы передали.

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

#### **Значение аргументов по умолчанию** <a href="#toc_2" id="toc_2"></a>

```javascript
function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

callPayment();
```

Если вызвать функцию без передачи в нее аргумента `currency`, то значение этого аргумента (переменной) внутри функции будет равно `undefined`.

Чтобы не допустить этого, можно установить значение аргумента по умолчанию. Для этого внесем небольшие изменения в определении функции ([живой пример](https://repl.it/@JSstupid/functions-part-1-4)):

```javascript
function callPayment(currency =  '$') {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

callPayment();
```

Все что мы изменили, это приравняли аргумент `currency` к значению `$`. В таком случае, если вызвать функцию и не передать в нее значение аргумента – по умолчанию будет равен уже не `undefined`, а `$`.

При этом, если мы все-таки передадим какое-то значение, то **JavaScript** как бы забудет про то, что мы назначали значение по умолчанию и возьмет именно то значение, которое мы передали.

Думаю, на этом знакомство с функциями закончим. Пока вам необходимо будет разобраться с определением функции и ее аргументами.&#x20;

#### **Домашнее задание** <a href="#toc_3" id="toc_3"></a>

1. Определить функцию, которая будет запрашивать число (с помощью `prompt`), умножать его на `327` и делить на `10`. И с помощью `alert`выдавать полученное значение;
2. Определить функцию с аргументом, которая будет запрашивать число (с помощью `prompt`), умножать его на то значение, указанное в качестве аргумента. И с помощью `alert` выдавать полученное значение.
