Что такое var в javascript

Так что скобки вокруг функции – это трюк, который позволяет объяснить JavaScript, что функция была создана в контексте другого выражения, а значит, что это Function Expression: ей не нужно имя и её можно вызвать немедленно.

Помимо круглых скобок существуют и другие способы сообщить JavaScript, что мы имеем в виду Function Expression:

// Способы создания IIFE (function() < alert("Круглые скобки вокруг функции"); >)(); (function() < alert("Круглые скобки вокруг всего выражения"); >()); !function() < alert("Выражение начинается с логического оператора НЕ"); >(); +function() < alert("Выражение начинается с унарного плюса"); >();

Во всех перечисленных случаях мы объявляем Function Expression и немедленно запускаем его. Ещё раз отметим: в настоящее время необходимости писать подобный код нет.

Итого

Существует 2 основных отличия var от let/const :

1. Переменные var не имеют блочной области видимости, они ограничены, как минимум, телом функции.
2. Объявления (инициализация) переменных var производится в начале исполнения функции (или скрипта для глобальных переменных).

Есть ещё одно небольшое отличие, относящееся к глобальному объекту, мы рассмотрим его в следующей главе.

Эти особенности, как правило, не очень хорошо влияют на код. Блочная область видимости – это удобно. Поэтому много лет назад let и const были введены в стандарт и сейчас являются основным способом объявления переменных.

Переменные JavaScript var, let и const (в чем отличие и когда использовать)?

Начиная с редакции Javascript ES6 у нас появилась возможность объявлять переменные с помощью let и const , в дополнение к var .

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

В конце статьи будет ссылка на видео версию материала!

Переменные var Можно Обновлять и Переопределять.

Давайте посмотрим, чему равно значение переменной amount , которое мы получаем в логах console.log :

1var amount = 100; 
2 console.log(amount); 
3 // получаем 100 
4 
5amount = 200; 
6 console.log(amount); 
7 // получаем 200

В данном примере значение переменной amount было обновлено значением 200. Мы также можем добавить слово var (случайно или намеренно) к переменной amount и тем самым переопределить ее:

1var amount = 100; 
2 console.log(amount); 
3 
4 // переопределяем переменную var 
5 var amount = 200; 
6 console.log(amount);

В логах отобразятся те же значения: 100 и 200. Проблема заключается в том, что мы не получим сообщения об ошибке, создавая вторую переменную с тем же названием в той же области видимости.

Область Видимости Переменной var – Функция.

Это означает, что мы можем "изолировать" переменную var , если создадим ее внутри какой-либо функции function()<> .

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

Рассмотрим следующий пример.

Создадим переменную amount внутри функции getAmount и выведем в console.log ее значение:

1function getAmount()  
2 var amount = 100; 
3 console.log(amount); 
4 // получаем 100 
5 > 
6 getAmount();

В этом случае результатом console.log будет значение нашей переменной amount (100);

Что если мы выполним console.log после вызова функции getAmount() ?

1function getAmount()  
2 var amount = 100; 
3 > 
4 getAmount(); 
5 console.log(amount); 
6 // ошибка ReferenceError

В этом случае мы получим сообщение об ошибке “amount is not defined”, так как переменная amount находится внутри области видимости функции getAmount .

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

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

1var amount; 
2 function getAmount()  
3 amount = 100; 
4 > 
5 getAmount(); 
6 console.log(amount); 
7 // получаем 100

Функции помогают нам упорядочить код и предотвратить “вытекание” переменных в глобальную область видимости.

Давайте рассмотрим еще один пример.

Запустите указанный код в консоли браузера:

1var weight = 500; 
2 if (weight > 100)  
3 var kilograms = weight; 
4 console.log(`Вес = $kilograms>`); 
5 // Вес = 500 
6 >

Здесь мы присваиваем значение переменной weight переменной kilograms , при условии, что значение weight больше 100. Переменная kilograms находится внутри условия if .

Теперь, если мы в консоли напишем название переменной kilograms и нажмем enter – мы получим ее текущее значение, которое ‘живет’ в глобальном объекте window .

Проблема в том, что мы используем переменную kilograms внутри нашего условия if и не хотим делать ее доступной в глобальной области видимости.

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

Здесь нам на помощь приходит ES6 с возможностью объявлять переменные с помощью let и const .

Как работают let и const?

В отличие от var , область видимости let и const не функция, а блок , то есть сюда попадают как функции, так и любые другие элементы с фигурными скобками.

Если в нашем примере объявить переменную kilograms с помощью let или const , то она не будет доступна за пределами блока if () .

1var weight = 500; 
2 if (weight > 100)  
3 let kilograms = weight; 
4 console.log(`Вес = $kilograms>`); 
5 // Вес = 500 
6 > 
7 
8 console.log(kilograms); 
9 // ошибка - ReferenceError

Отлично, благодаря использованию let (либо const ), наша переменная kilograms не “вытекает” в глобальный контекст!

Основное отличие let от const , это то, что переменные, созданные с помощью let можно обновлять.

Как работает let?

Теперь давайте разберемся как создавать переменные с помощью let .

Имеется следующий код:

1const car = 'tesla'; 
2 let speed = 60; 
3 let fine = false;

Попробуем обновить значение speed путем повторного декларирования:

1const car = 'tesla'; 
2 let speed = 60; 
3 let fine = false; 
4 
5 let speed = 80; 
6 // Ошибка

В консоли получаем ошибку о том, что переменная уже была объявлена ранее - 'speed' has already been declared .

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

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

Рассмотрим такой пример:

1const car = 'tesla'; 
2 let speed = 80; 
3 let fine = false; 
4 
5 if (speed > 60)  
6 let fine = true; 
7 > 
8 
9 console.log(fine); 
10 // false

Если мы выведем в console.log переменную fine , мы получим значение false .

Мы не получаем сообщения об ошибке! Причина заключается в том, что в этом примере у нас 2 разные переменные fine .

Обе переменные находятся в разных областях видимости:

• let fine = false – глобальная область видимости window
• let fine = true – внутри блока if

Если мы создадим наши переменные с помощью var , то в console.log получим значение fine равное true .

Как Правильно Обновлять Переменные let ?

Обновление переменной, созданной с помощью let происходит следующим образом:

1const car = 'tesla'; 
2 let speed = 60; 
3 let fine = false; 
4 
5speed = 100;

Если мы попытаемся таким же образом обновить переменную car , то получим ошибку:

1const car = 'tesla'; 
2 let speed = 60; 
3 let fine = false; 
4 
5car = 'nissan'; 
6 // TypeError

Важно!

Некоторые начинающие разработчики ошибочно предполагают, что свойства объекта, созданного с помощью const также нельзя обновлять.

1const car =  
2 name: 'Tesla', 
3 color: 'white', 
4 >;

Мы можем поменять любое из свойств объекта car :

1car.name = 'nissan'; 
2car.color = 'black';

Либо добавить новое свойство:

1car.age = 5;

Но если мы попытаемся повторно объявить саму переменную car , то получим ошибку “ TypeError: Assignment to constant variable.”:

1const car =  
2 name: 'Tesla', 
3 color: 'white', 
4 >; 
5 
6car =  
7 name: 'chevrolet', 
8 >; 
9 // TypeError

Таким образом мы не сможем обновить переменную car , присвоив ей новое значение.

В каких случаях использовать let, а в каких const?

Общее правило такое - если вам требуется переменная, значение которой будет обновляться – используйте let , для всего остального – const . По умолчанию, я создаю все свои переменные с помощью const . Если вижу, что переменную потребуется обновлять - меняю ее на let .

Видео версия статьи доступна здесь: Видео версия

Методы объектов JS: Как проверить объект JavaScript на пустоту?

Объект Date: Текущая Дата и Время в Javascript

Популярные статьи

• Задачи JavaScript для начинающих
• Типы данных в JavaScript
• Как проверить объект JavaScript на пустоту?
• Обработчики Событий в JS
• Деструктуризация в Javascript
• Массивы Javascript: перебирающие методы
• Операторы Spread и Rest в Javascript
• Объект Date: Текущая Дата и Время в Javascript
• Переменные JavaScript var, let и const

JavaScript var

Создайте переменную varname и присвойте ей значение "Вольво":

var carName = "Вольво";

Больше примеров "Попробуйте сами" ниже.

Определение и использование

Оператор var объявляет переменную.

Переменные - это контейнеры для хранения информации.

Создание переменной в JavaScript называется "объявлением" переменной:

var carName;

После объявления переменная пуста (она не имеет значения).

Чтобы присвоить значение переменной, используйте знак равенства:

carName = "Вольво";

Вы также можете присвоить значение переменной при ее объявлении:

var carName = "Вольво";

Для получения дополнительной информации о переменных прочтите учебник JavaScript Переменные и JavaScript Масштаб.

Поддержка браузера

Синтаксис

var varname = value;

Значения параметров

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

• Имена переменных должны начинаться с буквы
• Имена переменных также могут начинаться с $ и _
• Имена переменных чувствительны к регистру (y и Y - разные переменные)
• Зарезервированные слова (например, ключевые слова JavaScript) не могут использоваться в качестве имен переменных

Технические детали

Еще примеры

Пример

Создайте две переменные. Назначьте число 5 к x и 6 к y. Затем отобразите результат x + y:

var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;

Пример

Вы можете объявить много переменных в одном операторе.

Начните оператор с var и разделите переменные запятой:

var lastName = "Doe",
age = 30,
job = "carpenter";

Пример

Использование переменных в циклах:

var text = "";
var i;
for (i = 0; i < 5; i++) text += "Это число таково " + i + "
";
>

Связанные страницы

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.