#4 Функции в Javascript

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

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

Например у нас несколько раз в программе встречается

console.log('Hello Sasha');
console.log('Hello Sasha');
console.log('Hello Sasha');

В консоли мы видим, что у нас вывелось Hello Sasha. И мы хотим создать функцию, которая нам будет выводить в консоль "Hello Sasha".

Для этого мы используем слово function. Это зарезервированое слово, которое говорит о том, что мы хотим описать функцию. Дальше идет имя функции и аргументы функции в круглых скобках. Имя функции может быть абсолютно любое.

function showName ()

так как у нас нет аргументов, то ничего внутри скобок не пишем. Дальше идут фигурные скобки.

function showName () {
}

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

Внутри скобок будет код, который должна выполнять функция. В нашем случае это будет console.log.

function showName () {
  console.log('Hello Sasha');
}

Теперь давайте вызовем описанную функцию

showName();

Обновим страницу и увидим, что Hello Sasha уже вызвалась не 4 раза, а 5. Если мы закомментируем код с console.log и вызовем showName() 4 раза, то увидим точно так же 4 сообщения в консоли.

showName();
showName();
showName();
showName();

Нужно четко понимать что сверху у нас идет описание функции, где у нас есть зарезервированое слово function, вторым параметром идет название, дальше у нас будут идти аргументы и в фигурных скобках код функции. showName, который мы вызываем с круглыми скобками - это вызов функции. и не нужно их путать.

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

Теперь давайте усложним нашу фунцию. Мы хотим чтобы мы могли выводить разные имя и фамилию, а не только Hello Sasha. Для этого в вызов функции внутри круглых скобок нужно передать какие-то аргументы. Аргументами у нас будут две строки. Аргументы всегда пишутся через запятую. И в идеале ставить между ними пробел, чтобы это было читабельно.

showName('Ivan', 'Ivanovich');

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

function showName (name, surname) {
  console.log('Hello Sasha', name, surname);
}

Теперь если мы посмотрим в браузер, то мы увидим, что в консоли 1 раз написано

Ivan Ivanovich.

В всех остальных случаях написано

hello undefined undefined

Почему так? Мы вызвали функцию и только в первый раз передали ей аргументы. Поэтому здесь все работает как нужно.

Дальше мы с этими переменными внутри можем работать как с обычными переменными. Например мы можем вывести в консоль

console.log('Hello ' + name + ' ' + surname);

сделав конкатенацию строк. Конкатенация строк - это обьединение. То есть мы хотим, чтобы у нас вывелась одна большая строка.

Как мы видим в браузере, это уже не отдельные аргументы, а строка. И так как name и surname в остальных вариантах у нас нет, то при приведении в строку оно выводит нам строки undefined.

Давайте добавим в вызовы аргументы

showName('Ivan', 'Ivanovich');
showName('Vova', 'Vovovich');
showName('Lena', 'Lenovna');
showName('Katya', 'Katevna');

Если мы обновим страницу, то мы видим все наши аргументы в виде строки.

Очень часто нам нужно чт-то вернуть из функции. Зачем нам вообще это нужно? Представьте себе, что мы хотим, например, сделать две переменных. И мы хотим сделать переменную ivanFullname, которую мы бы получили вызвав нашу функцию.

var ivanName = 'Ivan';
var ivanSurname = 'Ivanovich';
var ivanFullname =

Если бы мы писали это без функции, то мы должны были бы написать

var ivanFullname = ivanName + ' ' + ivanSurname;

Теперь если бы мы вывели в консоль ivanFullname, мы бы получили полное имя.

console.log(ivanFullname);

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

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

function showName (name, surname) {
  var fullName = name + ' ' + surname;
  return fullName;
}

Теперь наша функция будет получать на вход name и surname, конкатить их в строку в переменную fullName и будет возвращать эту переменную. Дальше мы можем эту функцию чему-нибудь присвоить.

var ivanFullname = showName(ivanName, ivanSurname);

Видим, что у нас в браузере вывелась строка

Ivan Ivanovich

и теперь наш код стал чище.

Теперь представим себе, что у нас есть

var lenaName = 'Lena';
var lenaSurname = 'Lenovna';
var lenaFullname = showName(lenaName, lenaSurname);

и мы просто вызываем функцию showName. Нам вообще не важно, что функция делает в середине. Мы просто должны помнить, что мы передаем на вход и что она возвращает.

Также вы должны помнить, что если вы не описываете return функцию, то по умолчанию функция всегда будет возвращать undefined.