Вивчення JavaScript за допомогою уяви

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

Багато років тому, я захотів стати Senior-розробником. І я досяг цієї мети! Я хотів би сказати, що це було результатом важкої праці та наполегливості, але ні, цього було недостатньо. На моєму шляху став JavaScript, і саме під час боротьби з ним я натрапив на одне безглузде речення в книзі Марейн Хавербек “Виразний Javascript” на тему змінних:

“Ви маєте уявляти змінні наче вони щупальця, а не коробки. Вони не зберігають значення, вони хапають їх - дві змінні можуть посилатися на одне значення”. Марейн Хавербек

Подібна аналогія належить до категорії дитячих порівнянь, призначених здебільшого для початківців, щоб зрозуміти основні поняття. Вони веселі і розважальні, але це не те, що може перетворити тебе на Senior-a.

Але мене це вразило. Навіть у незначній мірі ця дитяча метафора зробила мене кращим розробником. Це виправило фундаментальне непорозуміння: ми не вставляємо значення в змінні. Якщо змінні дійсно поводилися би як відра або контейнери, тоді як код нижче міг бути вірним?

const count1 = 10;
const count2 = count1;
                                                

Як це можливо мати однакове значення 10 у двох різних “відрах”? Те саме не може бути в двох місцях одночасно, чи не так?!

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

Чому весь JavaScript не може бути таким?

Мій пошук додаткових наочних навчальних матеріалів

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

Тож у чому проблема? Я ще не був на тому рівні, аби легко розшифровувати стоси сухого технічного тексту. Я хотів більше восьминогів!

Тому я шукав їх усюди. Я просканував Інтернет у пошуках візуальних і абстрактних навчальних ресурсів: Google, YouTube, Medium, TikTok і всі книги, які міг знайти. Я виявив, що більшість «візуального навчального» матеріалу вписується в одну з трьох груп.

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

Друга група - це графічно представлений синтаксис або технічне пояснення. Ви коли-небудь бачили безліч емодзі яблук і апельсинів? Або діаграми циклу подій? Вони можуть розбити страшні концепції на легше засвоюваний візуальний матеріал. Вони можуть бути потужними візуальними допоміжними засобами, які перетворюють важкий технічний жаргон. Приклади включають блискучу серію «JavaScript Visualized» Lydia Hallie, а також шпаргалки, подібні до цієї від Ram Maheshwari.

Третя група ближча до того, що я шукав: навчання за аналогією. Розробники люблять гарну аналогію. Ми постійно використовуємо їх у публікаціях блогів і відеоуроках. Вони допомагають пояснити дуже технічні поняття. Один ресурс, CodeAnalogies, особливо вражає, з аналогіями для всього, від мереж розповсюдження контенту до фреймворків MVC.

Але навчання за аналогією мало для мене обмеження. Всі аналогії були не пов’язані між собою! Вони не мали жодного відношення один до одного. Вони чудово підходили для того, щоб охопити мою голову окремою темою, але не для того, щоб побачити загальну картину. Справа в JavaScript полягає в тому, що все пов’язано. Як газетну аналогію для об’єктів можна розширити для опису прототипного успадкування?

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

Створення власних візуальних уявлень

Для цього було лише одне рішення: створити власні візуальні уявлення для дерева знань JavaScript. Але спочатку мені потрібно було зрозуміти, як зробити так, щоб щось запам’яталося.

Мене завжди цікавили методи мнемонічної пам’яті. Це «злами» пам’яті, наприклад «палац пам’яті». Вони допомагають візуально кодувати великі обсяги інформації для легшого запам’ятовування. Учасники світових змагань із запам’ятовування використовують його для вивчення порядку кількох колод карт і послідовностей випадкових чисел.

Основний принцип такий: ви можете взяти будь-яку ідею та перетворити її на образ. Наприклад, масивом може бути океанський скат (гра слів англійською: array - an ocean stingray). Це добре, але все одно недостатньо. Хитрість полягає в тому, щоб зробити уявний образ якомога дивнішим і смішним. Незвичайні образи залишаються в пам’яті.

Мій перший великий урок

Отже, ось одне з моїх перших мнемонічних представлень масивів JavaScript:

Я так цим пишався. У нас є вуличний торговець (скат - a stingray), який продає фрукти, нагадуючи мені, що масиви містять дані. Він має спеціальний квадратний пристрій для підбору окремих елементів, які представляють синтаксис квадратних дужок для вибору елементів. У нього є монокль, щоб нагадати мені, що масиви мають методи пошуку. У нього є ковбойське ласо, яке відноситься до циклів і так далі.

Це веселе зображення. Але я намагався вивчити JavaScript, щоб отримати роботу! Якщо цей безглуздий скат із моноклем і не зробив мене кращим розробником, то він переграв мету. Основний тест: чи використовував би я це зображення масиву, як точку відліку під час кодування? Ні. Це виявилося абсолютно, абсолютно марним.

Мені не потрібен був спосіб запам’ятати визначення масиву. Знання, що вони мають методи пошуку, не говорить мені, як я можу виконувати пошук. Навіть хвіст у вигляді швейцарського ножа з усіма основними методами масиву, такими як .sort(), .push() і .unshift(), виявився безглуздим після двосекундного пошуку в Google.

Це було складніше, ніж я думав. Я отримав свій перший великий урок:

“Ми не можемо вивчити мову програмування за допомогою чистих мнемонічних методів, тому що запам’ятовування списків речей не допоможе вам зрозуміти основні поняття.”

Мій другий великий урок

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

Угорі ми маємо дурних десантників (гра слів англійською: parameters - paratroopers), які представляють параметри. Ми надсилаємо параметри через вхід ( ), і вони потрапляють у закритий басейн (тобто тіло функції). Вони починають сперечатися (гра слів англійською: arguing - arguments), і ось як ми можемо запам’ятовувати аргументи.

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

Подібна абстракція з хибною теорією насправді зробила б мене гіршим розробником! Мені потрібно було глибше розібратися в тому, що відбувається насправді.

Прорив

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

Що хапали щупальця? Значення!

На значення часто не звертають уваги, і вони не здаються ключем до розкриття таємниць JavaScript. Але ця проста ідея стала для мене проривом: якщо код - це потік, ми можемо уявити течію як океан чи річку. Що ми знаходимо в цьому потоці? Острови!

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

Від аналогій до моделей

Рівень за рівнем я почав будувати бачення JavaScript, зосереджуючись на тому, чим є насправді певні речі та як вони пов’язані з іншими речами. Спочатку з'явилися острови. Потім з’явилися джини, злі чаклуни, літаючі кораблі та пілоти-черепахи. Моє хвилювання зростало, оскільки менші частинки та основи можна було об’єднати, щоб отримати загальне розуміння більш складних тем, таких як замикання.

Кожне зображення не було простою аналогією. Це була ментальна модель — спосіб мислення. Вона надавала лінзу для тлумачення кожної концепції, але вимагала уяви. Я називаю їх моделями уяви (imagimodels).

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

Розвиток пам’ятного, багатошарового всесвіту

За допомогою цього підходу було створено абстрактний всесвіт JavaScript:

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

Розповідь – це те, що буквально втілило інші концепції в картину. Тут ми бачимо замикання:

Наступне зображення використовує мнемонічні методи для запам’ятовування корисної термінології. На відміну від масивів і параметрів, «контекст виконання» нагадував щось, що я б прочитав у посібнику IBM 1970-х років. Це був страшний термін, який заслуговував на страшне представлення.

Я знайшов зв’язок між «контекстом виконання» та фразою «виконавець отримав прокляття» (гра слів англійською: execution context - executor got hex), що надихнуло на ілюстрацію ката в середньовічному стилі, який тримає сокиру в одній руці та прокляття, або заклинання чаклуна, в іншій.

Чому заклинання? Це не випадково. Це грунтується на попередніх існуючих рівнях, що представляють інші підконцепції. Заклинання пов’язане з нашим розумінням виклику функції та змушує вас думати про чарівників і чаклунів, чи не так? І це круглі дужки в кожному виклику функції.

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

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

Я називаю свої ілюстрації концепцій JavaScript « The Great Sync » і використовую їх, щоб продовжувати розвивати своє розуміння, а також навчати інших.

Відзначення альтернативних підходів до навчання

Чи стала ця подорож із вивчення JavaScript легкою з цього моменту? Чи побудова цього всесвіту змусила мене пройти всі тести на JavaScript, які мені потрібно було пройти, щоб отримати роботу вищого рівня?

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

Мій найбільший висновок з усіх моїх зусиль у навчанні це відповідь на декілька важливих питань: незважаючи на те, що The Great Sync вирішив багато моїх особистих проблем із мовою, чи він кращий за будь-який окремий ресурс, який я згадав? Чи є від нього користь без фактичного кодування — невтомного, болісного процесу спроб змусити ваш код працювати? Звичайно ні.

Це один із багатьох інструментів, який дозволяє «побачити» JavaScript по-іншому та уникнути обмежень редактора коду чи посібника YouTube.

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

Джерело: http://surl.li/hifmt
Переклад: Ірина Грицаєнко
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень