Функции в JavaScript

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

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

examples/js/function.html

<script>
function show() {
  console.log('Hello World');
}

console.log('before');
show();
console.log('after');
</script>

view

Если вы попробуете (Try!) этот пример и откроете консоль JavaScript, чтобы посмотреть вывод, то увидите следующий порядок сообщений:

before
Hello World
after

Как вы видите, код выполняется не в том порядке, в котором написан в файле. Хотя функция определена раньше всего, она выполняется позднее, когда мы вызываем ее, используя имя show();

Многократный вызов функции

Пока еще было не очень интересно, но в примере дальше вы увидите, что мы можем вызывать одну и ту же функцию несколько раз.

examples/js/function_calls.html

<script>
function show() {
  console.log('Hello World');
}

show();
console.log('before');
show();
console.log('after');
show();
</script>

view

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

Hello World
before
Hello World
after
Hello World

Функции с параметрами

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

Внутри функции переменная name содержит текущее значение.

Это показывает реальную мощь функций.

Мы можем иметь один фрагмент кода, проверить его отдельно от остальной части кода, а затем использовать его много раз.

examples/js/function_parameters.html

<script>
function show(name) {
  console.log('Hello ', name);
}

show('Foo');
show('Bar');
show('Zorg');
</script>

view

Вывод функции:

Hello  Foo
Hello  Bar
Hello  Zorg