Код JavaScript: примеры. JavaScript-гайд | OTUS
🔥 Начинаем BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «ELK»
-16%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив "SQL для анализа данных"
-16%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Администратор Linux. Виртуализация и кластеризация Нереляционные базы данных Супер-практикум по использованию и настройке GIT IoT-разработчик Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Код JavaScript: примеры. JavaScript-гайд

Предлагаем вашему вниманию основные концепции языка программирования JavaScript, сопровождаемые примерами кода.

Немного истории

Язык программирования JavaScript появился более 20 лет назад и прошёл за этот период времени довольно большой путь. Когда-то он был скромным инструментом для создания простых анимаций. Сегодня он регулярно попадает в топ-10 рейтинга Tiobe.

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

JavaScript реализует стандарт ECMAScript, в результате чего название версий начинается ES: ES6, ES2018 и т. п. Версии нумеруются по году релиза и имеют порядковый номер. За развитие JavaScript отвечает комитет TC39, причём каждая новая функциональность должна пройти несколько этапов перед её принятием.

Стайлгайды для JavaScript-кода

Существуют соответствующие стайлгайды (от английского словосочетания Style Guide). Они необходимы для того, чтобы код на JavaScript был аккуратным и чистым. По сути, речь идёт о выработанной системе соглашений, которой придерживаются программисты в процессе разработки кода. Среди готовых стайлгайдов можно упомянуть системы соглашений от Google либо AirBnb.

Примеры переменных в JavaScript-коде

Имена функций и переменных в JS должны начинаться с буквы, символа подчёркивания либо $. Кроме того, могут содержаться даже иероглифы либо эмодзи! Что касается идентификаторов, то они регистрозависимы: otus и OTUS – это разные переменные.

Также нельзя применять в качестве имен зарезервированные слова:

1-20219-7c4f0b.png

Чтобы создать переменную, следует использовать одно из 3-х ключевых слов: let, var либо const.

2-20219-d24b7b.png

Какие тут нюансы: • var-переменные обладают свойством хойстинга (поднятия) и имеют контекстную область видимости; • let и const имеют блочную видимость и не поднимаются; • неизменяемость const-переменных повсеместно применяются для обеспечения иммутабельности.

Примеры выражений в JavaScript-коде

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

3-20219-ff2cc6.png

Примитивные типы данных в коде JavaScript

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

4-20219-b36c28.png

Если нужно выполнить конкатенацию строк, подойдёт оператор +:

"Otus " + "courses"

Мы можем заполнить строку символами до определенной длины, сделав это как с начала, так и с конца:

5-20219-67b6a0.png

Уже начиная с версии ES6, для создания строк появился новый синтаксис, который допускает многострочность и интерполяцию выражений:

6-20219-9949cb.png

Примеры логических значений в коде JavaScript

Логические значения false и true применяются в сравнениях, циклах и условиях. Остальные типы данных можно приведены к логическому значению.

7-20219-87325e.png

Кроме того: — null значит, что у переменной нет значения. Собственно говоря, такая концепция есть не только в JavaScript, но и в других языках программирования (nil, None); — undefined значит, что у переменной нет значения, то есть она не инициализирована.

Кстати, функции без директивы return вернут именно undefined. Являются undefined и неинициализированные параметры функций.

Примеры функций в коде на JavaScript

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

8-20219-90f156.png

Согласно концепции языка программирования JavaScript, функции — это объекты, а значит, могут иметь свои методы и свойства. Кроме того, функция может как быть аргументом либо возвращаемым значением другой функции, так и быть помещённой в переменную.

Начиная с версии ES6, функции в JavaScript поддерживают дефолтные параметры:

9-20219-8ae025.png

Причём в списке параметров мы можем оставлять замыкающую запятую:

10-20219-fdda34.png

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

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

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

11-20219-7e9638.png

Кстати, this мы можем установить искусственно посредством методов apply, call, bind:

12-20219-7594c9.png

Когда функцию вызывают не в контексте объекта, то её this равняется undefined.

Стрелочные функции

Они появились в ES6, полностью изменив вид JavaScript-кода. Давайте рассмотрим это на примере, ведь на первый взгляд они довольно просты:

13-20219-19447f.png

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

14-20219-5ad419.png

IIFE и генераторы

Immediately Invoked Function Expressions – это функции, выполняемые сразу после объявления.

15-20219-584dc6.png

Что касается генераторов, то это особенные функции. Мы можем приостановить их работу посредством ключевых слов yield и возобновить позже. В результате мы получаем возможность использовать совершенно новые концепции программирования на JavaScript. Посмотрим на пример кода ниже:

16-20219-6ea660.png

Массивы и объекты в JavaScript

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

Что касается объектов, то в ES2015 объектные литералы получили ряд новых возможностей: — упрощение синтаксиса включения переменных:

17-20219-24223c.png

— прототипы и ключевое слово super:

18-20219-f2aaad.png

— динамические имена свойств:

19-20219-19aa1e.png

На следующем примере JavaScript-кода можно увидеть, как получить ключи и значения объекта:

20-20219-f49145.png

Примеры циклов в коде на JavaScript

Начнём с for:

21-20219-f15b05.png

Теперь посмотрим на пример кода с for-each:

22-20219-2276fd.png

Далее do-while:

23-20219-607e68.png

Естественно, не забудем и про while:

24-20219-5df963.png

Теперь for-in:

25-20219-814839.png

Что касается for-of, то этот цикл успешно сочетает в себе лаконичность метода массивов forEach и возможность прерывания цикла:

26-20219-e9cf9e.png

Что же, на этом всё. Если же вас интересуют продвинутые курсы по JavaScript, милости просим!

JS_970x90-20219-c6e520.jpg

По материалам статьи "JS-гайд: основные концепции JavaScript с примерами кода".

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!