Функции в JAVASCRIPT. Стрелочные функции, рекурсия, планирование: setTimeout и setInterval.
HTML-код
- Опубликовано: 28 июн 2024
- Функции в JAVASCRIPT. Продолжаем учить JavaScript и сегодня поговорим о функциях. Функции - позволяют нам выполнять один и тот же отрезок кода в разных частях программы что делает их основными строительными элементами. В этом уроке научимся создавать функции разными способами, планировать выполнение функций ну и конечно же разберем практические примеры. Итак, чаще всего создавать функции мы будем одним из двух способов. Объявлять функции (Function Declaration) или строить функциональные выражения (Function Expression).
👉 Файлы урока - fls.guru/files/tutorials/js/j...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В уроке
00:19 - Объявление функции (Function Declaration)
00:51 - Имена функций
01:47 - Запуск функции
02:43 - Вложенность и видимость функций
03:14 - Локальные и внешние переменные
04:59 - Параметры (аргументы) функции
07:22 - Возврат результата
08:24 - Знакомство с рекурсией
09:31 - Функциональные выражения (Function Expression)
11:20 - Стрелочные функции (Arrow functions)
12:57 - Планирование: setTimeout и setInterval
16:22 - Предназначение функций
17:20 - Домашка
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟Лайк + коммент ускоряют выход уроков :) Спасибо)
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Вот и я затерялась с функциями на своем учебнике и вспомнила что можно тут разжевать лучше для себя. Спасибо за материал,
Жека, спасибо за уроки! Хотелось бы отдельный урок по колбекам, так как они очень часто используются.
Поднимите в топ, чтобы Жека увидел
+
@@nargizgasanova6222 +
-
@@user-yd1yf7jo6c +
@@user-to7bo1rb3z +
Когда подолгу туплю в чём то, всегда стараюсь найти эту тему на твоём канале. Спасибо за твои труды. Очень помогает
Я рад!
еще топ книга js для детей
Женя,спасибо!
Задача №1: Сначала появится "Коля" (по причине setTimeout хоть и в 0мс. Если причина другая , напишите кто-нибудь)
Задача№2: Правильно, т.к. это функция вида "объявление функции"(function declaration),а при это виде функции есть возможность вызывать ее до объявления функции.
Задача №3: Неправильно, так как это функция вида "функциональное выражение" (function expression), а при этом виде функции ее вызов возможен только после самого функционального выражения.
Задача №4: при строгом режиме (use strict) и виде функции "объявление функции"(function declaration) функция не видна за пределами блока if, где и происходит вызов функции. Для решения проблемы необходимо использовать другой вид функции : "функциональное выражение" (function expression), с помощью которого изначально перед блоком if объявить внешнюю переменную, а в блоке if использовать функционально выражение.
'use strict'
let showMessage;
if (2 > 1) {
showMessage = function () {
console.log('Сообщение');
};
}
showMessage();
можно же сразу после функции вызвать. или это неправильно?
@Sneo тоже, локальная область видимости. Хотя технически ошибки нет)
чи знаєте скільки може бути аргументів у функції🤔
@@roman._t в бесконечном количестве
Было бы не плохо вначале каждого нового видео, 1-2 мин обзор прошлой домашки с объяснением :) а еще лучше отдельные видосы с домашкой после каждой темы ( обозначил условия, пару задач (2-3), и сразу объяснение их решения (главное чтобы задачи были из практики ).) Как обычно лайк, спасибо за труд.
дякую за знання та доступний спосіб викладання!!
Задача №1 - Коля, бо вказана затримка фукції
Задача №2 - так, фукцію можна визивать і до і після її об'явлення
Задача №3 - ні, бо визов функції повинен бути в кінці
Задача №4 - необхідно об'явити змінну, присвоїти змінній статус фнкції і потім визивати її
Thanks!
// №_1
Первым попадёт Коля, потому-что EventLoop закидывает setTimeOut в стек и без задержки выполняет остальной код;
// №_2
True - функция выполнена верно, так как она объявлена спомощью метода(Function Decloration);
// №_3
False - функция вызвана с помощью метода(Function Expression), и при её вызове перед объявлением - она будет не определена;
// №_4
Можно объявить переменную, и присвоить в блоке "if" ту функцию, котороя нам нужна. Она будет видна как внутри, так и снаружи:
'use strict'
let showMessage;
if(2 > 1){
showMessage = function(){
console.log('Message');
}
}
showMessage();
👍👍👍
в 4 задаче нужно добавить: return showMessage; где можно посмотреть ответы?
@@Olga_Matsybora делать return надо если мы собираемся возвращать какое то значение а в данном примере мы просто вызываем функцию и выводим в ней console.log('Message');
@@user-se2wg4qt4k спасибо
Спасибо добрый человек за ответы по домашке!!!!
Здоровская подача. Жаль это не набирает миллионы лайков, также как и крутить жопой, того и смотри почаще бы были выпуски.
Не останавливайся, мы тебя любим и обожаем. :)
Спасибо!
не хватает практики :( Хотелось бы использовать на конкретных примерах полученные теоретические знания. Решить задачи. Так же выскажу своё мнение о необходимости записи алгоритмов выполнения задачи визуально (блоками и стрелками). Это лично мне, очень помогает сосредоточится на решаемой задаче.
Схожее мнение, хотелсь бы увидеть как все это работает в реальных задачах
@@nazarlevchuk7773 это база, на ней все строится. Далее ты будешь искать определенные элементы в ХТМЛ (теги, классы, айди) с помощью определенных команд в (в основном querySelector и querySelectorAll) и делать с ними тоже самое.
ухххх вот с этого видоса пошли темки которые тяжеловато даются! Спасибо сенсей) будем учиться и стараться)))
Работаю програмистом нужно изучить REACT, есть не мало пробелов в понимании JS.Cупер все понятно и професианально.Thanks a lot.
В изучении JS-а не хватает реального понимания где эти все абстрактные вещи применяются. В CSS или HTML написал и сразу виден результат. А тут учишь-учишь, но «дополнительного энтузиазма от того что видишь реальный результат учёбы», разве что умеешь задачки решать…
Хотя я это не к тому что не стоит учить JS ( >D), а скорее к тому что скучаю по «выучил - применил» который был при изучении HTML и CSS.
Оно то правильно и я за тоже самое, но не понимаю где такое пригождается. Женя хоть бы на примере показывал, было бы хорошо.
А какой здесь можно практический пример? Это все основа языка, где еще можно копать глубже (в функциях, объектах....) Что то применить на практике думаю будет правильно когда начнем работать с DOM
все станет предельно понятно ,когда начнёте изучать DOM JS
это основы, на этом уровне он ничего съестного не покажет
Очень нравится курс! Смотрю я его со своим внутренним setTimeout. При появлении экрана с новым кодом, ставлю на паузу, разбираю как могу, потом включаю объяснения. Задача 1 из домашки поразила. Я думала, что при задержке в 0 миллисекунд увижу сначала Васю.
Рад что полезно!
Спасибо за то, что без воды. Воду можно и так найти, а у тебя чётенько. Хотелось бы увидеть решение задач разной сложности с твоими пояснениями.
На время остановила обучение, через 4 месяца продолжила, еще раз пересмотрела ролик, спасибо Вам автор. Ваше каждое слово ценное для меня!
Пожалуйста!
Дякую за Вашу якісно зроблену роботу👍🏼😊
Стараюсь как-нибудь отвлечься ненадолго от происходящего у себя на родине, и твои уроки лишь одно из малочисленных что мне помогает. Женя, спасибо тебе
Насчёт домашки
В задаче #1 первым в консоль попадёт Коля, полного обьяснения не приложу, но методом проб и втыка смею заявить, что причина тому setTimeout.
В задаче #2 функция вызвана правильно, ибо не имеет значения где вписывать showMessage(), перед обьявлением функции либо после.
#3 Функция неверно вызвана. Потому что функция - не переменная, как в данном примере. Ключевое слово "let" значит обьявление переменной.
red: был невнимателен, это функциональное выражение и по синтаксису оно верно, а ошибка состоит в отсутствии точки с запятой после закривающей скобки "}". Также вызов showMessage(); нужно переместить в конец кода за пределы создания функции.
Задача 4 решается путём вписания showMessage() в поле действия if'a, то-есть перед последней скобкой.
Надеюсь мои андер-джуниоровские обьяснения кому-то помогли разобратся, ибо сам потратил немало времени чтобы понять)
ну а я параметры ввёл)))
function showMessage(num1, num2) {
num1 = 2; num2 = 1
if (2 > 1){
console.log('Сообщение!');
}
}
showMessage();
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!
Огромное спастбо автору за курс, с помощью него я наконец научился верстать первые сайты. Надеюсь автор не забросит курс и ролики будут выходить.
Это просто потрясающее изложение материала! Нет слов, для описания, наверное это мировой рекорд ,самое понятное изложение материала, самая высокая проба!
Спасибо!
В процессе этого видео написал конспект на 11 страниц))) записываю для себя обычно только то, что считаю важным и на что следует уделить внимание, ну и мелкая моторика позволяет усваивать материал в разы лучше. Женя, твои уроки - это Квинтэссенция материала - важное и необходимое, четко и лаконично - по-полочкам. Огромная и бесконечная тебе благодарность за твой труд, крепкого здоровья и вдохновения, и всех тебе благ - много, много Добра. Благодаря твоим урокам - я уверенно иду к своей цели
Я рад! Также не забывай что материалы урока можно скачать по ссылке в описании
как успехи
@@FreelancerLifeStyle Так, теж знайшов, дякуємо за роботу
Жек, очередная благодарность тебе. Пересматривать надо как минимум 2 раза, с паралельным выполнением команд, тогда становится всё на места. Давно я столько раз не вешала свой браузер, но уже научилась останавливать выполнение скрипта. Жду урока с практическим применением скриптов в верстке.
Жека, ты лучший ментор!!! Поддерживаю на Патреоне, что и всем слушателям рекомендую.
1. // Коля выведется первым, т.к. он за пределами тела функции
2. // функция объявлена верно
3. //объявление поставлено неверно, т.к. объявление должно быть после переменной
4. showMessage();// это объявление было указано за пределами условия if, а должно быть внутри
Жека, давай дальше. Очень хочется продолжения.
В 4 нужно объявить переменную!
В 4 задаче:
1) объявляем переменную showMessage за пределами функции
2) даем showMessage значение функции:
//let showMessage
If (2>1) {
LET SHOWMESSAGE = FUNCTION() {...
3) объявляем функцию внутри блока if
Евгений, спасибо большое за Ваши уроки) Вы очень лаконично и доходчиво объясняете) Надеюсь на все свои вопросы я найду ответы на Вашем канале)
Случайно нашел ролик. До этого пересмотрел много разных. Отличное объяснение, ничего лишнего, но в то же время отнюдь не поверхностно. Браво!
Спасибо автору!
Спасибо Жека!!! Ваше видео уроки очень полезные, который Вы затратили драгоценное время. Также я хочу сказать Вам что поддерживаю вас во всём! Желаю мира и спокойствия вашей стране и семье!!
Зашел на ютуб расслабиться. В рекомендациях попалось твое видео, думаю ну ладно только одним глазком посмотрю.... Третий час смотрю твой канал, пишу код))) Да как так то???
Я в своё время долго тупил с рекурсией.. забил на неё и начал изучать React, и тут увидел твоё видео и понял рекурсию за 30 сек, ты явно талант!
Бля, а я никак не могу понять
Класс!
За час с лишним многое вспомнила и много узнала нового!
Спасибо большое за качественный контент)
Спасибо вам огромное! Я так рада, что нашла ваш канал! Очень полезно!
Контент - огонь! Смотрю уроки и практикуюсь параллельно по 6 часов. Залипательно)
Благодарище за урок, я наконец нормально догнал функцию рекурсию на простом примере с таймаутом! Как всегда подача ТОП!!! 🙏
То ли я не успеваю усваивать информацию, потому что вечером смотрю твой выпустк, то ли просто очень быстро объясняешь, поставила скорость на 0,75 :D
Стараюсь что б было не скучно)
я могу 5 первых минут пересматривать полчаса. Очень много информации. Возвращаюсь и возвращаюсь, всматриваюсь и вслушиваюсь )
Как всегда отлично, за малое время успел самое важное охватить.
Хожу по просмотренным видео и проверяю где не поставил лайк) Спасибо за твои уроки, Жека! В знак благодарности стал твоим патроном) Ты реально классный и заражаешь желанием развиваться!
Настолько увлекаюсь уроками, что не на всех видео ставлю лайки или комменты. Вот настолько интересно! Приходится потом возвращаться и ставить лайки ))
Спасибо за доступные для уровня новичка задания в конце урока!
Спасибо Жека, ты преподаватель от Бога!!!!
Мне, как начинающему знакомство с JS, было очень познавательно и интересно, спасибо!
Пожалуйста!
Чудові уроки, на всі потрібні теми. добре зроблені, без води, дякую))
Очень доступно, спасибо. Понятно на 100% данный материал.
Спасибо за уроки! смотрю с удовольствие!!
Здравствуйте, Евгений. Спасибо вам за ваши видео с обучением. Благодаря им я смог попасть в число стажёров Back-end разработчиков одной из компаний. Регулярно просматриваю новые видеоролики)
Я рад!
СШЫТАК, так ведь JS это Frontend.
@@kirillperov3843 uje i back
Привет из Белгорода и спасибо, ты делаешь меня лучше. А деградировать я и сам смогу :-)
Пожалуйста!
Спасибо тебе, друже! Как всегда чётко по сути...
Как всегда огонь, спасибо за урок!)
Комментарий для продвижения канала, спасибо тебе!
Ооо как раз ждал видео по JavaScript,. Сейчас заценим)
Спасибо!
@@DoZoR999 лучше сначала разобраться с JS, потом в любом фреймворке будет легче разобраться!
Спасибо за понятное объяснение. Многое встало на свои места. Лайк, подписка)
Очень понятно объясняешь. Спасибо!
Супер, как всегда на высшем уровне!
Я рад!
Жека спасибо, как всегда на высоте!!! Четко и по полочкам)))
Спасибо!
Доступно и понятно! Спасибо
Классно, все в одном месте. Тяжело, конечно сразу усвоить, но есть кнопка пауза))))
Спасибо
Автор, спасибо огромное за Ваш труд! Очень полезно! Классные ролики!
Можете продолжать этот курс отлично👍
Нравится разбираться в коде и следить за ходом выполнения. А помогает мне в этом визуализатор
Отличные видео на одном дыхании смотрится, материал легко усваивается , очень надеюсь, что будет продолжение!
спасибо, будет!
Спасибо за твой труд!
Коротко и ясно. Хотелось что-то максимально доступное, чтоб освежить знания и начать практику, а потом уже детальнее углубиться в нюансы (перескакиваю с Java), а тут такие уроки на канале. Спасибо, Евгений!
Ггггм, поднатужился, ускоряю выход урока)
Ты лучший, постараюсь писать под всеми видео что смотрю, спасибо!
Благодаря первой задачке узнал что такое Event Loop))) спасибо за урок)
Спасибо за гайды, лайк поставил потом и сам ролик посмотрю.
Спасибо!
Дякую вам за величезний труд!
отличный контент! материала в одном видео столько, что приходится нажимать на паузу и просматривать внимательно код.
Спасибо!
ЫрЫгинальная подача уроков). Спасибо Евгений!!!
Пожалуйста!
Ну это просто праздник какой-то!
Я рад!
Очень важная тема. Евгений красатуля.
Идеальный объем js для верстальщика. Спасибо)))
Пожалуйста!
Спасибо огромное за интересейший урок!Хотелось бы видеть ответы на домашку ,например, в отдельном файле под видео,чтобы точно можно было себя проверить,а не через комментарии,где может быть ошибка.Нужно больше видео про js для новичков!!!!!!!!!👍👍
Дуже дякую за чудовий контент 👍
Будь ласка
Учусь в Geekbrains и учим сейчас JavaScript. И для полного разбора смотрю ваши уроки и они очень выручают больше спасибо. Все очень понятно и интересно.
Пожалуйста!
братанчик в инете уже давным давно слили все курсы geekbrains
@@deverling5996
краденые курсы не работают
ты их накачаеш и не будеш заниматься
проверил на своей шкуре
@@kalobyte Ну это зависит от тараканов в конкретной голове 😀
@@empatij1730
тараканы в голове - это думать, что краденое принесет пользу
Классная подача обучение вообще огонь все понятно!!!
Я рад!
Поддерживаю канал! Супер контент! Спасибо большое! Очень ценно
Super! It's easier to learn JS with you!!! Thank you very much... Looking forward to the next lesson...
Tnx)
Wow, do you know russian?
@@semik8412 yes I do, but I can’t write grammatically right
@@shaigshaggy1541 cool, in my life you are second who know russian
@@semik8412 thanks ☺️
Класс)) спасибо вам большое за понятный и интересный урок)
Отличный урок!!! Коммент в поддержку канала!
спасибо жека, я не ошибся в том что подписался на тебя, с тобой легко
учиться не только по вёрстке, но и по javaScript
Не думав , що JS буде таким складним, але з твоїми уроками починаю розуміти)))
1. Первым будет Вася, так как задержка в 0 секунд у параметра setTimeout.
2. Верно.
3. Неверно, ибо вызов функции происходит до объявления переменной, в которой она находится.
4. Присвоить функцию showMessage переменной. Объявить переменную до условия if и далее можно уже вызывать саму эту переменную и вуаля! Будет некий результат)
интересные задачки, побольше их :)
Спасибо! Вспомнил песню Макаревича, слушая материал о параметрах по умолчанию "мне 300 лет, я выполз из тьмы":) Наконец-то не нужно использовать || ! Маленькое дополнение для аудитории: setInterval может вести себя по-разному в зависимости и от активной/не активной вкладки браузера, в зависимости от устройства и самого браузера. И, начинающие программисты, не ставьте очень маленькое значение для setInterval. Не убивайте слабые компьютеры:) и телефоны. Плюс желательно ВСЕГДА предусматривать выход из setInterval (всегда может что-то пойти не так, и интервальное событие становится бесконечным). Всем добра.
Жека, спасибо за твои видео! А насчет заданий будет так:
В задаче 1 первым выведется Коля, как я понимаю это именно из-за setTimeout.
В задаче 2 все верно.
В задаче 3 не верно, потому что там function expression, тут тогда вызвать функцию надо после.
В задаче 4 нужно использовать правильно function expression чтобы все заработало
let showMessage = function () {
console.log('Сообщение');
};
if (2 > 1) {
showMessage();
}
например так
Сложно было понять пример с рекурсией, чтобы его понять нужно на бумаге расписать что возращает программа в каждый раз(=> этот знак обозначает что происходит):
// 1) return 2 * calcSumm(2, 3) => 2 * результат второго выражения, итого: 2 * (2 * (2 * 1))
// 2) return 2 * calcSumm(2, 2) => 2 * результат третьего выражения, итого: 2 * (2 * 1)
// 3) return 2 * calcSumm(2, 1) => 2 * 1, так как b === 1
Получается функция вызывает сама себя пока не вернет число и потом в обратном порядке вычисляет всё и возвращает результат.
рекурсию объясняют ещё с помощью фракталов. Все же видели эти видосики с узором из таких же узоров ... вот если задача подобного типа, юзай рекурсию. Но тут опытные бэкендеры (около 6 лет стажа) подсказывают, что рекурсия применяется довольно редко, есть более простые и понятные для поддержки кода решения. Так что не паникуем и идём дальше =)
Как всегда супер! Пока все просматриваю...Немного укреплюсь в html, css и ринусь с головой в изучение :) Спасибо!
Пожалуйста!
После html и css, js адом окажется)
спасибо! надо возвращать к Вашим видео, конечно, только сейчас поняла некоторые вещи, которые казались непонятными, но все время приходит время и проблема только нарастает, как снежный ком. Спасибо большое Вам!!!!
Лайк! Лайк! Лайк! Спасибо. Стану программистом-обязательно отплачу
Спасибо за видео! 3 раза посмотрела!
Пожалуйста!
супер контент, чекаємо продовження :)
То чувство, когда мелодию в конце видео сам напевать уже начинаю:DDD Спасибо
Очень круто, спасибо!
Жека, спасибо за уроки!
Дякую за гарний урок!!!
спасибо за урок) все очень наглядно. Надеюсь в последующем будут примеры применения на реальных задачах)
в 1 задании вызовется первым Коля и после него будет Вася, т.к. это setTimeout.
2 все написано верно, в обычной функции вызвать можно до и после самой функции
3. здесь пример function expression, в ней нельзя вызвать функцию до написания тела кода самой функции.
4. можно перенести вызов функции в строку после первой закрывающей фигурной скобки, либо записать код с помощью function expression с объявлением переменной до функции и обращением к функции вне ее тела.
4. Если сделать так то можно вызывать если условие не выполнено из любого места кода (если я правильно понял)
'use strict'
if (2 > 11) {
showMessage();
}
function showMessage() {
console.log('Сообщение');
}
showMessage(); // Error (showMessage is not defined)
Спасибо за *_полезные_* знания
Пожалуйста!
Супер доступно та зрозуміло, дякую за твою працю, бажаю розвитку))
Подписался на вас. Очень четко объясняете и интересно.💪💪💪💪💪💪💪💪💪💪💪💪💪
Конструктивно, по суті - ДЯКУЮ!
Первым Коля выведется - это уже Асинхронные темки) Во втором варианте да, верно вызвана, т.к. декларативная функция. В 3 неверно, надо после объявления переменной вызывать. В 4 нужно до условия объявить переменную, в условии присвоить функцию к переменной . И уже после блока с условием вызывать не функцию, а переменную. Женя огромная благодарочка тебе)Было бы можно, поставил бы 1000000 лайков. Ютуберы сделайте для Жени эту кнопку :D