Сьогодні поговоримо про чергову “дивну” штуку в 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 і використовує отриманий ітератор для отримання значень.

Сьогодні у нас генератори

Це коли функцію пишуть з зірочкою. Це просто синтаксичний цукор до ітераторів, які ми розглянули вчора. Генератори в JavaScript автоматично створюють об'єкт, який відповідає протоколу ітератора. Це означає, що вони автоматично мають метод next(), який повертає об'єкт з властивостями value (для значення поточного елемента) і done (булевий індикатор, який показує, чи закінчився ітератор).

У генераторах замість return пишемо yield, яке теж повертає значення, але не перериває виконання функції, а дозволяє продовжити її, коли ми захочемо взяти наступне значення.

a: Тут ми маємо максимально просту функцію-генератор myGenerator, яка використовує yield для повернення двох рядкових значень - 'Hello' та 'World'. Генератори в JavaScript визначаються за допомогою синтаксису function*.

b: У цьому прикладі ми створюємо екземпляр генератора myGenerator і використовуємо next().value для отримання наступного значення, яке повертає генератор. При першому виклику next().value ми отримуємо 'Hello', при другому - 'World'.

c: Використання генератора в циклі for...of дозволяє нам пройтися по всіх значеннях, які генерує myGenerator. Цикл автоматично зупиняється, коли генератор перестає виводити значення.

d: Використання генератора з оператором розширення (...) - це ще один спосіб отримати всі значення, які генерує myGenerator. В результаті ми отримуємо масив ['Hello', 'World'].

e: Тут ми маємо нескінченний генератор чисел Фібоначчі. Він використовує yield для повернення поточного числа Фібоначчі на кожній ітерації, а потім обчислює наступне число для наступного yield. І так він буде робити до тих пір, поки будемо його викликати.

f: Це приклад використання for...of циклу для виводу перших 5 чисел з генератора чисел Фібоначчі. Використовуючи змінну count, ми можемо контролювати, скільки разів цикл виконується. Коли count дорівнює 0, ми перериваємо цикл.

Вже в понеділок стартуємо літню групу джедайського курсу JavaScript+TypeScript.
Тільки для підписників мого телеграмчику купон на знижку 2042 грн.
Код купона: JSFORCE
Детальна інфа про курс і реєстрація на сайті https://sj42.programmingmentor.com/

Сьогодні поговоримо про три методи для роботи з масивами: map, filter, reduce

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

Незмінність даних: Ці методи не модифікують початковий масив, а натомість створюють нові масиви. Це важливо для підтримки незмінності даних, особливо в сучасних JavaScript-фреймворках.

Чистота функцій: Ці методи вимагають використання чистих функцій, тобто функцій, які не мають побічних ефектів і дають однаковий вивід при однаковому вводі. Це покращує читабельність коду і спрощує тестування.

Лаконічність: Використання map, filter та reduce може значно скоротити кількість коду в порівнянні з традиційними циклами for або while.

Ланцюжки: Ці методи можна поєднувати в ланцюги один за одним, що забезпечує більш читабельний та організований код.

a: Map - це метод масиву, який створює новий масив із результатів виклику функції для кожного елементу масиву. У цьому прикладі, ми множимо кожен елемент масиву array1 на 2.

b: Filter - це інший метод масиву, який створює новий масив із всіх елементів, які проходять тест, визначений переданою функцією. У нашому випадку, ми створюємо новий масив filter1 з усіх чисел в array2, які більше 3.

c: Reduce - це метод масиву, що застосовує функцію-редуктор до кожного елемента масиву (зліва направо), тим самим зменшуючи його до єдиного вихідного значення. У нашому прикладі, ми сумуємо всі елементи масиву array3, використовуючи reducer як функцію-редуктор. Для обходу масиву зі зворотної сторони є метод reduceRight

Зустрічайте новий формат на DOU — лайвкодинг! Ви просите — ми робимо 💥

📅 22 липня об 11:00 у цьому телеграм-каналі готуватимемось до інтерв’ю з кодування для джуна в JavaScript🔥

В’ячеслав Колдовський, Competence Manager, Programming Mentor в SoftServe покаже, як має виглядати інтерв’ю з кодування, які потрібно ставити запитання, як вирішувати завдання, на що звертати увагу, щоб пройти його успішно. Зробимо кілька типових задачок, розберемо типові помилки.

Діліться з колегами, запрошуйте друзів, беріть кота — буде цікаво 😎

#DOU_LiveCoding

У суботу 22-го липня проведу лайвкодинг-вебінарчик по підготовці до інтерв'ю з кодування по JS для джунів. Приходьте, буде цікаво і корисно :)

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

Set (множина) існує в JavaScript з 2015 року. Set - це об'єкт, який дозволяє зберігати унікальні значення будь-якого типу, будь то примітивні значення або об'єкти.

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

Розглянемо приклади:

a: Щоб створити новий Set, ми використовуємо конструктор new Set().

b: Щоб додати значення до Set, використовуйте метод add(value). Кожне значення в Set повинне бути унікальним. Якщо додавати неунікальне, воно просто проігнорується.

c: Метод delete(value) видаляє вказане значення з Set. Якщо такого значення немає, нічого не станеться.

d: Метод has(value) перевіряє, чи є вказане значення в Set. Він повертає true, якщо значення є, та false в іншому випадку.

e: Властивість size повертає кількість елементів в Set. Її навмисно зробили відмінною від length, щоб ми в коді бачили, що це множина, а не масив.

f: Можна перебрати елементи Set за допомогою циклу for...of, тобто він є ітерабельним (про ітератори та генератори недавно писав в попередніх повідомленнях).

g: Метод clear() видаляє всі елементи з Set.

Про джедайський курс JavaScript

Літня група джедайського курсу JS стартує в понеділок і я як завжди отримую багато питань по курсу, питання схожі, тому публікую узагальнені відповіді в спільному чатику.

На який рівень орієнтований курс, чи підходить для новачків?

На курсі є два рівні складності - “Джедай” і “Падаван”. “Падаван” - то і є рівень для повного новачка, де ви можете послідовно з самого нуля почати робити перші кроки в програмуванні. Для тих, хто вже якісь початкові знання має і прийшов все систематизувати, то він може рухатися по рівню “Джедай”, виконуючи всі завдання, а не лише прості.

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

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

Чому в курсі лише мова програмування і немає фреймворків, бібліотек і тому подібного?

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

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

Для досвідченої людини очевидно, що саме навичка написання коду є найголовнішою в професії. Навіть не просто найголовнішою, а фактично - перепусткою в професію. Це як вміння читати/писати для того щоб далі опановувати якісь знання. Якщо ще не навчився читати/писати, то немає сенсу намагатися щось вивчати складніше, просто не зможеш це зробити.

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

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

Але в навчанні це працює не так - просто “видати” якусь тему можна швидко, можете навіть погуглити на тему відео react чи angular “за 2 хвилини”. Весь JavaScript я можу розказати за кілька годин, вже такий досвід був. Але чи засвоїться все це? Звісно ні, для цього треба не лише подати інформацію, а закріпити її, зокрема практикою.

В курсі зазначено що він “практичний”, в чому полягає його “практичність”?

Формування навичок відбувається через практику - тобто виконання дій, а не просте засвоєння теорії. Оскільки “практика” для розробника полягає в тому щоб виконувати завдання, створюючи рішення і пишучи код, то власне цим ми і займаємося на спеціально відібраних завданнях, що послідовно покривають всі ключові теми JavaScript, а потім ще додатково TypeScript.

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

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

PS. На всяк випадок нагадую, що промокод JSFORCE продовжує діяти, знижка 2042 грн.

Ще для вас анонс: тут Google Bard почав працювати в Україні, виглядає цікаво - вміє у верстку, завтра об 11:00 запиляю живий стрімчик, будемо його ганяти
https://youtube.com/live/vU6OQaZGh4Y?feature=share

Thenable в JavaScript

Сьогодні познайомимося з цікавою концепцією, про яку не завжди знають навіть досвідчені розробники - це thenable.

Thenable - це об'єкт, що має метод then. І це робить його сумісним з промісами через так званий “thenable protocol”. Відповідно, ми можемо зробити такий об’єкт і використовувати там, де очікуються проміси, у тому числі з async/await. Точно також як проміси, вони можуть бути об’єднані в ланцюжки і створювати вельми елегантні конструкції.

Розглянемо приклади:

a. Тут ми створюємо об'єкт myThenable, який є Thenable об'єктом. Це означає, що у нього є метод then, що приймає два аргументи: resolve та reject. В цьому випадку ми викликаємо resolve зі значенням 42, щоб "вирішити" Thenable з цим значенням.

b. У цьому прикладі ми передаємо Thenable об'єкт myThenable до Promise.resolve(), що створює проміс, що "вирішує" Thenable. Коли проміс буде вирішений, він виведе 42, що є результатом Thenable.

c. У цьому випадку ми використовуємо await для очікування результату Thenable об'єкту. Це працює, тому що await може працювати не тільки з промісами, але й з Thenable об'єктами. Вираз await myThenable поверне 42, що є результатом Thenable.

d. У цьому прикладі ми створюємо Thenable об'єкт mockApiCall, який імітує асинхронний запит до сервера. В методі then ми використовуємо setTimeout, щоб імітувати затримку відповіді від сервера. Коли "запит" виконаний, ми викликаємо resolve з "відповіддю сервера". Потім ми використовуємо await для очікування відповіді від "запиту".

Про thenable раджу додатково погуглити, зокрема подивитися як реалізується патерн Builder.

Отже сьогодні поганяли на стрімі Google Bard, запис вже є на каналі.

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

Короткі висновки:
Він дійсно вміє писати код і робить це близько до ChatGPT, але є враження, що справляється гірше, хоча й різниця не критична. Можливо варто навчитися ним користуватися, формуючи гарні запити (промпти).
Він дуже чуттєвий до промптів і тому важливо максимально чітко формулювати що від нього потрібно - від цього сильно буде залежати результат.
Дуже зручно, що відразу видає не один, а три різних варіанти, з яких можна обрати найкращий.
Дійсно здатен працювати з зображеннями і навіть зробив верстку по картинці, але результат не можна прийняти за задовільний, бо він багато “накреативив”, додав зайве, а потрібне “забув” додати. Професійному розробнику “допрацьовувати” такий код доведеться довше, ніж написати з нуля. Для новачка теж незрозуміло, чи воно піде на користь, бо може не допомогти, а лише заплутати.
Аналогічно справився з завданням розпізнавання коду зі скріншота - код получився близьким, але не ідентичним, він його модифікував “від себе”, що насправді досить погано, ти не можеш довірити йому цю задачу без додаткової ручної перевірки. Можливо є якийсь магічний промпт заставити його зробити один-в-один без креативу.
Цікава фіча експорту коду одним кліком в repl.it чи Google Collab, шкода, що працює лише для Python. Дуже сподіваюся що зроблять найближчим часом для інших мов, не бачу з цим жодних технічних перешкод.

Найбільш важливий висновок в тому, що між подібними сервісами почалася конкуренція, і це добре для кінцевого споживача. Очікую, що найближчим часом ChatGPT отримає підтримку роботу з зображеннями та й якісь кардинально нові фічі мають з’явитися.

Зокрема, в ChayGPT з’явився інтерпретатор коду, працює з Python, цікава досить штука, ймовірно для нього треба окреме відео зробити.

Map в JavaScript

Щоб зберігати словник ключ-значення в JS традиційно використовували об’єкти. Але в ES2015 з’явилася спеціальна структура даних Map.

Map має декілька переваг порівняно з об'єктом в JavaScript:

1. Ключі будь-якого типу: У Map можна використовувати ключі будь-якого типу, тоді як в Object ключами можуть бути лише рядки або Symbol. Наприклад, в Map можна використовувати об'єкти або навіть функції як ключі.

2. Порядок вставки: Map зберігає порядок вставки ключів, тоді як в Object цей порядок може бути неочевидним, особливо при використанні числових ключів.

3. Розмір Map: У Map легко отримати розмір (кількість пар ключ-значення) за допомогою властивості size, тоді як у Object треба використовувати Object.keys(obj).length`.

4. Методи для ітерації: Map має вбудовані методи для ітерації, такі як forEach, а також може бути прямо ітерований за допомогою for...of циклу. З Object таке можливо тільки за допомогою Object.keys(), Object.values() або Object.entries().

5. Швидків: У більшості випадків Map працює швидше порівняно з Object, особливо коли йдеться про великі колекції.

6. Вбудовані методи для маніпуляції даними: Map має вбудовані методи set, get, has, delete і clear для маніпуляції даними, тоді як для роботи з Object потрібно часто використовувати зовнішні функції або написати свої власні.

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

Тепер розглянемо приклади

a: new Map() - створює новий об'єкт типу Map. Map - це колекція пар ключ-значення, в якій кожний ключ є унікальним.

b: Метод set(key, value) дозволяє додавати елементи в Map. Ключ може бути будь-якого типу, не лише рядком.

c: Метод get(key) використовується для отримання значення, асоційованого з вказаним ключем.

d: Метод has(key) дозволяє перевірити, чи є в Map елемент з вказаним ключем.

e: Метод delete(key) видаляє елемент з вказаним ключем із Map.

f: Метод clear() видаляє всі елементи з Map. Розмір Map після цього дорівнює нулю.

WeakSet та WeakMap

З Set та Map ми вже розібралися, тепер познайомимося з досить специфічними їх близнятами - WeakSet та WeakMap.

Вони схожі до звичайних Set/Map, але потрібні для специфічних завдань - тримати об’єкти в тимчасовому сховищі, що очищається автоматично, коли об’єкт знищується в іношму місці. Це може бути, наприклад, кеш, з якого можемо діставати дані, але тільки тоді, коли вони існують, якщо вже не існують, то і в кеші їх не буде також.

Принципова відмінність від звичайних Set/Map в тому, що WeakSet/WeakMap не ітеруються та не мають властивості розміру, відповідно перебирати всі елементи не можна, можна працювати тільки на рівні окремих елементів.

Тепер, пояснення до прикладів:

a: WeakSet
У цьому прикладі створюється WeakSet, який приймає лише об'єкти. Він не має сильних посилань на ці об'єкти, тому вони можуть бути видалені, коли до них не залишиться посилань.

b: Змінна obj1 очищається, тому її можна зібрати як сміття. Після цього obj1 не буде в WeakSet, оскільки немає інших посилань на неї.

c: WeakMap
WeakMap подібна до WeakSet, але вона приймає пари ключ/значення. Це дозволяє вам встановлювати додаткові значення для об'єктів без перешкод для збирання сміття.

d: Як і з WeakSet, якщо єдине посилання на об'єкт-ключ видалено, ця пара ключ/значення може бути зібрана як сміття.

Чому самої мотивації недостатньо?

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

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

Що таке мотивація? Це та іскра, яка спонукає нас на рух до наших цілей цілей. Але як будь-яка іскра вона має або запалити вогнище, або згаснути.

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

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

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

Проте постійно мотивувати себе може бути складно, і тут є наступний етап - дисципліна.

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

І нарешті, звичка - найбільш потужний інструмент для досягнення цілей. Коли навчання стає частиною вашого щоденного ритуалу, воно перестає бути тяжким, ти звикаєш до цього, і порушувати ритуал стає некомфортно, ти намагаєшся його дотримуватися. Коли це трапляється, то людину вже не спинити на шляху до її цілей. Є теорія, що звичка може бути створена за 21 день, а за 42 дні звичку можна виробити двічі 🙂

Заміряємо час виконання коду в JavaScript

a. performance.now(): Цей метод повертає поточний час в мілісекундах з початку завантаження сторінки. В даному прикладі t0 - це час перед виконанням коду, а t1 - після. Різниця між ними дає нам час виконання коду.

b. console.time('someFunction') та console.timeEnd('someFunction'): Ці два методи використовуються для замірювання часу виконання коду між ними. У нашому прикладі ми заміряємо час виконання функції someFunction. Метод менш точний, ніж попередній.

c. process.hrtime(): Цей метод працює лише в Node.js, а не в браузері, він найбільш точний - повертає масив з двома числами, що представляють секунди та наносекунди. Можна звернутися до process.hrtime.bigint() і отримати час лише в наносекундах, різниця між двома викликами дозволить заміряти час на виконання.

Мітки

А чи знаєте ви, що кожна url-адреса є валідним рядком JS-коду?
Наприклад, https://programmingmentor.com.ua складається з мітки https: та коментаря //programmingmentor.com.ua.

Раніше мітки активно використовувалися в мовах програмування разом з оператором goto, що дозволяв переходити на будь-яку ділянку коду. Цікаво, що аж в 1968 році відомий вчений і програміст Едгар Дейкстра написав статтю “Go To Statement Considered Harmful”, де фактично знищів goto як концепцію, пояснивши, чому його не можна використовувати.

Похвально, що Брендону Ейху вистачило сміливості не додавати goto в JS в 1995, хоча тоді в середині дев’яностих багато розробників все ще користувалися цим оператором. А наприклад, Андерсу Гейлсбергу, автору C#, який вийшов у 2001, не вистачило сміливості і goto він додав. І в C# тепер оператор є, але за використання його в коді реального проєкту по головці не погладять :)

Тим не менше, в JS є мітки і працюють вони схоже до міток, що використовуються з goto, тільки область їх застосування обмежена. Фактично є два варіанти - вихід з циклів та переривання блоку коду.

a: Цей приклад демонструє використання міток у циклах. loop - це мітка, що асоціюється з зовнішнім циклом for. Коли умова if(i === 1 && j === 1) стає істинною, оператор break з міткою loop зупиняє виконання не лише внутрішнього циклу, але і зовнішнього. Без використання мітки, break зупинив би лише виконання внутрішнього циклу.

b: Цей приклад показує, як мітку можна використати з блоком коду, а не лише з циклами.block - це мітка, що асоціюється з блоком коду. Якщо test істинне, break block зупиняє виконання коду всередині блоку. Це означає, що рядок 'This message will never be displayed' ніколи не буде виведено в консолі.