JavaScript везде. Миллионы веб-страниц построены на JavaScript, и это никуда не денется, по крайней мере, на данный момент. С одной стороны, HTML и CSS придают стиль веб-страницам, но с другой стороны, именно магия JavaScript делает вашу веб-страницу живой. Сегодня этот язык не ограничивается только вашим веб-браузером. Вы также можете использовать его для серверных приложений. Разве не здорово использовать один язык как для клиентских, так и для серверных приложений?
Согласно опросу разработчиков Stack Overflow 2019, Javascript — язык программирования № 1. Этот язык широко используется 95% всех веб-сайтов, которые вы можете проверить здесь. Будь то небольшой стартап или большая компания, большинство из них работает над каким-либо веб-сайтом или приложением, которое требует хорошего знания этого языка. Для javascript существует множество фреймворков и библиотек. Эти фреймворки и библиотеки можно легко изучить, если вам понятны основы работы с javascript. Многие концепции сбивают с толку и подавляют разработчиков, но хорошее знание этих концепций поможет вам в будущем. Фреймворки и библиотеки приходят и уходят, но основы всегда остаются неизменными. Если основы понятны, легко создать любое приложение и изучить любую структуру и библиотеки. Кроме того, это поможет вам и на собеседовании. Давайте обсудим некоторые из основных концепций javascript, которые важно изучить любому разработчику javascript.
1. Область применения
Объём означает доступ к переменным. К какой переменной у меня есть доступ во время выполнения кода? В javascript по умолчанию вы всегда находитесь в корневой области, то есть в области окна. Область видимости — это просто рамка с границей для переменных, функций и объектов. Эти границы накладывают ограничения на переменные и определяют, есть ли у вас доступ к переменной или нет. Это ограничивает видимость или доступность переменной для других частей кода. Вы должны чётко понимать эту концепцию, потому что она помогает разделить логику в коде, а также улучшает читаемость. Область действия можно определить двумя способами…
- Local Scopeразрешает доступ ко всему в пределах границ (внутри поля)
- Global Scope- это всё, что выходит за рамки (нестандартно). Глобальная область видимости не может получить доступ к переменной, определённой в локальной области видимости, поскольку она заключена из внешнего мира, за исключением случаев, когда вы её возвращаете.
Пример:
Приведённый ниже код выдаст вам ошибку, потому что «имя» определено в пределах (локальной области) функции showName (). У вас не может быть доступа к этой переменной вне функции.
Теперь взгляните на приведённый ниже код и посмотрите, как вы можете получить доступ к переменной name, определённой в локальной области.
2. IIFE (выражение немедленного вызова функции)
Как следует из названия, IIFE — это функция в javascript, которая немедленно вызывается и выполняется, как только она определена. Переменные, объявленные в IIFE, не могут быть доступны из внешнего мира, и таким образом вы можете избежать загрязнения глобальной области. Таким образом, основная причина использования IIFE — немедленное выполнение кода и обеспечение конфиденциальности данных.
3. Подъём
Многие разработчики получают неожиданные результаты, когда не понимают концепцию подъёма в javascript. В javascript вы можете вызвать функцию до того, как она будет определена, и вы не получите ошибку «Uncaught ReferenceError». Причиной этого является подъём, когда интерпретатор javascript всегда перемещает переменные и объявление функции в верхнюю часть текущей области (области функции или глобальной области) перед выполнением кода. Давайте разберёмся с этим на примере.
Пример: взгляните на приведённый ниже код.
Теперь, что произойдёт, если мы вызовем нашу функцию до того, как объявим её (с подъёмом)
Приведённый выше код не выдаёт ошибки, и вы получаете вывод «му» в консоли. Это подъём в javascript.
Пример 2:
var a = 5;
console.log (5);
вывод: // 3
Приведённый выше код с подъёмом даст вам тот же результат.
а = 5;
console.log (5);
var a;
вывод // 5
4. Закрытие
Замыкание — это просто функция внутри другой функции, которая имеет доступ к внешней переменной функции. Это определение звучит довольно просто, но настоящая магия создаётся с помощью прицела. Внутренняя функция (закрытие) может обращаться к переменной, определённой в её области видимости (переменные, определённые в её фигурных скобках), в области видимости её родительской функции и глобальных переменных. Здесь вам нужно помнить, что внешняя функция не может иметь доступа к внутренней переменной функции (мы уже обсуждали это в концепции области видимости). Давайте возьмём пример и разберёмся с ним лучше.
Пример:
В приведённом выше примере внутренняя функция second () — это замыкание. Эта внутренняя функция будет иметь доступ к переменной greet, которая является частью области видимости внешней функции first (). Здесь родительская область не будет иметь доступа к переменной дочерней области ’name’.
Теперь вопрос в том, зачем нам изучать замыкания? Какая от этого польза? Замыкания используются, когда вы хотите расширить поведение, такое как передача переменных, методов или массивов от внешней функции к внутренней функции. В приведённом выше примере second () расширяет поведение функции first (), а также имеет доступ к переменной greet.
Javascript не является чистым объектно-ориентированным языком, но вы можете добиться объектно-ориентированного поведения с помощью замыканий. В приведённом выше примере вы можете рассматривать const ’newFunc’ как объект, имеющий свойство ’greet’ и ’second ()’ как метод, как в языке ООП.
Здесь вы должны заметить, что после выполнения оператора first () переменные внутри функции first () не будут уничтожены (даже если у неё есть оператор return) из-за закрытий, поскольку область видимости здесь сохраняется, а дочерняя функция всё ещё может получить доступ к свойствам родительской функции. Таким образом, замыкания можно описать простыми словами, как запуск функции, выполнение функции. Он никогда не будет выполняться снова, но он будет помнить, что есть ссылки на эти переменные, поэтому дочерняя область всегда имеет доступ к родительской области.
5. Обратные вызовы
В javascript обратный вызов — это просто функция, которая передаётся другой функции в качестве параметра и вызывается или выполняется внутри другой функции. Здесь функции необходимо дождаться выполнения другой функции или возврата значения, и это создаёт цепочку функций (когда X завершается, затем выполняется Y, и это продолжается). Это причина, по которой обратный вызов обычно используется в асинхронной операции javascript для обеспечения синхронной возможности.
Пример:
Обратите внимание, что в приведённом выше примере приветствие передаётся в качестве аргумента (обратного вызова) функции processUserName. Перед выполнением функции «приветствие» она ожидает, пока сначала выполнится событие «processUserName».
6. Обещания
Мы понимаем концепцию обратного вызова, но что произойдёт, если в вашем коде будут обратные вызовы внутри обратных вызовов внутри обратных вызовов, и это будет продолжаться. Ну, эта рекурсивная структура обратного вызова называется «адом обратного вызова» и обещает помочь решить такого рода проблемы. Обещания полезны в асинхронной операции javascript, когда нам нужно выполнить две или более операций подряд (или обратный вызов цепочки), где каждая последующая функция запускается по завершении предыдущей. Обещание — это объект, который через некоторое время в будущем может создать одно значение, либо разрешённое значение, либо причина, по которой оно не разрешено (отклонено). По данным developer.mozilla «Обещание — это объект, представляющий окончательное завершение или отказ асинхронной операции. По сути, обещание — это возвращаемый объект, к которому вы прикрепляете обратные вызовы, вместо того, чтобы передавать обратные вызовы в функцию». Обещания решают проблему «ада обратных вызовов», который представляет собой не что иное, как рекурсивную структуру обратных вызовов (обратные вызовы внутри обратных вызовов внутри обратных вызовов и т.д.).
Обещание может быть в трёх возможных состояниях;
- Выполнено: после успешного завершения операции.
- Отклонено: когда операция не удалась.
- В ожидании: исходное состояние, ни выполнено, ни отклонено.
Давайте обсудим, как создать обещание в javascript на примере.
Пример:
Рассмотрим приведённый выше код для примера обещания, предполагающего выполнение операции isNameExist асинхронно. В этом обещании аргументы объекта как две функции разрешаются и отклоняются. Если операция прошла успешно, что означает, что ’isNameExist’ равно ’true’, тогда она будет разрешена и отобразит вывод «Имя пользователя существует», иначе операция будет неудачной или отклонена, и будет отображён результат «ошибка!». Вы можете легко выполнять операции цепочки в обещаниях, где первая операция будет выполнена, а результат первой операции будет передан второй операции, и это будет продолжаться.
7. Асинхронный режим и ожидание
Остановитесь и подождите, пока что-то не разрешится. Async & await — это просто синтаксический сахар поверх Promises, и, как и обещания, он также предоставляет способ поддерживать асинхронную работу более синхронно. Таким образом, в javascript асинхронная операция может выполняться в различных версиях…
- ES5 -> Обратный звонок.
- ES6 -> Обещание.
- ES7 -> асинхронный и ожидающий.
Вы можете использовать Async / await для выполнения запроса Rest API, когда вы хотите, чтобы данные полностью загружались перед их отправкой в представление. Для Nodejs и программистов браузеров async / await — отличное синтаксическое улучшение. Это помогает разработчику реализовать функциональное программирование на javascript, а также увеличивает читаемость кода.
Пример:
const showPosts = async () => {
const response = await fetch (’https://jsonplaceholder.typicode.com/posts’);
const posts = ждать ответа.json ();
console.log (сообщения);
}
showPosts ();
Ниже показано, когда вы запустите этот код в своей консоли.
Чтобы уведомить JS о том, что мы работаем с обещаниями, нам нужно заключить await в функцию async. В приведённом выше примере мы (а) ждём двух вещей: ответа и сообщений. Прежде чем мы сможем преобразовать ответ в формат JSON, нам нужно убедиться, что мы получили ответ, иначе мы можем преобразовать ответ, которого ещё нет, что, скорее всего, вызовет ошибку.
