Блог

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

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

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

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

Введение

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

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

Содержание

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

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

Стек вызовов

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

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

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

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

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

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

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

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

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

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

          5. == vs === vs typeof

          == vs === vs typeof

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

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

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

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

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

              Выражение против оператора

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

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

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

                Один из часто используемых шаблонов кодирования с функциями получил причудливое имя: выражение функции с немедленным вызовом. Или более известный как IIFE и произносимый как “iffy”.

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

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

                10. setTimeout, setInterval и requestAnimationFrame

                setTimeout, setInterval и requestAnimationFrame

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

                  11. Движки JavaScript

                  JavaScript двигатели

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

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

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

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

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

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

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

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

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

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

                          15. this, call, apply и bind

                          this, call, apply and bind

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

                          16. new, Constructor, instanceof и Instances (экземпляры)

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

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

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

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

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

                              18. Object.create и Object.assign

                              Object.create и Object.assign

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

                                19. map, reduce, filter

                                карта, сокращение, фильтр

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

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

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

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

                                  21. Замыкание

                                  Закрытие

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

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

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

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

                                    *Функцией высокого порядка называется такая функция, которая принимает функцию как аргумент или возвращает функцию в виде выходного значения.

                                      23. Рекурсия

                                      Рекурсия

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

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

                                      Promise

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

                                        25. Promise

                                        async/await

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

                                          26. async/await

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

                                          Существует специальный синтаксис для более удобной работы с promise, называемый “async/await”. Это удивительно легко понять и использовать.

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

                                            Дорогостоящая операция и нотация Big O

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

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

                                              Алгоритмы

                                              “Что такое Big O Notation?” это очень распространенный вопрос собеседования для разработчиков. Короче говоря, это математическое выражение того, сколько времени занимает запуск алгоритма в зависимости от того, сколько времени занимает ввод, обычно говоря о наихудшем сценарии.

                                                29. Алгоритмы

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

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

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

                                                Шаблоны проектирования

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

                                                  31. Шаблоны проектирования

                                                  Частичные приложения, каррирование, составление и труба

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

                                                    32. Частичные приложения, каррирование, компоновка и конвейер

                                                    Чистый код

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

                                                      33. Чистый код

                                                      Чистый код

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

                                                      Источники для более подробной информации по темам:

                                                      1. codementor
                                                      2. freecodecamp
                                                      3. medium
                                                      4. digitalocean
                                                      5. sitepoint
                                                      6. thatjsdude
                                                      7. hackernoon
                                                      8. itnext

                                                      Понравилась статья?
                                                      Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

                                                      Вас может заинтересовать:

                                                      • Динамические элементы JavaScript для безостановочной загрузки сценариев

                                                        Сценарии JavaScript блокируют загрузку файлов, следующих за ними. Но имеется несколько приемов, предотвращающих это…

                                                      • Добавляем Видео в качестве фона страницы сайта

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

                                                      • Как создать сайт?

                                                        Многие начинающие пользователи интернета задают себе данную фразу. Но не у всех выходит добиться желаемого... Всё связано с различными стереотипами, например, о том, что для создания сайта или личной странички в интернете требуются навыки и знание программирования... Прочитайте статью и создайте свой сайт.

                                                      Наши услуги по созданию сайтов

                                                      Веб дизайн

                                                      Разработка дизайна и создание интернет-сайта.

                                                      Поддержка сайта

                                                      Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

                                                      Готовый дизайн

                                                      Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

                                                      Контекстная реклама

                                                      Настройка и ведение рекламной кампании в Директ