Область видимости переменных в JavaScript

JS код


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

Данные в JS (типы данных) — это, в основном, либо переменные, либо константы. По крайней мере, в JS. Это вообще специфический язык, который предлагает очень интересные особенности. Это касается как самих переменных, так и устройства всего языка в принципе. Но, чтобы не быть голословными, продвинемся по теме дальше.

А в данной статье вы сможете узнать почему CI/CD подход является лучшим средством в проектах где релизы получаются частыми.

Ключевые особенности объявления переменных

Прежде чем ответить себе на какой-либо вопрос, необходимо подойти с изучения матчасти. Надо запомнить два важных правила:

  1. Переменные можно изменять.
  2. Константы остаются прежними.

Технически константы можно переписать, но у программистов JS есть негласное правило, согласно которому константы — это константы. В буквальном смысле этого слова. Они должны сохранять постоянное значение. Если переменные можно изменять, константы остаются такими, как их назначили в самом начале. Всегда. В этой статье мы обсудим различные способы создания этих значений. Это может показаться простой темой, но есть тонкие нюансы при создании и объявлении, которые важно знать.

Что такое переменные?

Переменные в JavaScript — это контейнеры, которые содержат данные многократного использования. До спецификации языка версии ES2015 они объявлялись исключительно с использованием ключевого слова var.

ES2015 — это обновленная версия JS (также известного как ECMAScript). В ES2015 были представлены два других способа объявления переменных. Это “let” и “const”. Let JS — это новая форма объявления, и в большинстве случаев теперь — предпочтительная.

Что такое область видимости переменной в JavaScript?

Область видимости переменных JS ранее в JavaScript была реализована только как глобальная область действия или область действия определенной функции.

Что такое область видимости переменной в JavaScript?

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

Типы областей видимости в JavaScript:

  1. Область действия блока.
  2. Объем функции.
  3. Локальный охват.
  4. Глобальный охват.

Область действия блока: ранее в JavaScript были только глобальная область действия и обычная область действия функции. let и const — два новых важных ключевых слова, которые были введены ES6, и эти два ключевых слова обеспечивают область действия блока в JavaScript. ECMAScript (ES6) 2015 был второй крупной версией JavaScript. К переменным, объявленным внутри блока {}, нельзя получить доступ извне блока.

Переменные, объявленные с помощью ключевого слова var, не могут иметь область видимости блока, и они могут быть объявлены внутри блока {}, и к ним можно получить доступ извне блока.

Область действия функции: JavaScript имеет область действия, и каждая функция создает новую область видимости. Переменные, определенные внутри функции, недоступны извне функции, а переменные, объявленные с помощью var, let и const, очень похожи при объявлении внутри функции.

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

Пример:

// Эта часть кода не может использовать firstName

function myFunction() {
 let firstName = "Krishna";
 // Эта часть кода может использовать firstName
}

Эта часть кода не может использовать firstName

Замыкания для расширения области действия переменной

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

Проще говоря, замыкания позволяют расширить область действия переменной за пределы общих ограничений области действия функций. Мне нравится, как Джереми Кейт описывает замыкания в своей книге Bulletproof Ajax: «Думайте о закрытии как своего рода большом масштабе: шире, чем локальный, но не такой широкий, как глобальный».

Чтобы создать замыкание, вы вкладываете функцию внутрь функции. Эта внутренняя функция имеет доступ ко всем переменным в области видимости своей родительской функции. Это удобно при создании методов и свойств в объектно-ориентированных скриптах. Вот простой пример, демонстрирующий использование закрытия:

function myObject() {
  this.property1 = "value1";
  this.property2 = "value2";
  var newValue = this.property1;
  this.performMethod = function() {
    myMethodValue = newValue;
    return myMethodValue;  	
  };
  }
  var myObjectInstance = new myObject();  
  alert(myObjectInstance.performMethod());

Ключевыми частями сценария являются вложенная анонимная функция, выделенная зеленым цветом, и вызов метода в функции предупреждения (последняя строка). Поскольку метод в предупреждении фактически вызывает вложенную функцию, этот метод может считывать значение переменной с именем newValue, даже если предположить, что эта переменная не входит в область действия анонимной функции или метода.

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

Объектные литералы для передачи необязательных аргументов

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

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

function showStatistics(name, team, position, average, homeruns, rbi) {
  document.write("<p><strong>Name:</strong> " + arguments[0] + "<br />");
  document.write("<strong>Team:</strong> " + arguments[1] + "<br />");

  if (typeof arguments[2] === "string") {
    document.write("<strong>Position:</strong> " + position + "<br />"); 
  }
  if (typeof arguments[3] === "number") {
    document.write("<strong>Batting Average:</strong> " + average + "<br />");
  }
  if (typeof arguments[4] === "number") {
    document.write("<strong>Home Runs:</strong> " + homeruns + "<br />");
  }
  if (typeof arguments[5] === "number") {
    document.write("<strong>Runs Batted In:</strong> " + rbi + "</p>"); 
  }
}
showStatistics("Mark Teixeira");
showStatistics("Mark Teixeira", "New York Yankees");
showStatistics("Mark Teixeira", "New York Yankees", "1st Base", .284, 32, 101);

Вышеупомянутая функция может принимать до 6 аргументов. Первые два аргумента являются обязательными, поэтому внутри функции мы не проверяем их наличие. Последние 4 аргумента не являются обязательными, поэтому мы отображаем их значения, только если они существуют. Мы вызываем функцию 3 раза (последние 3 строки), каждый раз с разным количеством аргументов. Вы можете видеть, что если количество переданных аргументов составляет десятки или больше, код может выглядеть немного беспорядочным, и его будет труднее поддерживать или читать.

Теперь давайте посмотрим на тот же код, использующий объектные литералы для передачи аргументов:

function showStatistics(args) {
  document.write("<p><strong>Name:</strong> " + args.name + "<br />");
  document.write("<strong>Team:</strong> " + args.team + "<br />");
  if (typeof args.position === "string") {
    document.write("<strong>Position:</strong> " + args.position + "<br />"); 
  }
  if (typeof args.average === "number") {
    document.write("<strong>Average:</strong> " + args.average + "<br />");
  }
  if (typeof args.homeruns === "number") {
    document.write("<strong>Home Runs:</strong> " + args.homeruns + "<br />");
  }
  if (typeof args.rbi === "number") {
    document.write("<strong>Runs Batted In:</strong> " + args.rbi + "</p>");
  }
}

showStatistics({
  name: "Mark Teixeira"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees"
});

showStatistics({
  name: "Mark Teixeira",
  team: "New York Yankees",
  position: "1st Base",
  average: .284,
  homeruns: 32,
  rbi: 101
});

Технически этот второй метод передачи аргументов может потребовать немного больше кода, но с большим набором аргументов есть несколько преимуществ. Во-первых, сама функция упрощается, потому что она принимает только один аргумент (args), который представляет собой набор всех значений, переданных из литерала объекта (имя, команда, должность и т. д.).

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

Related posts

Leave a Comment