Свідомий JavaScript 🇺🇦

@svidomyi_js


🔸Будуємо україномовне JS комʼюніті
🔸Цікаві мовні факти
🔸Перевір свої знання

Запросити друзів: https://t.me/+mB6Bi1YQ81YzY2Ni

Свідомий JavaScript 🇺🇦

15 Oct, 06:44


👨‍💻Ресурси для вивчення регулярок

Щоб вивчати та працювати з регулярками було трошки легшим заняттям, то пропоную до вашої уваги кілька вебсайтів:

🔸RegExr – це онлайн-інструмент для вивчення, створення та тестування регулярних виразів. Цей проєкт є опенсорсним, тож можете глянути їхній код на гітхабі

🔸Regulex – це онлайн-Інструмент візуалізації регулярок, який полегшує розуміння регулярних виразів

🔸Regexone – це такий собі
підручник з вивчення регулярок. Посилання веде одразу на туторіал

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

14 Oct, 13:58


👨‍💻 Регулярні вирази у JavaScript

Регулярні вирази – це як мультитул для роботи з текстом. Перевірка емейлу, знаходження хештегів в тексті, парсинг URL — усе це та ще багато іншого можна зробити за допомогою регулярок.

Регулярка — це просто шаблон, який ми створюємо, щоб знайти, замінити або видалити шматки тексту.

Створення регулярки:

const firstRegex = /hello/i;
// або через конструктор
const secondRegex = new RegExp('hello', 'i');

Флаги:

🔸g – Global. Знайде всі входження, а не тільки перше.
🔸i – Case-insensitive. Не враховує регістр.
🔸m – Multiline. Пошук в багаторядковому тексті.

Приклади:

/g:

const regexG = /a/g;
console.log("banana".match(regexG)); // ['a', 'a', 'a']

/i:

const regexI = /HELLO/i;
console.log(regexI.test("Hello")); // true

/m:

const regexM = /^a/m;
console.log(regexM.test("b\na\nc")); // true


Методи:

🔸.test() – повертає true, якщо шаблон знайдений в рядку, інакше false.
🔸.exec() – повертає масив з деталями знайденого збігу або null.
🔸.match() – знаходить всі збіги в рядку і повертає їх як масив.

Приклади:

.test():

const regexTest = /Java/i;
console.log(regexTest.test("JavaScript")); // true

.exec():

const regexExec = /Java/i;
console.log(regexExec.exec("JavaScript")); // ['Java', index: 0, input: 'JavaScript', groups: undefined]

.match()

const str = "JavaScript is great";
const regexMatch = /a/g;
console.log(str.match(regexMatch)); // ['a', 'a', 'a']

Де використовувати регулярки?

🔸Перевірка формату електронної пошти, телефонних номерів, поштових індексів і так далі.
🔸Пошук певних слів, фраз, символів у тексті та їх заміна або видалення.
🔸Виділення хештегів, посилань, користувачів у тексті (наприклад, в соціальних мережах)
🔸Розбір URL на компоненти (домен, шлях, параметри запиту)
🔸Витягування корисної інформації з HTML-сторінок
🔸Спліт рядків за певними роздільниками, які можуть бути доволі складними
🔸Читання і розбір рядкових даних з лог-файлів, конфігураційних файлів тощо

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

14 Oct, 13:58


Всіх вітаю! 👋

Вибачаюсь, був трошки завал, тому каналом не було часу займатись. Але наче зараз час зʼявляється, а це означає, що дописи знову будуть регулярними.

Дякую всім, хто залишається тут! 🙌

Нижче буде допис про регулярні вирази – це досить цікава тема та деяким людям вона спочатку здається зовсім незрозумілою, тому подумав, що буде непогано про неї написати

Бажаю всім гарної суботи та в цілому гарних вихідних 🙏

Свідомий JavaScript 🇺🇦

05 Oct, 18:18


👨‍💻 You Might Not Need*

Завжди, коли збираюсь встановити lodash, то думаю чи дійсно він мені потрібен?

Є класний вебсайт з прикладами, як виглядатимуть функції з lodash'у написані на чистому JavaScript. Посилання внизу, рекомендую.

Також, на цьому сайті є декілька розділів на тему "You might Not need":

🔸Власне You might not need Lodash
🔸You might not need JavaScript
🔸You don’t need Moment.js
🔸You may not need Axios
🔸You might not need jQuery
🔸You don’t need Bootstrap
🔸You might not need Redux
🔸You might not need a CSS framework

З приводу Moment.js вже було багато дискусій, але його все рівно продовжують юзати. Доречі класна альтернатива – це Day.js

💻 Посилання – https://youmightnotneed.com

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 12:59


Трошки про асинхронні функції у JavaScript

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 09:50


Є декілька нюансів по задачі, яку надавав вище. Справа в тому, що Node JS може поводитись по-різному в різних середовищах:

В браузері:

- В не суворому режимі, коли ви викликаєте функцію на глобальному рівні, this вказує на глобальний об'єкт (window).
- В режимі "use strict", `this` буде `undefined` для функцій, викликаних на глобальному рівні.

В середині модулів

- В середині модулів Node JS, контекст this для звичайних функцій (не стрілкових) на верхньому рівні є не глобальним об'єктом, а module.exports (що насправді є об'єктом, який ви експортуєте з модуля). Тому в модулі this буде undefined

У глобальному контексті REPL Node JS

- Знаходячись у глобальному контексті REPL this вказує на глобальний обʼєкт global. (this === global // true). Тому він не є undefined

Працюючи з джаваскрипт, ви навряд чи запускаєте код вашого проєкту в REPL, тому навряд чи опираєтесь на особливості його роботи, але все одно, відповідаючи на питання вище ви могли перевірити своє рішення запустивши код саме в REPL та отримати undefined.

Тому, якщо ви обрали варіант undefined посилаючись на REPL, то ваша відповідь також правильна 😊️️️️

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:19


🔍 Розʼяснення для тих, хто вирішив

Коли ми викликаємо getFirst як метод об'єкта obj, this в методі getFirst вказує на об'єкт obj:

obj.getFirst() // 1

Проте, коли ми робимо деструктуризацію, то ми фактично створюємо нову змінну getFirst, яка отримує посилання на функцію getFirst з об'єкта obj. Але ця нова змінна getFirst втрачає свій "зв'язок" з об'єктом obj.

В не суворому режимі, якщо функція викликається самостійно (не як метод об'єкта), this буде вказувати на глобальний об'єкт (у браузерах це window). Проте, в режимі "use strict", this не вказує на глобальний об'єкт у функціях, викликаних самостійно. Замість цього, його значення буде undefined. Таким чином, ви отримаєте помилку "Cannot read properties of undefined".

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:14


Що буде виведено після виклику функції?

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:14


Вітаю! Бажаю всім гарного понеділка та продуктивного тижня 🙏

Новий тиждень – нові задачі😊 Нижче задача від каналу:

Свідомий JavaScript 🇺🇦

29 Sep, 07:04


🔍 Розʼяснення для тих, хто вирішив

typeof null вертає "object". Ця поведінка тягнеться ще з моменту створення JavaScript (напевно тоді ще не знали, що мова може стати такоб популярною).

typeof Object.create(null) – створює новий об’єкт із зазначеним об’єктом-прототипом. У цьому випадку він створює об’єкт без прототипу (null). Коли ми отримаємо тип цього об’єкта, він правильно повертає «об’єкт», оскільки це насправді є об’єктом.

Тому "object" == "object" дасть в результаті true

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

28 Sep, 06:29


👨‍💻 Альтернативи console.log про які ви не знали

А може й знали, але не користувались 😊 Так от, console.log - не змінний помічник при дебаг процесах під час написання коду. Але мало хто знає, що обʼєкт console має декілька інших варіацій:

🔸console.warn() та console.error()

Ці два методи корисні, коли вам треба показати помилку або попередження в консолі. Думаю кожен з вас бачив результати виконання цих методів у консолі отримуючи вбудовані JavaScript помилки чи попередження від бібліотек, якими ви користуєтесь.

🔸Замір часу виконання коду – console.time()

Про це писав в іншому дописі, але повторюсь, що console.time() допоможе вам заміряти час виконання частини коду.

🔸Трасування — console.trace()

Метод, який записує у коноль трасування стеку з точки, де була викликана функція. Трасування включає в себе повний стек викликів, а також дані такі як ім'я файлу та номер рядка.

function trace(){
console.trace()
}
function randomFunction(){
trace();
}


🔸Групування console.group()

Дозволяє обʼєднати декілька консоль логів у групи. Якщо ви згрупуєте повідомлення консолі, ви зможете зробити вашу консоль легшою для читання.

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");

console.groupEnd()

🔸console.table()

Про цей метод теж був окремий пост. Підійде для більш детальної візуалізації, наприклад, обʼєктів.

const person = {
name: "Ivan",
age: 27,
};

console.table(person);

🔸Написання CSS в консолі

Це окремий вид цікавостей 😅 Виявляється в консолі можна писати CSS стилі:

console.log("%cCSS in console",
"color: red; background-color: lightblue; border: solid");

Такий метод більше підійде, якщо дуже хочеться здивувати себе та код-ревʼювера, але чому б ні.

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 14:47


🔍 Розʼяснення для тих, хто вирішив

При множенні спочатку Javascript намагається перетворити масив на рядок, потім рядок намагається перетворити на число, а потім виконує аріфметичну операцію. В даному випадку 2*3 = 6

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 14:08


🔍 Розʼяснення доступне по кліку на лампочку після обраного варіанту відповіді

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 06:43


Доречі, Лія колись, ще у 2019 році, була у Харкові на конференції Kharkiv CSS. Організатор цієї конференції, доречі мій хороший друг, дуже хотів щоб в неї вийшло приїхати в Україну. Так от вона приїхала, ще й на останніх строках вагітності та зробила досить цікаву доповідь. 😅

Ось посилання для тих, кому цікаво – https://www.youtube.com/watch?v=PNVygpWE4lI

Свідомий JavaScript 🇺🇦

27 Sep, 06:40


Нещодавно постив State of CSS за 2023 рік, а сьогодні прийшла розсилка про започаткування State of HTML. Знаю як всі скептично ставляться до верстки та тим більше до HTML, але, тим не менш, написання правильного та доступного HTML коду є не менш важливою задачею ніж зробити правильні реакт/ангулар/вью компоненти. Та й взагалі, сучасний JavaScript розробник повинен знати HTML + CSS на хоча б середньому рівні (в основному це стосується Front-End розробників).

Дизайнінгом опитування State of HTML займалась Лія Веру. Лія Веру – обраний член W3C Technical Architecture Group (TAG). TAG — це спеціальна робоча група W3C, яка гарантує, що всі нові веб-технології добре розроблені та узгоджені з рештою веб-платформи. А що таке W3C можна почитати тут.

Так от, якщо ви пишете HTML у себе на роботі, то прийміть участь у опитуванні та може дізнаєтесь щось нове для себе та потім імплементуєте це у себе на проекті

Посилання - https://survey.devographics.com/en-US/survey/state-of-html/2023

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

26 Sep, 14:17


🔍 Розʼяснення для тих, хто вирішив

У наведеному вище фрагменті коду обидва обʼєкта мають одне й те саме посилання, тому присвоєння властивості age змінить його в обидвох обʼєктах. Правильна відповідь: 30, 30

Свідомий JavaScript 🇺🇦