Все
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино и музыка
Развитие
Образование
EdTech
Корп. обучение
Чем различаются var, let и const в JavaScript
На практике разбираемся, чем отличаются var, let и const и когда их использовать.
Обычно для объявления переменных в JavaScript используется var, но иногда можно встретить const или let. Они выполняют одну и ту же функцию (объявляют о создании ячейки в памяти), но работают немного по-разному.
Важно! let и const являются частью ECMAScript 6, который поддерживается не всеми браузерами. Заранее ознакомьтесь с таблицей совместимости.
Области видимости var и let
Главное отличие var и let в том, как они работают с областями видимости. Переменная var, созданная вне функции, действует как глобальная переменная — она доступна из любой части скрипта.
var a = 10;
function func()
{
//Переменная создана глобально, поэтому её можно использовать где угодно
a = 50;
}
func();
//Будет выведено 50
console.log(a);
Если же создать переменную с помощью var внутри функции, то она будет доступна только в этой функции (как локальная переменная):
function func()
{
var a = 10;
}
func();
//Выведет ошибку, потому что переменная a доступна только внутри функции func()
console.log(a);
Также можно создать переменные с одинаковым названием:
var x = 50;
function func()
{
var x = 10;
//Будет выведено 10
console.log(x);
//Будет выведено 50
console.log(window.x);
}
Это используется редко, потому что проще давать переменным уникальные имена, но сама возможность есть.
Что же касается let, то такие переменные доступны только внутри того блока {}, в котором они созданы:
let a = 5;
if(true)
{
let b = 5;
}
//Будет выведено, потому что переменная a объявлена вне какого-либо блока и доступна глобально
console.log(a);
//Вызовет ошибку, потому что переменная b объявлена внутри блока if и доступна только в нём
console.log(b);
Вот как отличается поведение счётчика цикла, если его создавать с помощью var и let:
| var | let |
|---|---|
|
for(var i = 0; i < 5; i++) {} //Переменная i доступна за пределами цикла console.log(i); |
for(let i = 0; i < 5; i++) {} //Переменная i доступна только внутри цикла //Попытка использовать её приведёт к ошибке console.log(i); |
В остальном поведение этих переменных идентично.
Константы в JavaScript
С помощью ключевого слова const создаются константы. Например, физические и математические величины.
const Pi = 3.14;
const c = 299792458;
const g = 9.8;
Попытка изменить значение константы приведёт к ошибке. Поэтому их стоит использовать для хранения тех данных, которые должны оставаться неизменными.
Например, в них можно хранить объекты из DOM:
const content = document.getElementById("content");
Также стоит отметить, что неизменяемым сохраняется сам объект, а не его поля:
const obj =
{
x: 1,
y: 5,
z: 12
};
//Возможно
obj.x = 5;
//Выдаст ошибку
obj = 1;
//Попытка задать другой объект тоже приведёт к ошибке
obj =
{
x: 51,
y: 12,
z: 8
};
Что же касается областей видимости, то const ведёт себя как let.
Заключение
В большинстве случаев достаточно использовать var, но иногда необходимо убедиться, что ваши данные в сохранности — их нельзя изменить извне или в принципе. В этих случаях let и const незаменимы.
Курс
Профессия Fullstack-разработчик на JavaScript
Вы с нуля научитесь разрабатывать полноценные сайты и веб-приложения на JS и изучите один из фреймворков — Vue, React или Angular. Станете ценным сотрудником для любой IT-компании, поймёте, как получить повышение, и сможете зарабатывать больше.
Узнать про курс
