Современный JavaScript

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

Javascript является самым популярным языком скриптов, который используется как в стороне сервера, так и на стороне клиента. Его основателем является ECMA (Европейская ассоциация производителей компьютеров), которая отвечает за определение стандартов для языков скриптов. В основном он используется при разработке веб-приложений. В первые годы javascript не играл очень важной роли в разработке, поскольку имел некоторые недостатки. Но после 2015 года ECMA смогла внести некоторые изменения и выпустила новую версию javascript, и она оказалась очень хорошей. После этого каждый год они обновляют javascript и эти обновленные версии javascript, известные как современный javascript. Давайте углубимся в суть этих изменений.

let

Если вы используете ключевое слово let в своем коде для определения переменной, это означает, что эта переменная видна только в ее области видимости. Область видимости означает, что если вы определяете ее внутри метода, она принадлежит только этому конкретному методу, если вы используете ее внутри цикла for, эта переменная принадлежит только этому циклу, и если вы определяете переменную внутри класса, эта переменная принадлежит только этому классу, вне его области, вы не можете получить доступ к этой переменной. См. следующий пример кода.

Пример 01: — переменная без ключевого слова let

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Выходные значения:

Пример 02: — переменная с ключевым словом let

Выходные значения:

Мы используем переменную p как let, а затем она выдает ошибку ReferenceError, говоря, что “p не определено”. Это очень важно, когда вы пишете длинный код. Поскольку код длинный, может быть возможность использовать то же имя для другой переменной. В таком сценарии вы можете получить неожиданные результаты из-за изменения переменной и код может стать очень запутаным. Поэтому в подобной ситуации очень важно определить переменную с помощью let. Это гарантирует, что переменная не видна за пределами ее области видимости.

const

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

Пример 01:

Выходные значения:

Доступ извне запрещён.

Пример 02: — Когда вы используете переменную const без ее инициализации

Выходные значения:

Бросается исключение SyntaxError, говоря, что “Missing initializer in const declaration”. Это означает, что если мы определяем переменную с помощью ключевого слова const, она должна быть инициализирована в тот же момент.

Пример 03: Присвоение значения переменной const после ее объявления

Выходные значения:

Если мы пытаемся присвоить значение переменной const после ее объявления, получим ошибку TypeError с упоминанием “Assignment to constant variable”. У const есть возможность защитить переменную. Но это не защищает массив или объект. См. cледующий пример.

Пример 04:

Выходные значения:

Если использовать город как массив – так работать не будет.

Пример 05: Присвоение значений массиву const

Выходные значения:

Сonst не защищает массив.

Стрелочная функция =>

Правило 01: В современном JS обозначение => ведет себя как ключевое слово функции. То, что делает =>, связывает функцию и тело функции без ключевого слова. У нее есть несколько способов определения функции, и следующий пример представляет каждый тип.

Пример 01:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Выходные значения:

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

Правило 02: — функция и стрелочная функция не работают одинаково. У них разные схемы работы. В следующем примере показано, как ключевое слово this ведет себя в этих двух ситуациях.

Выходные значения:

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

Object

Правило 01: — object в Javascript позволяет разработчикам определять только ключ или значение внутри объекта. Пара ключ-значение не требуется. Вместо этого вы можете вызвать другой модуль, чтобы присвоить ему значение. Посмотрите следующий пример, и тогда вы сможете получить четкое представление об этом.

Пример 01:

Выходные значения:

Теперь вы также можете увидеть выходное значение для SQRT2. Оно получает значение от внешнего модуля под названием «Math».

Правило 02: — вы можете создать динамическое свойство внутри объекта в современном JS. Динамическое свойство означает, что вы можете оставить placeholder в качестве ключа, если вы точно не знаете, как ключ ведет себя во время выполнения.

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

Пример 02:

Выходные значения:

Теперь вы можете увидеть порядок вывода: ‘ready’ для placeholder -а, который мы устанавливаем во время разработки. Вы можете изменять значение ключа, присваивая различные значения placeholder -у. (Попробуйте let status = «service», и вы увидите разницу).

freeze

Правило 01: — Как видно из названия, он может заморозить объект. Это означает, что freeze избегает изменения значения объекта. Посмотрите следующий пример, и вы увидите разницу.

Пример 01: — Давайте посмотрим на простой пример кода без ключевого слова freeze.

Выходные значения:

Меняется значение объекта.

Пример 02: — Давайте посмотрим на тот же пример кода с методом object.freeze().

Выходные значения:

Значение объекта не изменилось. Применение ключевого слова freeze предполагает, что у вас есть один объект, который проходит через множество сервисов, и вы не хотите изменять значение этого объекта, поэтому вы можете использовать Object.freeze().

Правило 02: — Убедитесь, что если вы используете freeze в многоуровневом объекте, оно замораживает только значения первого уровня. Объясним это на примере.

Представьте, какой будет результат. Давайте проверим, совпадает ли ваш результат с реальным.

Мы замораживаем только имя, но изменилось значение t1. Причина в том, что t1 — это переменная внутреннего или второго уровня.

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

Оставайтесь в безопасности и узнавайте новое!!!

Автор: Thilini Weerasinghe

Источник: thiliniweerasinghe09.medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.