#4 Функции в Javascript

poster
В этом уроке мы разберем как описываются функции в 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.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
berni27
1год назад назад
Привет! Как проверить name и surname на undefined, на тип данных, в функции showName ?
monsterlessons
1год назад назад
Привет. 1. Для проверки на то, что значение не задано достаточно написать if (!name || !surname) 2. Проверка на undefined обычно считается признаком плохого кода, так как первый вариант читабельнее if (typeof(name) !== "undefined") 3. Для проверки на тип данных используем опять typeof, но опять же обычно мы ожидаем данные определенного типа и такая проверка пишется редко. if (typeof(name) !== ''string")
berni27
1год назад назад
Благодарю за ответ!
vlad
2 лет назад
НЕТ. Смотреть вообще невозможно. 3 секунды воспроизводит 10 тормозит
vlad
2 лет назад
С воспроизведением прям БЯДА. Тормозит часто. На первых трех уроках воспроизведение в норме. Четвертый урок сразу тормоз включил. Может это из-за того что этот урок 10 минутный а первые уроки по 2 - 3 минуты? Но все равно смотреть не айс. На Ютубе может было бы лучше?
monsterlessons
2 лет назад
Вы уверены, что это не проблема в вашем интернете? Потому что у меня ничего не тормозит. И пока другие люди на воспроизведение не жаловались.
vlad
2 лет назад
Узнаю ответ разработчика :) Наврядли. 1. Пытался смотреть напрямую - скорость интернета 50 мбс и через вайфай - 20 мбс. Везде одинаковые тормоза у 4 урока. 2. Пытался смотреть на разных устройствах - везде одинаковые тормоза у 4 урока. ЕЩЕ МИНУС - на андроиде (смартфон) - видео вообще не воспроизводится и комментарии к уроку не открываются. Всегда открыт только "Текст видео". 3. Пытался смотреть в разное время суток. Везде одинаковые тормоза у 4 урока. 4. Первые 3 урока воспроизводятся без проблем. 5. Кроме минут в чем отличие 4 урока от первых трех?
vlad
2 лет назад
еще. 6. комментарии отображаются не ПОД родительским текстом а НАД. как-то не логично выглядит.
vlad
2 лет назад
я раньше тоже не жаловался т.к. уходил в ютуб на ваши уроки. но аналогичных уроков в ютубе нет, поэтому решил сообщить про баг.
monsterlessons
2 лет назад
Вообще отличий нет. Это просто mp4 файл лежащий на сервере. Какой браузер/ОС у вас? Комментарии пофикшу как только закончу платежи и выложу серию по React/Redux. В android надо смотреть. Какая версия андроида и какой девайс?
vlad
2 лет назад
1. Винда, смотрел через хромом (Версия 59.0.3071.86 (Официальная сборка), (32 бит)). 2. с IE 11 тоже бяда. видео не воспроизводится. 3. сасунг модель GT-I8190 андроид 4.1.2 4. может добавить функционал как на ютубе - просмотр видео разного качества? иногда при просмотре в HD были зависания. 5. первые 3 урока тоже mp4?
SmiteVils
3 лет назад
И почему вставлен плеер? Не лучше ли окно YouTube - там можно перейти на канал и подписаться.
monsterlessons
3 лет назад
Я хочу развивать сайт, а не youtube канал. Поэтому уроки на youtube перестали выкладываться. В будущем реализую подписку на сайте.
SmiteVils
3 лет назад
Уроки классные, только последовательность странная)
monsterlessons
3 лет назад
Думаю пока уберу кнопки вперед/назад, так как они всех путают)