💻 Функции, стрелочные функции, контексты, замыкания в JavaScript

[@anatolykobzisty9827]

00:00:00 Введение ----------------------------------------------- Способы определения функций --------------------------------------------------- 00:11:22 Функция объявление (Declaration) 00:12:46 Функция выражение (Expression) 00:16:07 Лямбда-выражение (Lambda expression) или функция-стрелка (Arrow function) 00:16:43 Лямбда-функция (Lambda function) ------------------------------------------------------------------------------------------------------------------------------------------------------------ 00:18:45 Область видимости (Scope) 00:25:00 Функции, как абстракции 00:26:43 Методы функции (name, length, toString( ) ) 00:31:26 Значения по умолчанию у функции 00:36:46 Rest-оператор (...args) 00:41:49 Способ определения функции, через new Function 00:44:46 Функции внутри объекта 00:50:42 Обращение к полям объекта из привязанной функции, через this 00:55:24 История синтаксиса создания контекстов, через самовызывающиеся функции ( IIFE) 00:58:30 Методы функции, наследуемой от объекта (call, apply) 01:00:53 Комментирование функций 01:01:27 Задание декомпозиции функции 01:04:24 Замыкание: context 01:08:41 Замыкание: chainning 01:11:55 Замыкание: summator 01:14:16 Замыкание: recursion

[@nikitasobolev8288]

Давайте полайкаем этот коммент наверх!

[@cassinid8843]

Спасибо большое что сделали лекции доступными не только Вашим студентам. Для заочников, которые учатся сами, такая помощь неоценима. Теперь точно знаешь что и в каком порядке нужно учить, это не говоря о том, что вы очень вдохновляете работать много и усердно :)

[@mokkamokka4097]

Вы самый лучший!!!!!! Круче всех однозначно! Тем кто у вас учится повезло невероятно. Спасибо!

[@yamumuyolobro513]

Хотелось бы сказать спасибо за то, что вашими лекциями могут пользоваться любые студенты. Жаль, у нас в Вузе нет подобных преподавателей, хотелось бы им всем включить ваши лекции и обучаться вместе с вами. Привет вам из Иркутска!

[@TimurShemsedinov]

kzbin.info/www/bejne/hpuopoOfotWLnqM

[@yamumuyolobro513]

@@TimurShemsedinov Посмотрю позже, спасибо) Сейчас смотрю ваш материал по callback и наконец-то понимаю, что это такое)

[@Tormin_run]

Такому на курсах фронтенд не научат.Спасибо огромное)))

[@alym.aleksey]

не у впрек автору, но такому научат на любых курсах, это прям база, и тут нет глубины, просто стандартная поверхностная информация

[@antonparhom1251]

Удивительная вещь третий раз пересматриваю и по прежнему узнаю для себя новые вещи) Огромнейшее спасибо!

[@senriamiezaru5563]

Спасибо за плейлист! После поверхностного ознакомления с синтаксисом на курсах, искал что-то более глубокое, и нашел! Кроме углубленных определений, еще и показаны разные случаи, что помогает структурировать картину в голове. Спасибо!

[@takedaheroku]

Все четко по полочкам. Отличный материал. Спасибо автору.

[@Doox911]

Одна из лучших лекций про замыкание! Было бы чудесно, если бы ещё и тайм коды добавили. Так как смотреть это буду многократно, да и не только я! Супер!

[@Fodintsov]

Дык добавьте, когда в следующий раз будете смотреть. Поделитесь с автором и сделаете добро всем.

[@Das.Kleine.Krokodil]

@@Fodintsov сделайте вы

[@Fodintsov]

@@Das.Kleine.Krokodil Я Вам разрешаю.

[@Das.Kleine.Krokodil]

@@Fodintsov Только после вас. Будьте так любезны.

[@Fodintsov]

@@Das.Kleine.Krokodil Да точно нет. Мне и без таймкодов живется сладко. А вот тот, кто просит их, вполне в силах сделать их самостоятельно.

[@WebEnv]

это лучшее что я видел по нативному js

[@kirillpodolinniy309]

Тимур, благодарю Вас! Может просто пришло время, но я все таки понял замыкания, большое вам спасибо)

[@nikitakirilin9776]

1:17:00 набор чисел в примере конечно очень подозрительный...

[@frozenplay1417]

хахахахах

[@КотикПушок-д1щ]

Ноду кодить мы не бросим...

[@ЕвгенийМедведев-ц3х]

лучший, бро!) я давно такой контент искал!

[@TimaGixe]

Чудова лекція! Дякую вам за вашу працю! 🚀

[@КонстантинСуркин-ь9ч]

Спасибо! Очень толковые лекции, благодарю.

[@artem_travlo]

Отличный материал. Спасибо автору.

[@gagogoga794]

Отличный материал!👍🏻

[@ruslanglaznyov9117]

Можно пожалуйста ссылки на лекции Степанова? Спасибо за ваш труд!

[@TimurShemsedinov]

kzbin.info/aero/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh

[@АртёмПахомов-к9й]

Здравствуйте, на 41:10 функцию которую передается как аргумент называют лямбда выражение, хотя в начале говорилось что лямбда функция которая имеет блок операторов называется лямбда функция э, а если без ретурна то это лямбда выражение, скажите пожалуйста кто нибудь как все же правильно ее называть?

[@ВикторГорбачев-в4в]

Спасибо за уроки! Вопрос. 36:00 Вы говорите, что такой код до сих пор актуален, когда мы занимаемся кодом, связанным с предметной областью. Возможно ли там переписывание функции, с применением значений по умолчанию, по стандарту ES6, вида function fnHashNew({ a = [7, 25, 10], b = 'Hello', c = 100 } = {}) { console.dir({ a, b, c }); } или там, всё же правильнее использовать, код, который используется Вами в примерах, с использованием оператора ИЛИ (||)?

[@igorsavelev9013]

Вообще старый и новый способы объявления параметров по умолчанию не совсем одинаковы: мы можем передавать в качестве аргумента, к примеру, null и при старом способе у нас будет использоваться именном значение по умолчанию в качестве аргумента, а при новом - null

[@VadimShch]

Наверное писали уже... В последнем примере замыканий ошибка, точнее в том как Вы его прокомментировали. a1 в 15 строке замыкается на 5, а не на 10 и далее тоже самое.

[@АндрейКотомкин-о9ю]

На 54:10 Вы говорите, что f1, f2, f3 - это функции с побочными эффектами. Разве это так? Они не являются чистыми, не являются детерминированными, но побочных эффектов у них нет. Или я ошибаюсь? Файл: github.com/HowProgrammingWorks/Function/blob/master/JavaScript/9-this.js

[@alexeishilin]

я полагаю, что здесь "побочный эффект" употребляется как синоним нечистой функции. f1, f2, f3 зависят не только от своих аргументов, но и от внешнего состояния (this)

[@RisDeep]

@@alexeishilin неправильно значит употребляется

[@oldodyn]

Круто. Все понятно.

[@tech-with-nd]

Хотів би додати ремарку щодо 34-ої хвилини відео, де порівнюються дефолтні значення аргументів функції до оператора ||. Це є помилковим твердженням, адже дефолтні значення використаються лише в тому разі, коли аргумент буде undefined, інакше підміни не буде та значення може залишиться null. У випадку з || перехід на правий операнд відбудеться при будь якому false твердженню лівого операнда, включно з null.

[@zhelyakea]

Спасибо большое за лекции, очень доходчивое и подробное изложение материала! Хотел для себя уточнить по поводу термина "лямбда функция", у Вас он используется только применительно к стрелочным функциям, но вроде как лямбда функция подразумевает под собой объявление анонимной функции, а не именно стрелочной? Спасибо!

[@TimurShemsedinov]

Я употребляю это как синоним стрелок (или функций не имеющих своего this), хоть стрелки в js тоже могут быть не анонимными, например: const func = () => {}; и потом console.log(func.name); В свойство name записывается название первой переменной, в которую функцию присвоили при объявлении, а чтоб сделать действительно анонимную: const func = (() => () => {})(); теперь func.name пустой. В использовании const func = function () {}; теперь осталось мало смысла, т.к. это нужно менять на стрелку в подавляющем большинстве случаев.

[@zhelyakea]

@@TimurShemsedinov Спасибо большое за разъяснение!

[@ЕвгенийКраев-я2ж]

13:30 Тимур, где вы узнаете такие тонкие детали про разделении функций и тому подобное.

[@TimurShemsedinov]

Статьи и доклады авторов виртуальных машин и движков js

[@ЕвгенийКраев-я2ж]

@@TimurShemsedinov Не хочу вас "дергать", но можно пару статей

[@TimurShemsedinov]

mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html

[@TimurShemsedinov]

erdem.pl/2019/08/v-8-function-optimization

[@ЕвгенийКраев-я2ж]

@@TimurShemsedinov Ух ты спасибо

[@rinatvaliullov3247]

Скиньте те самые лекции Степанова, пожалуйста

[@TimurShemsedinov]

kzbin.info/aero/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh

[@evgenkaban6018]

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

[@TimurShemsedinov]

Тут ссылки на все репозитории с примерами кода - github.com/HowProgrammingWorks/Dictionary

[@TimurShemsedinov]

Примеры с функциями - github.com/HowProgrammingWorks/Function с замыканиями - github.com/HowProgrammingWorks/Closure

[@evgenkaban6018]

@@TimurShemsedinov спасибо за ответ, я, наверное неправильно выразился, в начале вы упоминаете лекции Степанова, в видео про Git обещаете конспект с основными командами, наверное их можно найти в Dictionary, но было бы удобно сразу в описании к видео, но это скорее пожелание

[@romanilienko2357]

Evgen Kaban у Тимура в плейлисте программингс есть.

[@TimurShemsedinov]

@@evgenkaban6018 kzbin.info/aero/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh

[@dmitrijponkin]

Спасибо!

[@igorscream]

48:30. Так разве [powName] - это не деструктуризация массива? Хотя, тогда по логике должно получиться название просто 'p' по первому элементу строки 'pow'

[@RK-gm4pd]

скорее computed property stackoverflow.com/questions/50376353/wy-we-need-to-put-e-target-name-in-square-brackets stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object?rq=1

[@antonparhom1251]

Здравствуйте Тимур Гафарович! Скажите почему при объявлении индетификаторов функций и массивов мы делаем через const ?

[@TimurShemsedinov]

Потому, что мы не собираемся их переприсваивать, ссылки не изменятся. А если бы нужно было менять, то let бы использовали, но этого лучше избегать.

[@antonparhom1251]

@@TimurShemsedinov Спасибо!

[@TheZloymedved]

Если намберы и булеаны хранятся напрямую в стеке вызовов, то вопрос по вот такому коду: ``` function f() { num = 1; fetch(...).then(() => console.log(num)); } f(); ``` Коллбек внутри then выполнится по завершении http-запроса, к тому времени call stack будет уже очищен, возможно даже несколько раз. Где же в это время хранится переменная num?

[@TimurShemsedinov]

В замыкании (closure)

[@TheZloymedved]

@@TimurShemsedinov Кажется, разобрался, прошу поправить, если я где-то ошибся: в замыкании хранятся ссылки на все внешние лексические окружения, даже когда из call stack их родительские execution contexts уже выброшены. При этом само замыкание хранится в куче до тех пор, пока на него есть ссылка (в моем примере ссылка изнутри промиса).

[@TimurShemsedinov]

@@TheZloymedved да, это может приводить к утечкам памяти, если не понимать, что держит замыкание, но вообще - очень удобно

[@michaileserkheev3826]

что за редактор используется 18:43

[@TimurShemsedinov]

mcedit, это часть файлового менеджера midnight commander

[@o_leh]

то что вы говорите об оптимизирующих компиляторах, это касается только ноды, или браузерного JS тоже?

[@TimurShemsedinov]

Хрома с V8 в первую очередь, но и другие движки оптимизируют похожим образом. Лучше всего ориентироваться не на конкретный движок, а на здравый смысл, теорию типов и оценку сложности алгоритмов, тогда есть вероятность, что разработчики виртуальных машин на это же ориентировались.

[@o_leh]

@@TimurShemsedinov спасибо

[@antonparhom1251]

Спасибо Тимур Гафарофич за интересную лекцию! Скажите в каких случаях нужно использовать лямбда функцию?

[@TimurShemsedinov]

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

[@voidshah]

Тимур, вы говорили в лекции за лекции Степанова. Можно ссылку?! И еще такой вопрос. Ваше отношение к TypeScript? Пишете на нем?!

[@TimurShemsedinov]

Я постоянне не пишу на тайпскрипте, но для некоторых лекций буду его использовать, например kzbin.info/www/bejne/qGe6Y61pebabpas

[@TimurShemsedinov]

Лекции Степанова в плейлисте у меня в канале kzbin.info/aero/PLHhi8ymDMrQb4sVDBsN5y14X4BoAUU6Sh

[@voidshah]

@@TimurShemsedinov Еще раз благодарю!

[@voidshah]

@@TimurShemsedinov как по мне TS перекрывает многие недостатки чистого JS, особенно это касается типизации и статического анализа кода, даже если не брать во внимание дженерики, декораторы и прочее

[@rtfmetal]

@@voidshah если бы динамическая типизация была бы недостатком, то JS бы сделали со статической типизацией =)

[@ondreeey3004]

42:40: "Ну, это практически eval. Это неприлично." eval - функция, чье имя нельзя произносить вслух😆

[@WMorgun]

а где док найти, о котором говорится в лекции?) Хочу получше узнать, что функция наследует еще

[@TimurShemsedinov]

Это? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

[@WMorgun]

@@TimurShemsedinov да! Благодарю!)

[@pudzia20100]

Вопрос: const sum = new Function('a, b', 'return a + b'); const sum1 = (a,b) => (a+b); console.dir({ name: sum.name, //name: 'anonymous, name1: sum1.name, //name: 'sum1' Почему тут выводит имя а а для sum нет? length: sum.length, toString: sum.toString(), });

[@eugenekarpenko9799]

Видео остановлено на примере 4. Разбор остальных примеров в видео не попал?

[@TimurShemsedinov]

Там уже идут функторы и чеининг, аналогичные примеры можно посмотреть в kzbin.info/www/bejne/hpfYdpl_nrGLaZY и kzbin.info/www/bejne/aYual2N9np2jrtk Возможно даже где-то эти разобраны.

[@eugenekarpenko9799]

​@@TimurShemsedinov Спасибо. В пределах данной лекции интересно было бы еще про функции шаблонизации рассказать

[@TimurShemsedinov]

@@eugenekarpenko9799 Шаблонизации строк f`...` ?

[@pavlezt]

В прикладі про default звучало що новомодні default і старі || одинакові. Але я думаю тут важливо було наголосити шо якшо в параметри передавати наприклад 0 то в стилі || значення замінить, а в default залишиться 0

[@TimurShemsedinov]

Да, это существенное замечание, спасибо

[@mirdizayna]

Дополню комментатора выше, для тех кто читает по диагонали: const a = (b = 'default') => { return b; // вернет дефолтное значение, только если в функцию не будет передан параметр или его значение будет undefined }; const c = (d) => { return (d || 'default'); // вернёт 'default' в случае, если логическое значение d приводится к false, а это любой из (false, 0, "", null ну и undefined) }; // пример: console.log(a(),a(undefined),a(null),a(0),a(false), a('')); console.log(c(),c(undefined),c(null),c(0),c(false), c(''));

[@bayalesko7956]

По комментариям видно что кроме меня некого не заинтересовало почему компьютер Тимура зарядилось всего на %1 за 2 часа 😅

[@TimurShemsedinov]

В старых версиях федоры не обновляется заряд на диапазоне 98-100%, уже давно поправлено

[@Karmazins]

Добрый день ! Проясните пожалуйста вопрос . Почему вы говорите , что функция принимает аргументы , если она принимает параметры ? Все параметры вы называете аргументами . Спасибо

[@TimurShemsedinov]

Синонимы

[@Karmazins]

@@TimurShemsedinov спасибо

[@oleglagoda3931]

@@Karmazins Параметры - это локальные переменные внутри функции, а аргументы это те значения которые мы передаем в функцию при ее вызове и тем самым инициализируем параметры.

[@anastasiagolunova]

Спасибо за лекцию! но возник вопрос: почему const a = Math.sin; - функция const a = 5; - coздание константы ?

[@СергейВареник-б1т]

Если я правильно понимаю, то это одна из идей функционального программирования. "Функции первого класса". Могут передоваться в аргументы, возвращаться другой функцией, присваиваться. Если вы не понимаете в чем отличие между function setFn() {} и var setFn = function () {}, посмотрите пожалуйста статьи на тему function expression vs function declaration

[@TimurShemsedinov]

const a = 5; лучше называть объявлением идентификатора (даже допустимо сказать - объявление переменной). Потому, что константы пишутся большими буквами const TIMEOUT = 5000;

[@getfunbyfifa2825]

где потренироваться?

[@TimurShemsedinov]

В некоторых лекциях я даю задания, но позже я что-то придумаю с практикой и опубликую

[@getfunbyfifa2825]

@@TimurShemsedinov не смог найти репозиторий с заданием декомпозиции

[@TimurShemsedinov]

@@getfunbyfifa2825 Декомпозиция по слоям - github.com/HowProgrammingWorks/AbstractionLayers/tree/master/JavaScript Декомпозиция функциональная - github.com/HowProgrammingWorks/Abstractions/tree/master/JavaScript

[@malkovan]

Это задание из темы Функции, лямбды, контексты, замыкания в JavaScript ссылка на GitHub: github.com/HowProgrammingWorks/Closure Первое задание: github.com/HowProgrammingWorks/Closure/blob/master/Exercises/1-seq.js Решение подразумевает, просто какую-то дикую вложенность! Это пример из правильного решения ( seq(c => a(b(c))) ) как вообще можно это прочитать? Второе задание. Я не нашёл ни одного примера на Гитхабе, где находится курс HPW, где бы Вы объясняли этот материал до этого задания (второго). Как в таком случае необходимо проходить обучение по Вашему курсу, если последовательное прохождение лекций и выполнение заданий подразумевает получение дополнительных знаний, которые Вы не освещаете? При этом позиционируете курс как начальный в программировании. В данном частном случае, укажите, пожалуйста, где в Вашем курсе находится материал освещающий возможность делать такие конструкции как в задании номер 2? Решение должно быть по типу ( const f = () => {}, f.push = a => {} ) для примера? На основании какаго материала из Вашего курса должно быть понимание как выполнить это задание?

[@jamjam3337]

👏👍

[@boycovclub]

Закинули бы вы этот курс в Udemy и денежку хорошую заработали вы, а также мы получили сертификаты, о то что прослушали ваш курс)

[@TimurShemsedinov]

Не очень интересно мне это. А сертификаты я сам выдаю, зачем мне удемия?

[@boycovclub]

@@TimurShemsedinov а на каком портале и где вы свои курсы преподаете?

[@TimurShemsedinov]

@@boycovclub У меня курсы открытые, вот они github.com/HowProgrammingWorks/Index

[@boycovclub]

@@TimurShemsedinov спасибо )

[@valovweb]

также в файле 5-default в последнем примере можно использовать деструктуризацию для задания параметров по умолчанию , например так: function fnHash({ a: a = [7, 25, 10], b: b = 'Hello', c: c = 100}) { const args = {a, b, c}; console.log(a); console.log(b); console.log(c); console.log(args); } const args = {a: 10, b: 20}; fnHash(args);

[@valovweb]

также этот способ позволит избежать мутации переданного объекта args.

[@dmitripolevoi4473]

У нео из матрицы такая же ide

[@aleksprimetv]

Работаю на фронте уже 1,5года и все равно узнаешь какие то интересные моменты, не смотря на то, что это основы)

[@dm.hol.3624]

Да я три года работаю во фронте, за первые две минуты понял, что в айти мне делать нечего - я ничего не знаю //_\\

[@centralcat3325]

@@dm.hol.3624 ты на том фронте который с автоматами что ли?

[@oleksandrlypko3117]

Буде круто, якщо викладете лекції у вигляді підкасту)

[@TimurShemsedinov]

Без видео не получится. Как код показать?

[@berberisbellis4085]

Подскаты обычно не такие информативные

[@pavlezt]

будеш в голові код писать і компілить?

[@MrR-k2v]

Если честно, то вообще не понял из этой леции что такое замыкание. medium.com/@sshambir/%D0%BE%D1%81%D0%B2%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B7%D0%B0%D0%BC%D1%8B%D0%BA%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B2-javascript-5b83267ef7d1 Вот хорошая статья, которая рассказывает откуда берется замыкание, почему переменные после работы функции все еще доступны и как оно работает

[@gazoo_the_great]

лекции читаются в стиле "ну, эт самое, как бы оно"

[@IHORhoncharenko]

Советовали Вас..отметил для себя что как специалист Вы очень сильный..но как преподаватель - нет. С областью видимости как то так все сумбурно объяснили..могли бы хотя бы продебажить скрипт что бы наглядно показать как построчно обрабатывается код и что откуда берется...либо как то иначе..Ваш вариант объяснений мне не зашел. Субъективное мнение.

[@demimurych1]

Не очень понятно как можно начать лекцию с упоминания о работе оптимизатора, коснуться проблем мономорфизма и полиморфизма , чтобы потом начисто забыть об этом и давать вредные советы про a = a || 'defaultValue' и иже с ним.

[@Mshdry]

Sorry, but Kyiv. Not Kiev.

[@TimurShemsedinov]

Kyiv is a translit, Kiev is an English word

[@Mshdry]

@@TimurShemsedinov I respect your opinion, but it's wrong. In June 2019, at the request of the United States Department of State, the Embassy of Ukraine to the United States, and Ukrainian organizations in America, the name Kyiv was officially adopted by the United States Board on Geographic Names as the only correct one, which resulted in the federal government of the United States using only the new name. The source is Foreign Names Committee (FNC) Documents geonames.nga.mil/gns/html/PDFDocs/BGNStatement_Kyiv.pdf

[@TimurShemsedinov]

@@Mshdry US Department of State isn't a right body to change rules of English language, and referring to authority isn't a right way to argue

[@schwarzbrecht7624]

​@@Mshdry Хаха, чет выпал с типа. Надо же умудриться зайти в руяз видео и затирать про корректность названий :)))

[@Antonio-fm1sq]

Спасибо!