Все, що потрібно знати про NaN в JavaScript

Сьогодні поговоримо про таємничий NaN в JavaScript. Якщо ви коли-небудь працювали з числами в JS, ви напевно зіткнулися з ним. Не панікуйте, це не помилка, а спеціальна числова величина.

NaN (Not a Number) - це особливий значення, яке повертається, коли операція, що очікує отримати число як результат, не здатна це зробити. Наприклад, коли ми спробуємо поділити число на рядок:
console.log(42 / "fourty-two") // NaN

А як визначити, чи є наша змінна NaN?
JavaScript має для цього вбудовану функцію isNaN().
Проте, є одна особливість: ця функція спочатку намагається перетворити аргумент у число. Тож вона поверне true не тільки для NaN, а й для значень, які не можуть бути перетворені в число:
console.log(isNaN("forty-two")); // true
console.log(isNaN("42")) // false

Але не все так просто. Саме NaN є єдиним значенням в JavaScript, яке не є рівним самому собі. Це звучить дивно, але:
console.log(NaN === NaN) // false

Така особливість може привести до помилок при порівнянні. Тому, якщо ви хочете точно перевірити, чи є значення NaN, краще використовуйте функцію Number.isNaN(), вона не робить спроби конвертувати аргумент:
console.log(Number.isNaN(NaN)) // true
console.log(Number.isNaN("123")) // false

Отже, що ми маємо: NaN - це спеціальне значення в JavaScript, що вказує на неможливість виконання математичної операції.
Завжди використовуйте Number.isNaN() для точної перевірки на NaN.

Будьте уважні при роботі з числами в JS і завжди пам'ятайте про NaN, на відміну від інших мов JS не викличе помилку, а підсуне його коли не чекали :)

Сьогодні розберемося з об’єктом Number.

a: Об'єкт Number у JavaScript - це обгортка навколо примітивного числового значення. В прикладі ми створили новий екземпляр об'єкта Number з числом 42. Це буде об’єкт, не примітив, тому new Number(42) !== new Number(42)

b: Функція Number також може бути використана для перетворення рядків в числа. У прикладі рядок '42' перетворюється на числове значення 42. Оскільки тут без new, тому це примітив і Number('42') === Number('42')

c: Об'єкт Number має кілька вбудованих властивостей. Наприклад, в прикладі c Number.MAX_VALUE повертає максимальне допустиме числове значення в JavaScript. Аналогічно є Number.MIN_VALUE.

d: Number.isNaN() ми вже розбирали вчора, тут додав його для повноти картини.

e: Методи Number.parseInt() та Number.parseFloat() дозволяють конвертувати рядки в цілі та дійсні числа відповідно. Перший дозволяє ще передати систему числення як додатковий параметр.

f: Number.isFinite() перевіряє, чи є число скінченним. Це дуже корисно, коли ми хочемо впевнитися, що число не дорівнює Infinity, -Infinity чи NaN.

g: Number.isInteger() перевіряє, чи є значення цілим числом.

h: Number.isSafeInteger() перевіряє, чи є число безпечним цілим числом, тобто чи воно знаходиться в діапазоні, який можна точно представити в JavaScript. Вихід за ці межі призведе до помилок в обчисленні цілих чисел. Краще тоді використовуйте тип bigInt.

j: Так виглядає максимальне безпечне ціле число, аналогічно є мінімальне.

Нарешті опублікували новий стандарт ES2023🔥

Нового небагато, але є про що розказати.

a: Array find from last: Тут просто зручна дрібниція - нові методи для пошуку елементів з кінця масиву - findLast() та findLastIndex(). Вони виконують аналогічні завдання до find() та findIndex(), але в зворотному порядку.

b: Symbols як ключі WeakMap: Тепер тип Symbol можна використовувати символи як ключі WeakMap, дивно, що раніше такого не було, бо цей символ оригінально був створений в першу чергу для ключів.

c: Hashbang Grammar: Hashbang - це така юніксовська фіча, що дозволяє на початку файлу задати інтерпретатор для нього, тепер стандартно підтримується в JS, можна “нативно” запускати js-файли на юнікс-подібних ОС.

d: Change Array by Copy: Це самі важливі зміни, що вплинуть на написання коду. Тепер не треба окремо робити копію масиву, коли користуємося мутуючими методами, а масив міняти не хочемо - методи копію зроблять за нас. Отже, нові методи toReversed(), toSorted(), toSpliced() та with(), які повертають новий масив, змінюючи його без мутацій оригінального. Якщо з усіма іншими методами зрозуміло з назви, то до with() дам окреме пояснення - воно продукує новий масив, замінивши елемент з певним індексом на значення, що йде другом аргументом.

Цікаво, що ці фічі вже підтримуються всіма популярними браузерами (хіба по методах масивів FireFox відстає, але в найближчій версії все має бути ок).

Все що треба знати про BigInt

У JavaScript, Number представляє числа у 64-бітах з плаваючою комою, що означає, що вони мають обмеження у 2⁵³ - 1.

Але що робити, коли нам потрібно працювати з числами, які виходять за рамки цього діапазону? Тут на допомогу приходить тип BigInt.

BigInt – це вбудований об'єкт у JavaScript, який надає можливість представляти цілі числа будь-якої величини (обмеження лише у пам’яті чи конкретній реалізації JS)

Ви створюєте значення BigInt, додаючи n до кінця числового літерала або використовуючи функцію конструктора BigInt().

a: Обидва рядки коду вище створюють однакове значення BigInt.

b: BigInt підтримує арифметичні операції, однак не дозволяє міксувати з Number. Також не дозволяється використовувати методи Math.

c: Метод BigInt.asIntN() - це статичний метод, який приймає два аргументи: ширину бітів і значення BigInt. Цей метод повертає значення BigInt, яке представляє значення вхідного BigInt, обмежене до заданої ширини бітів з підтримкою знаку (signed integer). Відповідно, 127n поміщається у 8 біт, а 128n - вже ні.

На практиці не треба всі числа заміняти на BigInt, але в окремих випадках цей тип може дуже виручити. Наприклад, робити фінансові обчислення з великою точністю, робити значення з великою кількістю значущих цифр для криптографії чи іншого специфічного застосування - те що лікар прописав :)

Сьогодні поговоримо про Symbol - базовий тип в JS, що існує з 2015 року і не має ніякого відношення до рядків символів.

Symbol - це фактично унікальний ідентифікатор, що може бути ключем в об’єкті чи просто унікальною константою для певних задач.

a: Символи створюються без new і є унікальними. Навіть якщо ми створимо два символи з однаковим описом, вони все одно будуть вважатися унікальними та не дорівнювати один одному.

b: Символи можуть використовуватися як ключі об'єкта. Однак вони не враховуються у стандартному переліку ключів, доступ до них можна отримати напряму.

c: Symbol.for створює символ у глобальному реєстрі символів. Якщо символ з таким описом вже існує, Symbol.for повертає його, а не створює новий, таким чином можна дістати доступ до одного й того ж символа в різних частинах коду.

d: Symbol.keyFor повертає опис символу в глобальному реєстрі символів. Якщо символ не знаходиться в глобальному реєстрі, буде повернуто undefined.

JavaScript має кілька стандартних, вбудованих символів, які представляють собою загальноприйняті ідентифікатори для внутрішніх методів мови.

Symbol.iterator: використовується об'єктом для визначення його поведінки при ітерації, наприклад, в циклі for...of.

Symbol.asyncIterator: визначає поведінку асинхронного ітератора об'єкта.

Symbol.match, Symbol.replace, Symbol.search, Symbol.split: ці символи використовуються в рядкових методах, щоб визначити поведінку при збігу, заміні, пошуку або розділенні.

Symbol.species: використовується для створення похідного об'єкта.

Symbol.toPrimitive: використовується об'єктом для перетворення на примітивний тип.

Symbol.toStringTag: використовується в методі Object.prototype.toString для створення опису об'єкта.

Symbol.unscopables: властивості, які включені до списку unscopables, не включаються в контекст, коли використовується інструкція with.

Один раз на чотири місяці я проводжу джедайський курс JavaScript, де учасники формують найголовніше, що потрібно розробнику - навик написання коду. Найближча група буде 17-го липня, до кінця червня (тобто залишається лише 2 години) діє знижка на курс. З 1-го ціна суттуєво зростає. Оновлена версія курсу редакції 2023 року містить TypeScript, ну і звичайно всі фічі JS, які вийшли у новому стандарті позавчора :)
Сайт курсу тут: https://sj42.programmingmentor.com/

Сьогодні розберемо досить дивну на перший погляд поведінку JS у порівняння `null` та `undefined` з числами.

a: Тут насправді все просто, якщо розуміти, що null конвертується в число 0, відповідно можна запросто з числами порівнювати. Але пряме порівння з нулем виключення, воно повертає false, це треба запам’ятати.

b: Тут ще простіше: при спробі переведення undefined в число отримуємо NaN, який в усіх порівняннях повертає false.

c: Якщо порівнювати null та undefined між собою, то нестрога рівність поверне true, і це досить зручно, можна одним порівнянням val == null “спіймати” обидва ці значення. Строга рівність, звичайно, повертає false.

На практиці порівняння пустих значень null та undefined з числами краще взагалі не допускати, то й без запам’ятовування такої дивної поведінки можна обійтися 🙂

Досвідчені люди говорять, що якщо ти не мав проблем з датами, значить ти не працював з датами.

В JS стандартно входить об’єкт Date, що дозволяє з датами працювати. Виходить не завжди зручно та інтутивно, зате нативно.

a: new Date() використовується для створення нового об'єкта Date, який містить поточну дату і час.

b: currentDate.getDate() повертає день місяця від поточної дати. Значення від 1 до 31.

c: currentDate.getTime() повертає поточний час в мілісекундах від 1 січня 1970 року, так званої Unix епохи.

d: currentDate.getDay() повертає день тижня для поточної дати. Зверніть увагу значення від 0 (неділя) до 6 (субота).

e: currentDate.getMonth() повертає місяць для поточної дати, значення від 0 (січень) до 11 (грудень).

f: currentDate.setDate(5) встановлює день місяця для об'єкта currentDate. Починається з 1.

g: currentDate.setMonth(11) встановлює місяць для об'єкта currentDate, починається з нуля, відповідно 11 відповідає грудню.

h: currentDate.setFullYear(2025) встановлює рік для об'єкта currentDate.

i: currentDate.getFullYear() повертає поточний рік.

j: currentDate.toString() конвертує об'єкт Date в рядок. Можна передати як параметр локаль, наприклад, для Української “uk”.

k: currentDate.toISOString() конвертує об'єкт Date в рядок за міжнародним стандартом ISO 8601.

l: currentDate.getHours() повертає поточні години.

m: currentDate.getMinutes() повертає поточні хвилини.

n: currentDate.getSeconds() повертає поточні секунди.

o: currentDate.setHours(10) встановлює години для об'єкта currentDate.

p: currentDate.setMinutes(30) встановлює хвилини для об'єкта currentDate.

q: currentDate.setSeconds(30) встановлює секунди для об'єкта currentDate.

r: currentDate.toUTCString() конвертує об'єкт Date в рядок за UTC форматом.

s: new Date(2023, 6, 1) створює нову дату з конкретним роком, місяцем та днем. Зверніть увагу, що місяць рахується з нуля, тому тут липень.

t: Розраховується різниця між currentDate і newDate в днях.

u: currentDate.getTimezoneOffset() зміщення часового поясу в хвилинах.

Сьогодні поговоримо про досить дивну річ в JS - це строгий режим, який активується також досить дивно - текстовим літералом “use strict” на початку файлу з кодом чи функції. Зауважу, що активувати його вручну треба лише в “звичайних” скріптах JS, у модулях він активований автоматично.

Отже, строгий режим (strict mode) — це спеціальний режим виконання JavaScript, який було введено в ECMAScript 5 (ES5) у 2009 році. Він робить кілька змін у нормальному поведінці JavaScript, зокрема:

a: Помилки на місці тихих помилок. У "не строгому" режимі, JavaScript часто намагається "порятувати ситуацію" при виникненні помилок, замість того, щоб негайно викинути помилку. Наприклад, присвоєння значення до неоголошеної змінної створює глобальну змінну. У строгому режимі така дія викине помилку.

b: Зміна семантики деяких мовних конструкцій. Строгий режим змінює поведінку деяких мовних конструкцій, щоб вони були більш передбачувані. Наприклад, в "не строгому" режимі, значення this може бути undefined або глобальний об'єкт. У строгому режимі, this є undefined для функцій, які не були викликані як методи або конструктори.

c: Попередження про погані практики. Строгий режим попереджає про деякі погані практики, які можуть призвести до непередбачуваної поведінки. Наприклад, оголошення змінних без var, let, або const викидає помилку в строгому режимі.

d: Відмова від речей, які мають бути видалені в майбутніх версіях JavaScript. Деякі особливості JavaScript були визнані помилковими або потенційно небезпечними, і вони відмовлені в строгому режимі. Наприклад, в строгому режимі ви не можете використовувати змінні з іменами eval або arguments, чи використовувати їх як імена параметрів функцій.

Загалом, код бажано писати у строгому режимі - активувати вручну, чи користуватися модулями.

Сьогодні поговоримо про String

a: У прикладі "a" ми спробували змінити str. Оскільки стрічки в JavaScript є незмінними, це ні до чого не приводить.

b: Властивість length відображає довжину стрічки.

c: Метод indexOf() повертає індекс, на якому вперше зустрічається задана підстрічка ("JavaScript").

d: Метод lastIndexOf() повертає індекс останнього входження заданої підстрічки.

e: Метод slice() повертає частину стрічки між двома заданими індексами.

f: Метод split() розбиває стрічку на масив підстрічок за заданим розділювачем, в цьому випадку - комою.

g: Метод replace() замінює перше входження "JavaScript" на "World".

h: Метод replaceAll() замінює всі зустрічення "JavaScript" на "World".

i: Метод toLowerCase() конвертує всі символи в стрічці в нижній регістр.

j: Метод toUpperCase() конвертує всі символи в стрічці в верхній регістр.

k: Метод trim() видаляє пробіл на початку і в кінці стрічки. У цьому випадку, він використовується для стрічки strTrim, а не для оригінальної str.

l: Метод charAt() повертає символ в стрінгу за вказаним індексом.

m: charCodeAt() повертає Unicode значення символу в стрінгу за вказаним індексом.

n: Метод concat() об'єднує два або більше стрінгів.

o: includes() перевіряє, чи містить стрінг вказаний текст.

p: Метод endsWith() перевіряє, чи закінчується стрінг вказаним текстом.

q: startsWith() перевіряє, чи починається стрінг з вказаного тексту.

r: match() повертає масив, що містить всі знайдені співпадіння з регулярним виразом.

s: Метод repeat() створює новий стрінг, що містить вказану кількість копій оригінального стрінга.

t: substring() повертає частину стрінгу між двома вказаними індексами.

u: String.fromCharCode() створює стрінг з вказаних Unicode значень.

Сьогодні розберемося з клонуванням в JS.

Воно буває мілке (поверхневе, shallow) та глибоке (deep).

Відмінність в тому, чи копіюється не тільки сама структура (об’єкт/масив), а і всі її внутрощі.

В реальному коді треба чітко розуміти, коли нам потрібно робити клонування взагалі, і якщо так, то має бути мілке чи глибоке.

Якщо ми ніяк не міняємо структуру даних, а лише читаємо її, то клонування не треба робити в принципі, бо то зайві витрати ресурсів.

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

Ну і нарешті, лише коли треба зробити повну ізольовану копію з усіма вкладеними даними, бо ми будемо їх міняти, тоді робимо глибоке.

Поверхневе клонування:

a, b: Spread syntax (...) та Object.assign({}, obj) використовуються для створення поверхневих копій об'єктів.

c, d: Spread syntax (...) та arr.slice() можуть бути використані для створення поверхневих копій масивів.

Глибоке клонування:

e, g: JSON.parse(JSON.stringify(obj)) використовується для глибокого клонування об'єктів та масивів. Об’єкт або масив спочатку перетворюється в рядок JSON, а потім назад в новий об'єкт або масив. Цей олдскульний метод досить поширений, але насправді не робить повну копію, зокрема, ігнорує функції. Також не підходить до інших структур даних, таких як Map, Set і т.д.

f, h: structuredClone(obj) це сучасний спосіб глибокого клонування об'єктів та масивів. Може клонувати більш складні об'єкти, ніж попередній спосіб, включаючи бінарні дані, дати, регулярні вирази, Map, Set та інші. В сучасному коді для глибокого клонування використовуємо саме його.

Так і працюємо :)

А якщо серйозно, то ви дуже здивуєтеся, наскільки багато для військових структур потрібно всяких IT-рішень і значна частина з них - це всякі веб-портали/формочки/робота з документами - все те, чим звичайні веб-розробники і займаються. Особливо багато такого в НАТО, відповідно і вакансій айтівців також.
ЗСУ теж рухаються в цьому напрямку, і люди такі потрібні також.

Сьогодні трохи познайомимося з асинхронністю в JS, згодом ще розглянемо цю тему детальніше.

Отже, задача: додати два числа і вивести результат з затримкою в одну секунду.

a: Callback. Так в JS робили до 2015 року. Ми створюємо функцію addWithDelay, яка отримує два числа і функцію зворотного виклику (callback). Функція використовує setTimeout для виконання операції додавання після однієї секунди, а потім викликає функцію зворотного виклику з результатом.

b: Promise - Цей приклад показує той же сценарій, але використовує Promise, які з’явилися у 2015 році. Вони є об’єктами, що змінюють стан, і в залежності від нього викликають коллбеки. Функція addWithDelayPromise повертає Promise, який виконається після однієї секунди з результатом додавання, спрацює then, а далі console.log.

c: Async/Await - У цьому прикладі ми робимо те ж саме, але використовуємо синтаксис async/await, який з’явився в 2017. Функція addAsync викликає addWithDelayPromise з ключовим словом await, що змушує JavaScript чекати виконання Promise перед тим, як продовжити виконання коду. Результат додавання потім повертається з функції. Якщо ми використовуємо await всередині функції, то її слід помітити ключовим словом async.

Сьогодні у нас по плану Event Loop. Тяжко пояснювати словами, треба дивитися візуалізацію.
Ось тут сучасний візуалайзер з мікро- та макротасками
https://www.jsv9000.app/
А це класичний виступ Філіпа Робертса, дуже корисно https://youtu.be/8aGhZQkoFbQ

Сьогодні поговоримо про Винятки (Exceptions).

"Виняток" в програмуванні - це незвичайна/непередбачувана подія, яка виникає під час виконання програми. Винятки можуть виникати з багатьох причин. Наприклад, програма можна читати вміст файлу, якого не існує, або використовувати змінну, яка не була оголошена.

Коли виняток виникає, виконання поточного блоку коду зупиняється, і програма "кидає" виняток, це можна уявити як сигнал про проблему. Цей виняток потім можна "перехопити" і обробити, використовуючи спеціальні блоки коду, відомі як try-catch. Обробка винятків дозволяє програмі відповідати на проблеми в контрольований спосіб, замість того, щоб виконання програми просто припинилося.

Тепер пояснення:

a: Цей приклад демонструє, як можна викликати винятки в JavaScript за допомогою оператора throw. Коли ми використовуємо throw, виконання коду в блоку try зупиняється, і виконується блок catch, якщо він присутній.

b: Цей приклад показує обробку винятку. У цьому випадку, ми намагаємось використати змінну, яка не була оголошена. Це викликає помилку, яку ми перехоплюємо в блоку catch.

c: Приклад використання блоку finally. Незалежно від того, чи були помилки в блоку try, або чи були вони перехоплені блоком catch, блок finally виконується завжди. Це корисно для коду, який має виконуватися незалежно від винятків, наприклад, закриття з'єднання з базою даних.

d: У цьому коді ми створили новий клас MyCustomError, який наслідує від Error. Ми перевизначаємо конструктор, щоб могли додати власне поле extra, а також встановлюємо name в нашому конструкторі.

Потім ми використовуємо цей власний клас помилок в блоці try-catch. Ми перевіряємо тип помилки в блоці catch і обробляємо виняток відповідно.

Декілька стандартних винятків:

- Error: Це базовий клас для всіх винятків в JS.

- RangeError: значення не входить в множину допустимих значень.

- ReferenceError: використовується невідомий (неоголошений) ідентифікатор.

- SyntaxError: при спробі розібрати неправильний код.

- TypeError: значення не є допустимим типом.

Зареєструвався в новій соцмережі threads від Мета, якщо ви вже там, то приєднуйтеся https://www.threads.net/@programmingmentor

Максимально схоже на твттер - короткі повідомлення, які можна об’єднати в ланцюжок, а коментарі до повідомлень також створюють ланцюжки. Виходять такі собі потоки, threads - власне так вони у твіттері називаються. Кумедно, що ця назва краще відображає сенс мережі, ніж назва “твіттер”. І коли на це все дивишися, то просто під враженням, наскільки нагло цукер передрав.

Ще не вирішив як буду користуватися тредсами, для мене зараз найбільший бар’єр в тому, що в неї немає веб-інтерфейсу, лише мобільна апка.
Я з мобілки хіба читаю, пости зі смартфону не пишу - власне навіщо над собою знущатися, якщо писати найзручніше з повноцінної клавіатури за комп’ютером. Сподіваюся веб-сайт вони запиляють, бо це якось зовсім не ок - власникам реакту має бути за це соромно.

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

Але як тільки його викупив Маск, то з твіттером почалися якісь проблеми - з одної сторони зміна поведінки, коли воно тобі підсовує не зовсім те, що треба і приховує те, що ти хотів би прочитати, особливо в питанні висвітлення питань війни. З іншої - траплялися періодичні глюки, за що не дивно, бо Маск першим ділом позвільняв купу людей, звільняв хаотично, і звичайно, що воно не могло не сказатися на якості сервісу.

Про те, що експертиза не переноситься, і можна успішно запускати ракети в космос, але зафейлити з соцмережею, я писав саме на прикладі Маска, коли історія з твіттером лише розкручувалася https://t.me/programmingmentor/272 Зарез це все лише підтвердилося і поїзд твіттера летить просто в прірву, за що, звичайно, дуже шкода, тим більше, що цензура в Меті набагато більш жорстка і твіттер тредси не замінять на 100%.

Однак я тут хотів би сказати за соцмережі загалом - завжди треба пам’ятати, що ви не володієте своїм акаунтом там, ви завжди в гостях. І від цензури не захищені, як і від взлому, скарг і тому подібного. То на одну мережу ніколи не варто зав’язуватися. Розробникам варто сайтик власний тримати обов’язково, хоча б на github.io зробити і там розмістити, як мінімум, контакти де шукати.

До речі, хто в яких соціалках сидить? Я не дуже багато загалом, але найбільше - то останнім часом був саме твіттер. Телеграм теж норм, але в ньому немає спільної стрічки, ти ходиш по конкретним каналам і пролистуєш що конкретно тобі цікаво. В принципі, в цьому є плюс, не залипаєш надовго, але не дуже зручно. По професійним речам ще буває на реддіті зависаю чи dev.to, на dou буваю теж. Ще на діскорді досить зручно в тематичних серваках зависати, ну і ютуб свого роду теж соціалка. Багато часу колись проводив у фейсбуці, зараз зовсім рідко, останнім часом щось зовсім не радує.

Сьогодні поговоримо про чергову “дивну” штуку в JS - це IIFE, читається як “іффі”.

a: Традиційно IIFE (Immediately Invoked Function Expression), або "вираз функції, що негайно викликається", це спосіб огорнути свої змінні або функції для уникнення конфліктів імен в глобальному просторі імен. Це було особливо важливо в старіших версіях JavaScript, до 2015 року, де для цього не було альтернатив.

b: Зараз IIFE можна робити зі стрілковими функціями для більш стислого синтаксису. Працює точно так само, як і традиційний IIFE.

c: IIFE може приймати параметри. Ви можете передати параметри викликаючи функцію в кінці виразу. Це корисно для ізолювання логіки, яка залежить від конкретних значень.

d: Альтернатива IIFE - блок коду {}. Він використовується для створення нової області видимості в ES2015 і вище. Всі змінні, визначені всередині нього використовуючи let або const, будуть ізольовані від глобального простору імен. Проте, варто врахувати, що він не може приймати параметри та не створює новий контекст this.

Також в сучасному JS не потрібно використовувати IIFE, якщо ми використовуємо модулі, тому в проєктах з реактом чи ангуляром зустріти IIFE вже буває дивно :)

ДОУ тут викатив цікаву аналітику, пишуть що у фронтендерів зарплати зменшуються :)

Насправді зменшення дуже умовне, набагато нижче, ніж можна було б очікувати - на 1% у сеньйорів і 3% у джунів - це ні про що.
Але загальна медіанна зарплата по всім технологіям по-ринку, незважаючи на війну, все-таки зросла. У 2014 році було падіння по зарплатах, погляньте на перший графік.

Ну і JavaScript+TypeScript займають 35,7% всього ринку, це, звичайно, вражає :)

Дропнули першу статтю літнього циклу про зарплати українських розробників 😎

Дізнаємось, скільки заробляють Front-end розробники та чи не втрачає JavaScript свої позиціїі👉 https://dou.ua/goto/FdTX

Сьогодні розберемося з ітераторами

Ітерабельний об'єкт в JavaScript дозволяє перебрати значення в послідовному порядку. Простіше кажучи - це об'єкт, з яким можна працювати в циклі for...of.

Щоб об'єкт був ітерабельним, він повинен реалізувати так званий ітераційний протокол: він повинен мати метод Symbol.iterator, який повертає інший об'єкт з методом next(). Метод next() повинен повертати об'єкт, що містить дві властивості: value (поточне значення) та done (булеве значення, яке вказує, чи закінчено ітерацію).

Наприклад, масиви, рядки, мапи (Maps) та сети (Sets) є ітерабельними об'єктами, оскільки вони реалізують ітераційний протокол. Можна перебрати їх елементи за допомогою циклу for...of або інших операцій, які працюють з ітерабельними об'єктами (наприклад, оператор розповсюдження (...)).

Звучить трохи складно, але насправді - то не так, розберемо приклади.

a: Ось базовий приклад ітератора в JavaScript. Ми створюємо об'єкт myIterator з двома полями: data, який є масивом значень, і next(), що є методом. Кожного разу, коли метод next() викликається, він повертає елемент та збільшує індекс. Коли проходимо весь масив, то ставимо done в true, що означає, що робота завершена.

b: Тут ми використовуємо попередній ітератор. Ми продовжуємо викликати myIterator.next(), поки всі значення не будуть виведені.

c: Тут ми просто беремо попередній код з прикладу a і додаємо метод Symbol.iterator. Цей метод повинен повертати об'єкт з методом next(), у нашому випадку - самого себе.

d: Тепер ми можемо використовувати ітерабельний об'єкт в циклі for...of, JavaScript автоматично викликає метод Symbol.iterator і використовує отриманий ітератор для отримання значень.