33 концепции JavaScript, которые должен знать каждый разработчик 🤓️💯️💯️

Как много JavaScript, по вашему мнению, вы действительно знаете? Возможно, вы умеете писать функции, понимаете простые алгоритмы и даже можете написать класс. Но знаете ли вы, что такое типизированный массив?

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

Важно отметить, что этот список был вдохновлен следующим репозиторием:

leonardomso / 33-js-concepts

📜 33 концепции JavaScript, которые должен знать каждый разработчик.

33 концепции, которые должен знать каждый разработчик JavaScript

Введение

Этот репозиторий был создан с намерением помочь разработчикам освоить концепции JavaScript. Это не требование, а руководство для будущих исследований. Он основан на статье, написанной Стивеном Кертисом, и вы можете прочитать ее здесь.

Сообщество

Не стесняйтесь отправлять PR, добавляя ссылку на свой собственный обзор или рецензию. Если вы хотите перевести репо на свой родной язык, пожалуйста, не стесняйтесь делать это.

Все переводы для этого репозитория будут перечислены ниже:

  • Shqip (албанский) — Eldrin Ereqi
  • اَلْعَرَبِيَّةُ (арабский) — Амр Эльсекилли
  • 汉语 (китайский) — Ре Тянь
  • Português do Brasil (бразильский португальский) — Тиаго Боинг
  • 한국어 (корейский) — Суин Ли
  • Español (испанский) — Адонис Мендоза
  • Türkçe (турецкий) — Илькер Демир
  • Русский язык (русский) -…
Посмотреть на GitHub

Пожалуйста, поблагодарите автора и авторов репозитория 33 JS Concepts за то, что они собрали этот замечательный список ресурсов! ❤️

Итак, без лишних слов, давайте начнем!

Оглавление

  1. Стек вызовов
  2. Примитивные типы
  3. Типы значений и ссылочные типы
  4. Неявные, явные, номинальные, структурирующие и утиные типы
  5. == vs === vs typeof
  6. Область действия функции, область действия блока и лексическая область действия
  7. Выражение против утверждения
  8. IIFE, модули и пространства имен
  9. Очередь сообщений и цикл событий
  10. setTimeout, setInterval и requestAnimationFrame
  11. Механизмы JavaScript
  12. Побитовые операторы, массивы типов и буферы массивов
  13. DOM и деревья макетов
  14. Фабрики и классы
  15. this, call, apply и bind
  16. new, Constructor, instanceof и Instances
  17. Наследование прототипов и цепочка прототипов
  18. Object.create и Object.assign
  19. map, reduce, filter
  20. Чистые функции, побочные эффекты, мутация состояния и распространение событий
  21. Закрытия
  22. Функции высокого порядка
  23. Рекурсия
  24. Коллекции и генераторы
  25. Обещания
  26. async/await
  27. Структуры данных
  28. Дорогие операции и нотация Big O
  29. Алгоритмы
  30. Наследование, полиморфизм и повторное использование кода
  31. Паттерны проектирования
  32. Частичные приложения, керринг, композиция и трубы
  33. Чистый код

1. Стек вызовов

Стек вызовов — это механизм, позволяющий интерпретатору (например, интерпретатору JavaScript в веб-браузере) отслеживать свое место в сценарии, вызывающем множество функций — какая функция выполняется в данный момент, какие функции вызываются из этой функции и т. д.
-Источник

Учебники

  • 📜 Понимание стека вызовов Javascript, циклы событий — Гаурав Пандвиа
  • 📜 Понимание стека вызовов JavaScript — Чарльз Фриборн
  • 📜 Javascript: Что такое контекст выполнения? Что такое стек вызовов? — Валентино Гальярди

2. Примитивные типы

Все типы, кроме объектов, определяют неизменяемые значения (то есть значения, которые не могут быть изменены). Например (и в отличие от языка C), строки являются неизменяемыми. Мы называем значения этих типов «примитивными значениями».
-Источник

Учебники

  • 📜 Как кодируются числа в JavaScript — доктор Аксель Раушмайер
  • 📜 Что нужно знать о типах чисел в JavaScript — Max Wizard K
  • 📜 Что каждый разработчик JavaScript должен знать о числах с плавающей точкой — Chewxy

3. Типы значений и ссылочные типы

Переменные, которым присваивается непервичное значение, получают ссылку на это значение. Эта ссылка указывает на местоположение объекта в памяти. На самом деле переменные не содержат значения.
-Источник

Учебники

  • 📜 Объяснение значения и ссылки в Javascript — Арнав Аггарвал
  • 📜 Примитивные типы и ссылочные типы в JavaScript — Бран ван дер Меер
  • 📜 Типы значений, ссылочные типы и область применения в JavaScript — Бен Астон

4. Неявная, явная, номинальная, структурирующая и утиная типизация

Принуждение типов означает, что когда операнды оператора имеют разные типы, один из них будет преобразован в «эквивалентное» значение типа другого операнда.
-Источник

Учебники

  • 📜 Что нужно знать о неявном коэрцитировании в Javascript — Promise Tochi
  • 📜 JavaScript Type Coercion Explained — Алексей Самошкин
  • 📜 Javascript Coercion Explained — Ben Garrison

5. == vs === vs typeof

В JavaScript есть два визуально похожих, но очень разных способа проверки равенства. Вы можете проверить равенство с помощью == или ===.
-Источник

Учебники

  • 📜 JavaScript Двойные равенства против тройных равенств — Брэндон Морелли
  • 📜 Должен ли я использовать оператор сравнения равенства === или == в JavaScript? — Пану Питкамаки
  • 📜 == vs === JavaScript: Двойные равенства и принуждение — AJ Meyghani

6. Область действия функции, область действия блока и лексическая область действия

Важно сделать это различие, потому что выражения могут действовать как утверждения, поэтому у нас также есть утверждения Expression. Хотя, с другой стороны, утверждения не могут действовать как выражения.
-Источник

Учебники

  • 📜 JavaScript Functions-Understanding The Basics — Brandon Morelli
  • 📜 Борьба между областью действия функции и областью действия блока — Мариус Херринг
  • 📜 Эмуляция блочного диапазона в JavaScript — Джош Клэнтон

7. Выражение против утверждения

Важно провести это различие, потому что выражения могут действовать как утверждения, поэтому у нас также есть утверждения Expression. Хотя, с другой стороны, утверждения не могут действовать как выражения.
-Источник

Учебники

  • 📜 Все, что вам нужно знать о выражениях, утверждениях и утверждениях выражения в Javascript — Обещание Точи
  • 📜 Выражения функций против деклараций функций — Пол Уилкинс
  • 📜 Функция JavaScript — декларация и выражение — Рави Рошан

8. IIFE, модули и пространства имен

Один из часто используемых шаблонов кодирования с функциями получил модное название: Immediately-invoked Function Expression. Или более известное как IIFE и произносимое как «iffy».
-Источник

Учебники

  • 📜 Освоение немедленно вызванных функциональных выражений — Чандра Гундамараджу
  • 📜 Делают ли модули ES6 случай IIFE устаревшим?
  • 📜 10-минутное руководство по модулям JavaScript, форматам модулей, загрузчикам модулей и бандлерам модулей — Юрген Ван де Моер

9. Очередь сообщений и цикл событий

«Как JavaScript является асинхронным и однопоточным?». Короткий ответ заключается в том, что язык JavaScript является однопоточным, а асинхронное поведение не является частью самого языка JavaScript, скорее оно строится поверх основного языка JavaScript в браузере (или среде программирования) и доступно через API браузера.
-Источник

Учебники

  • 📜 JavaScript Event Loop Explained — Anoop Raveendran
  • 📜 Цикл событий JavaScript: Объяснение — Эрин Свесон-Хили
  • 📜 Понимание JS: цикл событий — Александр Кондов

10. setTimeout, setInterval и requestAnimationFrame

Мы можем решить выполнить функцию не прямо сейчас, а в определенное время позже. Это называется «планированием вызова».
-Источник

Учебники

  • 📜 setTimeout и setInterval — JavaScript.Info
  • 📜 Почему не стоит использовать setInterval — Akanksha Sharma
  • 📜 setTimeout VS setInterval — Develoger

11. JavaScript Engines

Написание кода для Web иногда кажется немного волшебным: разработчики пишут последовательность символов и, как по волшебству, эти символы превращаются в конкретные изображения, слова и действия в браузере. Понимание технологии может помочь разработчикам лучше отточить свое ремесло программиста.
-Источник

Учебники

  • 📜 JavaScript Engines — Джен Лупер
  • 📜 Понимание того, как движок Chrome V8 переводит JavaScript в машинный код — DroidHead
  • 📜 Понимание байткода V8 — Франциска Хинкельманн

12. Побитовые операторы, массивы типов и буферы массивов

Итак, технически для компьютера все сводится к 1 и 0. Он не оперирует ни цифрами, ни символами, ни строками, он использует только двоичные цифры (биты). Краткая версия этого объяснения заключается в том, что все хранится в двоичной форме. Затем компьютер использует кодировки, такие как UTF-8, для преобразования сохраненных комбинаций битов в символы, цифры или различные знаки (версия ELI5).
-Источник

Учебники

  • 📜 Программирование на JS: побитовые операции — Александр Кондов
  • 📜 Использование побитовых операторов JavaScript в реальной жизни — ian m
  • 📜 Побитовые операторы JavaScript — w3resource

13. DOM и деревья макетов

Объектная модель документа, обычно называемая DOM, является важной частью создания интерактивных веб-сайтов. Это интерфейс, который позволяет языку программирования манипулировать содержимым, структурой и стилем веб-сайта. JavaScript — это язык сценариев на стороне клиента, который подключается к DOM в интернет-браузере.
-Источник

Учебники

  • 📜 Как понять и изменить DOM в JavaScript — Таня Рашиа
  • 📜 Что такое объектная модель документа, и почему вы должны знать, как ее использовать — Леонардо Мальдонадо
  • 📜 Учебник JavaScript DOM с примером — Guru99

14. Фабрики и классы

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

Учебники

  • 📜 Как использовать классы в JavaScript — Tania Rascia
  • 📜 Классы Javascript — под капотом — Маджид
  • 📜 Классы ES6 — Натаниэль Фостер

15. this, call, apply и bind

Эти функции очень важны для каждого разработчика JavaScript и используются почти в каждой библиотеке или фреймворке JavaScript.
-Источник

Учебники

  • 📜 Изучение методов call(), apply() и bind() в JavaScript — Aniket Kudale
  • 📜 How-to: call(), apply() и bind() в JavaScript — Niladri Sekhar Dutta
  • 📜 Методы JavaScript Apply, Call и Bind необходимы для профессионалов JavaScript — Ричард Бовелл

16. new, конструктор, instanceof и экземпляры

Каждый объект JavaScript имеет прототип. Все объекты в JavaScript наследуют свои методы и свойства от своих прототипов.
-Источник

Учебники

  • 📜 JavaScript для начинающих: оператор ‘new’ — Брендон Морелли
  • 📜 Давайте разберемся в ключевом слове JavaScript ‘new’ — Синтия Ли
  • 📜 Конструктор, оператор «new» — JavaScript.Info

17. Наследование прототипов и цепочка прототипов

JavaScript немного запутан для разработчиков, имеющих опыт работы с языками, основанными на классах (такими как Java или C++), поскольку он динамичен и не предоставляет реализации класса как такового (ключевое слово class введено в ES2015, но является синтаксическим сахаром, JavaScript остается основанным на прототипах).
-Источник

Учебники

  • 📜 Javascript : Прототип против класса — Валентин ПАРСИ
  • 📜 Основы движка JavaScript: оптимизация прототипов — Матиас Байненс
  • 📜 Прототип JavaScript — NC Patro

18. Object.create и Object.assign

Метод Object.create является одним из методов создания нового объекта в JavaScript.
-Источник

Учебники

  • 📜 Object.create в JavaScript — Рупеш Мишра
  • 📜 Object.create(): новый способ создания объектов в JavaScript — Роб Гравелл
  • 📜 Базовое наследование с помощью Object.create — Джошуа Клэнтон

19. map, reduce, filter

Даже если вы не знаете, что такое функциональное программирование, вы наверняка использовали map, filter и reduce просто потому, что они невероятно полезны и делают ваш код менее вонючим, позволяя писать более чистую логику.
-Источник

Учебники

  • 📜 Функциональное программирование JavaScript — map, filter и reduce — Боян Гвоздерац
  • 📜 Изучение map, filter и reduce в Javascript — Жуан Мигель Кунья
  • 📜 JavaScript’s Map, Reduce, and Filter — Дэн Мартенсен

20. Чистые функции, побочные эффекты, мутация состояния и распространение событий

Так много наших ошибок коренится в коде, связанном с IO, мутацией данных, побочными эффектами. Они проскальзывают по всей нашей кодовой базе — от таких вещей, как прием пользовательского ввода, получение неожиданного ответа через вызов http или запись в файловую систему. К сожалению, это суровая реальность, с которой мы должны привыкнуть иметь дело. Или нет?
-Источник

Учебники

  • 📜 Javascript и функциональное программирование — Чистые функции — Омер Голдберг
  • 📜 Пройдите собеседование по JavaScript: Что такое чистая функция? — Эрик Эллиотт
  • 📜 JavaScript: Что такое чистые функции и зачем их использовать? — Джеймс Джеффери

21. Замыкания

Замыкание — это комбинация функции, объединенной (заключенной) со ссылками на окружающее ее состояние (лексическое окружение). Другими словами, закрытие дает вам доступ к области видимости внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время создания функции.
-Источник

Учебники

  • 📜 Я никогда не понимал замыкания JavaScript — Оливье де Меульдер
  • 📜 Понять замыкания JavaScript с легкостью — Ричард Бовелл
  • 📜 Понимание замыканий JavaScript — Codesmith

22. Функции высшего порядка

JavaScript может принимать функции высшего порядка. Эта способность работать с функциями высшего порядка, наряду с другими характеристиками, делает JavaScript одним из языков программирования, хорошо подходящих для функционального программирования.
-Источник

Учебники

  • 📜 Функции высшего порядка в JavaScript — М. Дэвид Грин
  • 📜 Функции высшего порядка: Использование Filter, Map и Reduce для более удобного кода — Гвидо Шмитц
  • 📜 Функции первого класса и функции высшего порядка: Эффективный функциональный JavaScript — Хьюго Ди Франческо

23. Рекурсия

Рассматривайте этот пост как серию обучающих упражнений. Эти примеры призваны заставить вас задуматься — и, если я все делаю правильно, возможно, немного расширить ваше понимание функционального программирования.
-Источник

Учебники

  • 📜 Рекурсия в JavaScript — Кевин Эннис
  • 📜 Понимание рекурсии в JavaScript — Зак Фриш
  • 📜 Изучение и понимание рекурсии в JavaScript — Брэндон Морелли

24. Коллекции и генераторы

Объект Generator возвращается функцией генератора и соответствует как протоколу iterable, так и протоколу iterator.
-Источник

Учебники

  • 📜 ES6 в глубину: Коллекции — Джейсон Орендорфф
  • 📜 ES6 Коллекции: Использование Map, Set, WeakMap, WeakSet — Кайл Пеннелл
  • 📜 ES6 Слабые карты, множества и слабые наборы в глубину — Николас Беваккуа

25. Обещания

Объект Promise представляет возможное завершение (или неудачу) асинхронной операции и ее результирующее значение.
-Источник

Учебники

  • 📜 JavaScript Promises for Dummies — Jecelyn Yeen
  • 📜 Понимание обещаний в JavaScript — Gokul N K
  • 📜 Пройдите собеседование по JavaScript: Что такое обещание? — Эрик Эллиотт

26. async/await

Существует специальный синтаксис для более удобной работы с обещаниями, который называется «async/await». Он удивительно прост для понимания и использования.
-Источник

Учебники

  • 📜 Понимание async/await в Javascript — Gokul N K
  • 📜 Изучение функций async/Await в JavaScript — Alligator.io
  • 📜 Асинхронный Javascript с использованием async/await — Джой Варугу

27. Структуры данных

Javascript развивается с каждым днем. С быстрым ростом фреймворков и платформ, таких как React, Angular, Vue, NodeJS, Electron, React Native, использование javascript для крупномасштабных приложений стало вполне обычным делом.
-Источник

Учебники

  • 📜 Структуры данных в JavaScript — Тон Ли
  • 📜 Алгоритмы и структуры данных в JavaScript — Алексей Трехлеб
  • 📜 Структуры данных: Объекты и массивы — Крис Нвамба

28. Дорогие операции и нотация Big O

«Что такое нотация Big O?» — это очень распространенный вопрос на собеседовании для разработчиков. Вкратце, это математическое выражение того, сколько времени требуется алгоритму для выполнения в зависимости от длины входных данных, обычно речь идет о наихудшем сценарии.
-Источник

Учебники

  • 📜 Нотация Big O в Javascript — Сезар Антон Дорантес
  • 📜 Временная сложность/нотация Big O — Тим Робертс
  • 📜 Big O в JavaScript — Габриэла Медина

29. Алгоритмы

В математике и информатике алгоритм — это конечная последовательность четко определенных инструкций, обычно используемых для решения определенного класса задач или выполнения вычислений.

Учебники

  • 📜 Структуры данных и алгоритмы с использованием ES6
  • 📜 Алгоритмы и структуры данных, реализованные на JavaScript, с пояснениями и ссылками на дополнительную литературу
  • 📜 JS: алгоритм интервью

30. Наследование, полиморфизм и повторное использование кода

Наследование классов — это способ для одного класса расширить другой класс, так что мы можем создать новую функциональность поверх существующей.
-Источник

Учебники

  • 📜 Наследование в JavaScript — Рупеш Мишра
  • 📜 Простое наследование в JavaScript — Дэвид Катухе
  • 📜 JavaScript — наследование, модели делегирования и связывание объектов — NC Patro

31. Паттерны проектирования

Каждый разработчик стремится писать сопровождаемый, читаемый и многократно используемый код. Структурирование кода становится все более важным по мере увеличения размеров приложений. Паттерны проектирования играют решающую роль в решении этой проблемы, обеспечивая организационную структуру для решения общих проблем в конкретных условиях.
-Источник

Учебники

  • 📜 4 паттерна проектирования JavaScript, которые вы должны знать — Деван Патель
  • 📜 JavaScript Design Patterns — руководство для начинающих по мобильной веб-разработке — Soumyajit Pathak
  • 📜 Паттерны проектирования JavaScript — Акаш Пал

32. Частичные приложения, керринг, композиция и трубы

Композиция функций — это механизм объединения нескольких простых функций для создания более сложной функции.
-Источник

Учебники

  • 📜 Использование композиции функций в JavaScript — Rémi
  • 📜 Currying в JavaScript ES6 — Адам Бене
  • 📜 Элегантность композиции и керринга в JavaScript — Прагян Дас

33. Чистый код

Написание чистого, понятного и сопровождаемого кода — это навык, которым должен овладеть каждый разработчик.
-Источник

Учебники

  • 📜 Clean Code Explained — Практическое введение в чистое кодирование для начинающих — freeCodeCamp
  • 📜 Концепции Clean Code, адаптированные для JavaScript — Райан МакДермотт
  • 📜 Практика чистого кода: Как писать чистый код — Тирт Бодавала

Если вы нашли этот список полезным, не забудьте добавить его в закладки и следить за мной, чтобы получать больше материалов, подобных этому.

Eluda

следуйте за мной, чтобы получить бесплатное печенье 🍪️

Элуда
@eludadev

Алоха, веб-разработчики! 👋
Если вам сложно запомнить огромное количество селекторов, знайте, что вы не одиноки.

У меня есть лекарство от этой проблемы. Оно буквально бесплатное. Распечатайте его. Сделайте его фоном своего рабочего стола. Или даже напечатайте ее на футболке. Она ваша навсегда.

18:14 PM — 18 мая 2022

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *