Современные функции JavaScript, которые вы должны использовать каждый день для улучшения разработки

Как работает setState React

От автора: время, когда JavaScript использовалось только для добавления небольших взаимодействий на сайт, давно ушло. Новые стандарты EcmaScript теперь выходят каждый год, принося все больше и больше полезных и мощных функций, а JavaScript больше не используется только для Front-End, так как теперь также можно создавать серверную архитектуру, мобильные, стационарные или IOT-приложения.

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

Let / Const

Поскольку я начал использовать «let» и «const», я никогда больше не использую ключевое слово «var». «let» был представлен как замена для «var». И «let», и «const» ограничены блоками, а «var» — функцией. Это означает, что если мы, например, инициализируем «var» внутри цикла for, оно также будет доступно за его пределами.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Как вы можете видеть, мы объявили переменную animal внутри цикла, но мы все равно можем получить доступ к ней из-за его пределов. Однако, если мы вместо этого используем «let», мы получим ошибку.

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

Кроме того, возможно, вы заметили, что в этих примерах я также изменил «var animals = []» на «const animals = []». Рекомендуется использовать «const», если назначенное значение не должно изменяться в будущем. Итак, если вы объявите его с помощью «var», вы можете изменить его на String, Object, Number и т. д.

Однако, если вы присвоите значение «const» и попытаетесь его изменить, вы получите сообщение об ошибке.

Важно помнить, что даже если вы назначаете объект или массив для «const», вы все равно можете изменять внутренние свойства и значения!

Очень интересной особенностью «let» является то, что каждый раз, когда оно объявляется, создается новое связывание для области. Представьте себе, что вам нужно перебрать какие-то данные и в каждом цикле вам нужно сделать вызов api, а затем использовать значение индекса из цикла в обратном вызове.

В этом случае console.log всегда будет 5. Это связано с тем, что цикл for не ждет завершения вызова api, а когда первый ответ будет возвращен, цикл уже завершен. Вы также можете увидеть это на изображении ниже.

Современные функции JavaScript, которые вы должны использовать каждый день для улучшения разработки

Одним из возможных решений является создание замыкания для каждого цикла, чтобы мы могли сохранить индекс цикла для каждого вызова api. Мы можем использовать Immediately Invoked Function Expression (IIFE), которому передадим индекс. Это функция, которая будет вызывать себя и запускаться немедленно.

Современные функции JavaScript, которые вы должны использовать каждый день для улучшения разработки

К счастью, с «let» нам не нужно это делать. Мы можем просто объявить «i» в цикле с ключевым словом «let» вместо «var», и это решит проблему.

Современные функции JavaScript, которые вы должны использовать каждый день для улучшения разработки

Литералы шаблонов

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

Современные функции JavaScript, которые вы должны использовать каждый день для улучшения разработки

Вместо этого теперь мы можем использовать литералы шаблонов для написания гораздо лучшего и читаемого кода. То, что мы здесь делаем, называется интерполяция строк. Вместо одиночных или двойных кавычек мы используем обратные кавычки, и внутри них мы можем использовать знак доллара с фигурными скобками ${}, чтобы добавить значение из переменной в строку. Благодаря этому наш код становится намного чище и читаемее, а также он может охватывать несколько строк. Просто следите за тем, чтобы не переусердствовать. Иногда по-прежнему лучше просто выполнить обычную конкатенацию строк с переменными.

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

Я все время использую функции стрелок, и, честно говоря, я использую объявление обычной функции только тогда, когда без этого не обойтись. Есть несколько вещей, которые нужно знать о функциях стрелок. Во-первых, это тот факт, что функция стрелки по сравнению с нормальными функциями не имеет лексической области. Это означает, что «this» будет относиться к различным объектам в функциях стрелок и обычных функциях.

В этом случае, как мы видим, что попытка получить доступ к «age» через «this» приведет к ошибке, потому что «this» больше не ссылается на объект «Person», а на функцию getAge. Раньше обычно нам приходилось назначать «this» переменной, например «var self = this», а затем использовать ее в обратных вызовах. Однако, если мы используем стрелочные функции, мы можем получить доступ к свойству age.

Конечно, я знаю, что мы могли бы просто назначить getAge как свойство непосредственно для объекта, и тогда у нас будет доступ к «age», но это было сделано только для демонстрационных целей. Функции стрелок особенно полезны для обратных вызовов и таких функций, как фильтры или карты, при попытке получить доступ к свойству из внешней области.

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Однако, когда мы пытаемся получить доступ к аргументам в стрелочной функции, мы ничего не получим.

Еще одна особенность функций стрелок, которая мне очень нравится — это непосредственное выражение возврата. Мы можем опустить скобки функции и сразу же вернуть значение:

Кроме того, если нам нужно передать только один параметр, мы также можем отбросить скобки:

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

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

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

Параметры по умолчанию

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

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

Мы также можем поместить больше значений по умолчанию или назначить строку, целое число или что-то еще, что нам нужно.

Сокращения свойств

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

Вы можете сделать это короче, написав «dinner» только один раз.

Сокращения свойств очень полезны при деструкции. Деструкция — это извлечение свойств массива или объекта. Например, в приведенном ниже примере мы деструктируем свойство данных из результатов, возвращаемых axios.

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

Вы также можете переименовать деструктируемые свойства:

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

Автор: Thomas Kotowicz

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

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

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

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

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree