Сучасний JavaScript з ES6-ES13 (посібник JS)

Це чекає на вас у цьому курсі з JavaScript ES6.

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

До включно ES5 ключове слово var було єдиним способом оголошення змінних, і часто призводило до небажаної поведінки або навіть помилок. ES6 представляє два нові ключові слова let та const, які виправляють деякі недоліки var.

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

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

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

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

Робота з змінною arguments- була необхідна до ES6, щоб дозволити змінну кількість параметрів у функціях. У ES6 це набагато простіше за допомогою так званих залишкових параметрів.

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

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

Протилежність оператора Rest - оператор Spread. Виглядає він так само (…), але розташований з іншого боку від призначення і розгортає масив на окремі частини.

«Трюк» з оператором розпространення працює дуже добре й для об'єктів. За його допомогою можна «вмішувати» об'єкти в інші об'єкти. Однак є дуже хороша альтернатива за допомогою Object.assign().

Функції в об'єктних літералах дуже не зручно писати з використанням ключового слова function-. Але з ES6 їх також можна писати набагато коротше та зрозуміліше.

Не можна сказати іншим чином: багатострокові рядкові літерали з вбудованими значеннями змінних були катом до ES6 і також дуже неприємні для читання. Нові шаблонні літерали ES6, навпаки, є синтаксичним благом.

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

Після того, як за допомогою обіцянок можна уникнути пекла зворотніх викликів, конструкція async/await- ще більше добавляє синтаксичного цукру. Вона базується на обіцянках та дозволяє програмувати асинхронні операції майже як синхронні. Той, хто хоч раз розробляв з використанням async/await, в майбутньому уникатиме прямого використання методу then- обіцянок (і тим більше використання зворотних викликів).

Окрім статичного імпорту модулів з ключовим словом import, ES6 також підтримує динамічне імпортування за допомогою функції import-. Оскільки все працює асинхронно, повертається обіцянка, яку можна чекати використовуючи await. Це дає можливість завантажити модулі під час виконання в будь-який час.

Наслідування також ґрунтується на прототипах із ES6 з ключовим словом extends виявляється значно простіше та зрозуміліше. При його використанні потрібно викликати конструктор базового класу вірної час функції super. Як це зробити, звісно ж, пояснено у цьому уроці.

Тепер можна декларувати приватні поля, до яких гарантовано не можна отримати доступ ззовні. Трохи дивно виглядає декларація, яка помітно відрізняється від інших мов програмування.

З новим ключовим словом class та пов'язаними можливостями, такими як успадкування та інкапсуляція даних (приватні поля), всі ОО-програмісти повинні бути задоволеними, чи не так? Я хочу представити вам альтернативу для створення об'єктів у цьому уроці, яка абсолютно не потребує класів, прототипів і this, замість цього надаючи більш гнучкий спосіб "успадкування" або, краще кажучи, "композиції".

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