Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

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

2 <h2>Немного истории</h2>

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

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

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

6 <h2>Стайлгайды для JavaScript-кода</h2>

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

8 <h2>Примеры переменных в JavaScript-коде</h2>

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

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

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

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

13 <h2>Примеры выражений в JavaScript-коде</h2>

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

15 <h2>Примитивные типы данных в коде JavaScript</h2>

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

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

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

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

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

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

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

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

24 <h2>Примеры функций в коде на JavaScript</h2>

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

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

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

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

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

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

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

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

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

34 <h4>Стрелочные функции</h4>

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

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

37 <h4>IIFE и генераторы</h4>

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

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

40 <h2>Массивы и объекты в JavaScript</h2>

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

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

43 <p>- прототипы и ключевое слово super:</p>

44 <p>- динамические имена свойств:</p>

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

46 <h2>Примеры циклов в коде на JavaScript</h2>

47 <p>Начнём с<strong>for</strong>:</p>

48 <p>Теперь посмотрим на пример кода с<strong>for-each</strong>:</p>

49 <p>Далее<strong>do-while</strong>:</p>

50 <p>Естественно, не забудем и про<strong>while</strong>:</p>

51 <p>Теперь<strong>for-in</strong>:</p>

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

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

54 <p><em>По материалам статьи "<a>JS-гайд: основные концепции JavaScript с примерами кода</a>".</em></p>