Функции: объявление и вызов

Представьте, что одну и ту же последовательность команд нужно выполнить несколько раз. Пока команд всего две, их можно просто скопировать:

duplicate.jsjs
console.log('Подключение…');console.log('Готово');console.log('Подключение…');console.log('Готово');console.log('Подключение…');console.log('Готово');
Консоль
Подключение…
Готово
Подключение…
Готово
Подключение…
Готово

Работает, но один и тот же код пришлось написать трижды. Если понадобится изменить сообщение или добавить ещё одну команду, исправлять придётся каждую копию.

Было бы удобнее записать эти команды один раз, дать им имя, а затем запускать по этому имени. Для этого и нужны функции:

connect.jsjs
function connect() {  console.log('Подключение…');  console.log('Готово');}connect();connect();connect();
Консоль
Подключение…
Готово
Подключение…
Готово
Подключение…
Готово

connect – функция. Код между { и } – её тело. Мы написали его один раз, а затем трижды вызвали функцию записью connect().

Посмотрим, что именно происходит при вызове:

Объявление один раз – тело при каждом вызове
function sayHi() {
Объявление: движок связал имя sayHi с функцией. Тело не выполняется.
console.log('Привет!');
}
sayHi();
sayHi();

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

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

Сами вызовы вам уже знакомы: console.log(...), Number(...) и String(...) – готовые функции языка, вы пользуетесь ими с первых уроков.

Объявить – не значит вызвать

Объявление только создаёт функцию: движок запоминает её и идёт дальше, тело не выполняется. Запускает тело вызов – имя со скобками. Нет вызова – нет и работы:

declare-only.jsjs
function sayBye() {  console.log('Пока!');}
КонсольНет вывода в консоль.

Программа объявила функцию и закончилась – тело так и не выполнилось. Добавим вызов:

declare-call.jsjs
function sayBye() {  console.log('Пока!');}sayBye();
Консоль
Пока!

Переменная, объявленная в теле, называется локальной: она рождается при вызове и исчезает, когда тело закончилось. Снаружи её просто нет – у каждой переменной есть своя область видимости, участок программы, где к ней можно обратиться. По шагам:

Переменная тела живёт внутри вызова
function makeCoffee() {
Функция объявлена – тело выполнится только при вызове.
const cup = 'капучино';
console.log(cup);
}
makeCoffee();
console.log(cup);
Консоль
Нет вывода в консоль.
Переменные
Переменных пока нет

Глобальные переменные

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

global.jsjs
// глобальная – объявлена вне функцийconst country = 'Норвегия';function where() {  // своей country нет – нашлась глобальная  console.log(country);}where();
Консоль
Норвегия

А если есть обе – и локальная, и глобальная с одним именем? Функция сначала ищет среди своих переменных и только потом смотрит наружу, поэтому внутри побеждает локальная:

shadow.jsjs
const drink = 'чай';function order() {  // своя, локальная  const drink = 'кофе';  console.log(drink);}order();console.log(drink);
Консоль
кофе
чай

// теперь вы знаете

  1. Функция – именованный блок кода: объявили один раз, вызываете сколько нужно
  2. Объявление только создаёт функцию; запускает тело вызов – имя со скобками
  3. Тело выполняется заново при каждом вызове
  4. console.log, Number, String – встроенные функции: вы вызывали их с первого урока
  5. Переменные из тела – локальные: видны только внутри функции
  6. Глобальная переменная объявлена вне функций и видна в том числе внутри них
  7. Есть и локальная, и глобальная с одним именем – внутри функции побеждает локальная

Проверьте себя

Что напечатает эта программа?

function ping() {
console.log('понг');
}

Верно ли, что тело функции выполняется уже в момент объявления?

Сколько строк напечатает эта программа?

function tick() {
console.log('тик');
}
tick();
tick();
tick();

Верно ли, что console.log(...) – это тоже вызов функции?

Что выведет эта программа?

function test() {
const secret = 42;
}
test();
console.log(secret);

Может ли функция прочитать глобальную переменную, объявленную вне её?

Что напечатает вызов paint()?

const color = 'синий';
function paint() {
const color = 'красный';
console.log(color);
}
paint();
переключают уроки · не работают при фокусе в полях ввода