0:00 Платформа node.js 0:52 01 - Условный (тернарный) оператор x ? y : z 2:54 02 - Проверка переменной на undefined, null и пустую строку 5:50 03 - Объявление переменных 6:25 04 - Проверка на true и false 7:25 05 - Циклы for of и for in, метод forEach 11:18 06 - Значение переменной по условию 12:24 07 - Экспоненциальная запись числа 10e6 13:37 08 - Короткие свойства объектов {a,b} 14:23 09 - Стрелочные функции ()=>{} 16:10 10 - Параметры функции по умолчанию 17:50 11 - Шаблонные литералы `${}` 19:30 12 - Деструктуризация объекта 20:45 13 - Оператор «spread» ... 24:05 14 - Двойная тильда (двойное побитовое НЕ) ~~ 25:05 15 - Возведение в степень ** 26:15 16 - Альтернатива для ParseInt 27:44 17 - Побитовое НЕ ~ и includes 29:14 18 - Object.entries, Object.values и Object.keys
В 4 пункте не соглашусь, if (isSame === true) не то же самое, что и if (isSame). В первом случае true будет, если isSame типа boolean и его значение равно true. Во втором случае тип не проверяется, и true будет даже, если isSame будет, например число 5 или строка 'dd22'. Да, понятно, тот кто в теме - он понимает это все, но кто только начинает учить - может не правильно усвоить.
Пример 10: Параметры по умолчанию лучше ставить начиная с последнего. Данный код хоть и будет работать, но непривычно, параметр b при отсутствии третьего аргумента при вызове всегда будет underfind
Пожалуйста, не делайте как в 14 примере с Math.floor -> ~~ Если в остальных примерах, по большей части, сокращения оправданы и очевидны, то в данном случае, вы просто перекладываете сэкономленное на паре символов время на другого разработчика, которому придется это гуглить... Лучше оставить такие трюки минификаторам, хотя и полезно знать, на случай если кому то до вас все таки захочется извратиться)) Для преобразования типов в строки, числа и булевы значения, как по мне, тоже лучше использовать явные конструкции вроде Number('1') вместо +'1', String(2) вместо ''+2, Boolean(3) вместо !!3. Вы скажете, не для того js с динамической типизацией, чтоб я тут в конструкторы вот эти все оборачивал, но поверьте коллега который будет после вас код читать, попомнит вас добрым словом)
чушь может по 1 еще может быть да и то вряд ли, но +variable и !!variable пишут все, и в заместо 3 +"" что бы перевести в строку можно записать variable.toString()
Ребята даже не буду спорить)), это всего лишь мое субъективное мнение, понятно что это вкусовщина, и такие кейсы решаются на уровне линтера. Кстати у eslint'a есть соответствующее правило с названием - 'no-implicit-coercion', как бы намекая что преобразование не явное) eslint.org/docs/2.0.0/rules/no-implicit-coercion Но в целом согласен - в этом нет никакой проблемы и многие используют такой способ преобразования типов, главное чтобы вас и вашу команду это устраивало)
Согласен с вами, один из постулатов любого языка - явное лучше чем не явное. На аутсорсе тимлид с говном бы вас смешал, Владилен, думаю, понятно почему.
Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев - bit.ly/3OrdmlZ Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3nlsuFo
Очень круто спасибо Владилен . Все видео на высшем уровне Можно видео про оптимизаций Angular, подробнее об сервисах , и obseravle , я уже завершил курс в Udemy
правильнее назвать это видео tips and tricks; скажем честно, познавательно было бы посмотреть какое-то практическое применение (использование Parcel , самописная корзина для добавления товаров, ) .
Владилен, создай пожалуйста плейлист "nuxt.js" , а именно подробно о поле script, и использование библиотеки Gsap + nuxt.js. Буду всячески распространять этот плейлист, среди знакомых и друзей. Если есть надежда на создания этого плейлиста, то ответь на мой комментарий или просто поставь лайк:)
Артем, делать я такое не буду, так как у меня есть целый курс по Nuxt где про все рассказывал Тема довольно узконаправленная, у меня другой план webformyself.com/nuxt/
На строках 33, 34, 35. я с вами не соглашусь что проверка на true в 34 и 35 строке одинаковая. в 34 строке строгое сравнение на конкретно boolean, и конкретно true. а условие на 35й строке выполниться во всех случаях если isSame не null, undefined, false. т.е когда isSame = new Boolean(false) или пустой объект, любая строка, число и тд...
Автор спасибо за ролик! Пример 1 Можно ещё красивее сложить const num = 42; const result = `${num > 20 ? 'More' : 'Less'} than 20`; Пример 5 Можно ещё красивее сложить const names = ['Igor', 'Elena', 'Olga']; names.map((name, index) => console.log(`names[${index}] = ${name}`)); Или инлайном ['Igor', 'Elena', 'Olga'].map((name, index) => console.log(`names[${index}] = ${name}`));
Второй пример (variable !== null && variable !== undefined && variable !== '') и (variable) не одно и тоже при значении variable = 0 в консоли будут выводиться разные значения!
еще есть прикольная запись типа const foo =(arg)=> arg["car"] || console.log(arg); думаю понятно что она делает, что бы не отворачивать и не писать return в => и вывести console
Еще мне нравится вариант замены if(true) {console.log(1)} else {console.log(2)} на true && console.log(1) || console.log(2) ну если не надо писать конструкции на несколько строчек, очень упрощает код не правда?, можешь добавить в видосик )
Тильда-оператор разве что не знаком был, а так все известно. Стоило бы упомянуть optional chaining оператор. он, конечно, еще не включен в стандарт, насколько помню 3 lvl, но с бабелем вполне можно использовать.
вообще спред/рест/деструктуризация - самые приятные фичи. + спред операторы с объектами можно было бы еще привести пример, не для всех может очевидно (когда нужно подмешать св-ва одного объекта в другой). так же есть много интересных кейсов спред/рест в использовании с аргументами функций.
выскажусь в пользу Владилена: на вкус и цввет все фломастеры разные. Стоит ставить ; там где это позволит БОЛЕЕ ЯВНО определить конец команды. Иначе - нафиг оно надо. Код без ; реально чище.
У меня к тебе один вопрос, почему ты не заканчиваешь statements точкой с запятой, это даже упоминают в стайлгайдах, как по мне так это тоже самое что если бы не поставил точку в русском предложении.
@@VladilenMinin а babel не всегда прокатет, потому что бекенд еще будет работать в js коде. и чаще всего это так, к сожелению конечно. Но тебе Большое спасибо за видео
По мне 17 пример замыливает логику, а выигрышь микроскопичен. А если вы пишете на нескольких языках то лучше придерживаться правил максимальной очевидности кода поскольку в других языках эти закорючки могут иметь побочные эффекты или вообше иной смысл....
Никогда не делайте как в 7 примере лучше объявите `const million= 1e6`(или `kk`) и сравнивайте x > 10*milion. Как автор показал короче будет, но также не читабельно.
Исходники тут: t.me/js_by_vladilen/37
Получить профессию Frontend разработчика -
bit.ly/3bz5oZf
0:00 Платформа node.js
0:52 01 - Условный (тернарный) оператор x ? y : z
2:54 02 - Проверка переменной на undefined, null и пустую строку
5:50 03 - Объявление переменных
6:25 04 - Проверка на true и false
7:25 05 - Циклы for of и for in, метод forEach
11:18 06 - Значение переменной по условию
12:24 07 - Экспоненциальная запись числа 10e6
13:37 08 - Короткие свойства объектов {a,b}
14:23 09 - Стрелочные функции ()=>{}
16:10 10 - Параметры функции по умолчанию
17:50 11 - Шаблонные литералы `${}`
19:30 12 - Деструктуризация объекта
20:45 13 - Оператор «spread» ...
24:05 14 - Двойная тильда (двойное побитовое НЕ) ~~
25:05 15 - Возведение в степень **
26:15 16 - Альтернатива для ParseInt
27:44 17 - Побитовое НЕ ~ и includes
29:14 18 - Object.entries, Object.values и Object.keys
Красава!
спред это не оператор
24:12 14 пример Math.floor округляет в меньшую сторону, тогда как ~~ отбрасывает дробную часть. Math.floor(-9.6) !== ~~(-9.6)
Результат один и тот жн
@@MsAkellla нет, false выдаёт
Даже больше. побитовый двойной НЕ(~~) ещё и быстрее чем флур
18 способов сократить JS код = пишите в ES6 =)
😂
маркетинг
Хотел бы еще добавить:
1. !!var - Double Bang
2. ?? - Null Coalesce
3. ?. - Optional Chaining (имба)
4. |> - Pipeline
5. var && 'text'
4 пайплайн это ты сам придумал ?
В 4 пункте не соглашусь, if (isSame === true) не то же самое, что и if (isSame). В первом случае true будет, если isSame типа boolean и его значение равно true. Во втором случае тип не проверяется, и true будет даже, если isSame будет, например число 5 или строка 'dd22'.
Да, понятно, тот кто в теме - он понимает это все, но кто только начинает учить - может не правильно усвоить.
Пример 10:
Параметры по умолчанию лучше ставить начиная с последнего. Данный код хоть и будет работать, но непривычно, параметр b при отсутствии третьего аргумента при вызове всегда будет underfind
Пожалуйста, не делайте как в 14 примере с Math.floor -> ~~
Если в остальных примерах, по большей части, сокращения оправданы и очевидны, то в данном случае, вы просто перекладываете сэкономленное на паре символов время на другого разработчика, которому придется это гуглить... Лучше оставить такие трюки минификаторам, хотя и полезно знать, на случай если кому то до вас все таки захочется извратиться))
Для преобразования типов в строки, числа и булевы значения, как по мне, тоже лучше использовать явные конструкции вроде Number('1') вместо +'1', String(2) вместо ''+2, Boolean(3) вместо !!3. Вы скажете, не для того js с динамической типизацией, чтоб я тут в конструкторы вот эти все оборачивал, но поверьте коллега который будет после вас код читать, попомнит вас добрым словом)
чушь может по 1 еще может быть да и то вряд ли, но +variable и !!variable пишут все, и в заместо 3 +"" что бы перевести в строку можно записать variable.toString()
Если с ~~ еще можно согласиться, то с + точно нет
Это общеизвестный способ и его можно смело использовать
Ребята даже не буду спорить)), это всего лишь мое субъективное мнение, понятно что это вкусовщина, и такие кейсы решаются на уровне линтера. Кстати у eslint'a есть соответствующее правило с названием - 'no-implicit-coercion', как бы намекая что преобразование не явное) eslint.org/docs/2.0.0/rules/no-implicit-coercion
Но в целом согласен - в этом нет никакой проблемы и многие используют такой способ преобразования типов, главное чтобы вас и вашу команду это устраивало)
Некорректно было предлагать + в качестве замены parseInt. Это такой же скользкий момент, как и с ~~.
Согласен с вами, один из постулатов любого языка - явное лучше чем не явное. На аутсорсе тимлид с говном бы вас смешал, Владилен, думаю, понятно почему.
Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев -
bit.ly/3OrdmlZ
Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3nlsuFo
Это потрясающе! Спасибо от души
В примере 9 triple не эквивалентны, первый это declaration, второй - expression.
#10 аргументы с параметрами по умолчанию должны быть в конце
Очень круто спасибо Владилен .
Все видео на высшем уровне
Можно видео про оптимизаций Angular, подробнее об сервисах , и obseravle , я уже завершил курс в Udemy
Да, про сервисы и стримы хочется подробней, чтобы лучше разобраться.
Про Observable целый плейлист на канале
15 - Питонисты поймут сразу)))
чем второй пример отличается от шестого?
Закрепил знания)) Спасибо)
Спасибо за видео :) познавательно, видео смотрятся легко а главное всё понятно
Ну, если уж setTimeout сокращать, то:
setTimeout(console.log, 2000, 'After 2 seconds')
17й способ огонь! Не знал про него! Спасибо!
+
правильнее назвать это видео tips and tricks;
скажем честно, познавательно было бы посмотреть какое-то практическое применение (использование Parcel , самописная корзина для добавления товаров, ) .
Владилен, создай пожалуйста плейлист "nuxt.js" , а именно подробно о поле script, и использование библиотеки Gsap + nuxt.js. Буду всячески распространять этот плейлист, среди знакомых и друзей. Если есть надежда на создания этого плейлиста, то ответь на мой комментарий или просто поставь лайк:)
Артем, делать я такое не буду, так как у меня есть целый курс по Nuxt где про все рассказывал
Тема довольно узконаправленная, у меня другой план
webformyself.com/nuxt/
твою работу за тебя не сделать?
Классный урок! Спасибо вам! 👍😊😊
На строках 33, 34, 35. я с вами не соглашусь что проверка на true в 34 и 35 строке одинаковая. в 34 строке строгое сравнение на конкретно boolean, и конкретно true. а условие на 35й строке выполниться во всех случаях если isSame не null, undefined, false. т.е когда isSame = new Boolean(false) или пустой объект, любая строка, число и тд...
Спасибо за уроки. По Next js, ssr для react - курс не планируется?
В планах есть, но когда - не знаю
@@VladilenMinin Спасибо за ответ! Очень хорошие уроки у тебя. Лучшее что нашел на ютуб по js и react.
Автор спасибо за ролик!
Пример 1
Можно ещё красивее сложить
const num = 42;
const result = `${num > 20 ? 'More' : 'Less'} than 20`;
Пример 5
Можно ещё красивее сложить
const names = ['Igor', 'Elena', 'Olga'];
names.map((name, index) => console.log(`names[${index}] = ${name}`));
Или инлайном
['Igor', 'Elena', 'Olga'].map((name, index) => console.log(`names[${index}] = ${name}`));
Ну Владилен, ну малорик)) Владилен, очень хотелось бы видео-урок chrome debag ninja, какие-нибудь козырные приёмы отладки в браузере и в NodeJS.
Есть такое видео на канале
Обалденно, спасибо!!
Очень круто спасибо Владилен
Отличное видео, спасибо
10e6 - равнозначно 10**6?
Спасибо! Отличное видео!
16 из 18 способов знал :-) узнал новое, спс
Круто! Спасибо 🍀
Почему не работает код true $$ value = 2?
Отличное видео! Будет ли выпуск на тему ssr?
Есть целый курс по Nuxt
А точка с запятой не нужна в конце строк? Анахронизм?
в ES6+ не нужна
@@grantorino3465 ну интерпретатор-то и в es2005 без неё ест.
@@svcomplex1 сейчас при использовании ес6 вроде это считается антипаттерном. Во всяком случае дефолтный линтер во Vue ругается на нее
кто знает что за плагин или что там помагает показывать все эти подскази? например - callbackfn: function(){}
это не плагин, а включенная спец опция в шторме
Второй пример
(variable !== null && variable !== undefined && variable !== '') и (variable) не одно и тоже при значении variable = 0 в консоли будут выводиться разные значения!
Привет, Владилен!. Было бы замечательно записать урок по архитектуре (pure js)
Будет
@@VladilenMinin Круто! Спасибо
еще есть прикольная запись типа const foo =(arg)=> arg["car"] || console.log(arg); думаю понятно что она делает, что бы не отворачивать и не писать return в => и вывести console
#10 какой смысл ставить параметры по умолчанию с лево на право? Логичнее начинать с последнегою
Сколько из них вы знали?)
Еще мне нравится вариант замены
if(true) {console.log(1)} else {console.log(2)}
на
true && console.log(1) || console.log(2)
ну если не надо писать конструкции на несколько строчек, очень упрощает код не правда?, можешь добавить в видосик )
Все знал. Кстати они не все полностью эквивалентны.
Тильда-оператор разве что не знаком был, а так все известно. Стоило бы упомянуть optional chaining оператор. он, конечно, еще не включен в стандарт, насколько помню 3 lvl, но с бабелем вполне можно использовать.
вообще спред/рест/деструктуризация - самые приятные фичи. + спред операторы с объектами можно было бы еще привести пример, не для всех может очевидно (когда нужно подмешать св-ва одного объекта в другой). так же есть много интересных кейсов спред/рест в использовании с аргументами функций.
Практически о всех знал, кроме ~~ и ~. Но видео отличное, его хорошо использовать в качестве заметки (напоминалки) -)
какое я замечательное видео нашел
Толково. Узнал новые вещи
Почему точки с запятыми не ставишь?
Код чище
выскажусь в пользу Владилена: на вкус и цввет все фломастеры разные. Стоит ставить ; там где это позволит БОЛЕЕ ЯВНО определить конец команды. Иначе - нафиг оно надо. Код без ; реально чище.
13:20 ошибся. Должно быть не 6, а 7.
Точнее должно быть 1e6
У меня к тебе один вопрос, почему ты не заканчиваешь statements точкой с запятой, это даже упоминают в стайлгайдах, как по мне так это тоже самое что если бы не поставил точку в русском предложении.
Это не имеет смысла в ноде. Точка с запятой нужна только в одном случае - перед iife
вы забываете что это примеры, на продакшене так не пишут
Код чище, в точке с запятой нет смысла
@@Александр-ш6о4к На продакшене так пишут. Зависит от выбранного стайлгайда
Точку с запятой уже давно не ставят. И Вам советую
Супер. 2 вещи новые увидел.
Еще из твоих роликов узнал, что void 0 === undefined. Но не думаю, что стоит так писать, об этом сокращении вебпак позаботится :)
Если где-то встретишь, что не будет сюрпризом)
Крут! спасибо
первый пример: а если равняется 20?)
13:20 1e6
Узнал кое что новое.)
Спасибо!
5:43 - удобно, аналог '??' из c#
Хорошее видео как и канал, но не путайте новичков, кл.слово const это не переменная, это константа
А потом тебе говорят: "Мы должны поддерживать Internet Explorer")
babel в помощь)
@@VladilenMinin а babel не всегда прокатет, потому что бекенд еще будет работать в js коде. и чаще всего это так, к сожелению конечно. Но тебе Большое спасибо за видео
@@vazgenaleksanyan2929 и каким боком js бек к интернет експлорер?
Вау. Так люблю короткую кодировку, что для меня длинный рабочий код стал априори - неверным. И всегда ищу способы сократить
почему STORM не ругается на отсутствие " ; "
Отключил проверку
2 и 6 одинаковые
IsSame =true
IsSame === true это равно if(isSame) как?
О чем вопрос?
10 млн, но очень полезно)
Лучший
Ты 6 способ продублировал)
#3 считается bad practice
Кем считается?
@@libertariancom конвенцией кода
#thumbup
Зачем вообще нужны циклы в 1 миллион? Сомнительная затея.
Не вижу приемов с замыканием, частичным применением и другой функциональной магией.
Эмулировать асинхронность
Благодарю хороший урок. Только про ~~ не совсем точно. Для отрицательных чисел он будет работать как Math.ceil
Не 10е6 а 1е6
не знал 2 пункта
По мне 17 пример замыливает логику, а выигрышь микроскопичен. А если вы пишете на нескольких языках то лучше придерживаться правил максимальной очевидности кода поскольку в других языках эти закорючки могут иметь побочные эффекты или вообше иной смысл....
Вот в таком примере не прокатит
console.log(parseFloat("12px"))
console.log(+('12px'))
Найс
Рекурсию бы вместо while
42.
Никогда не делайте как в 7 примере лучше объявите `const million= 1e6`(или `kk`) и сравнивайте x > 10*milion. Как автор показал короче будет, но также не читабельно.
Почему точки с запятой не ставите? Это плохая практика
Спасибо!