Урок 37. Область видимости JavaScript: введение и блоки

На тридцать седьмом уроке учебника JS для начинающих мы начнем говорить об области видимости (Scope). Важной идеей в программировании является область. Область действия определяет, где переменные могут быть доступны или на которые можно ссылаться. В то время как некоторые переменные могут быть доступны из любой точки программы, другие переменные могут быть доступны только в определенном контексте.

Вы можете думать о масштабах, как вид ночного неба из вашего окна. Каждый, кто живет на планете Земля, находится в глобальном масштабе звезд. Звезды доступны во всем мире. Между тем, если вы живете в городе, вы можете увидеть городской горизонт или реку. Горизонт и река доступны только локально в вашем городе, но вы все равно можете увидеть звезды, которые доступны по всему миру.



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

Блоки и область применения

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

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

Блок кода может быть функцией, как это:

const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // blue 
};

Обратите внимание, что тело функции на самом деле является блоком кода.

Обратите внимание на блок в операторе if:

if (dusk) {
  let color = 'pink';
  console.log(color); // pink
};

На следующих нескольких уроках мы увидим, как блоки определяют область действия переменных.

Упражнения к уроку

1. Объявите переменную const с именем city, равную 'New York City'. Эта переменная будет существовать вне блока.
2. Под переменной city создайте функцию с именем logCitySkyline.
3. Внутри тела функции logCitySkyline() объявите другую переменную, используя let skyscraper, и установите ее равной «Empire State Building».
4. Внутри функции добавьте оператор return, например так:
   
   

   return 'The stars over the ' + skyscraper + ' in ' + city;
   

5. Под функцией logCitySkyline() используйте console.log(), чтобы вывести значение logCitySkyline() на консоль. Вы заметите, что функция logCitySkyline () может получить доступ к обеим переменным без каких-либо проблем. На следующем уроке мы рассмотрим, почему предпочтительнее иметь одну переменную вне блока, а другую - внутри блока.