Код
#Руководства

Чем различаются var, let и const в JavaScript

На практике разбираемся, чем отличаются var, let и const и когда их использовать.

 vlada_maestro / shutterstock

Обычно для объявления переменных в 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-компании, поймёте, как получить повышение, и сможете зарабатывать больше.

Узнать про курс
Обучение: Профессия Fullstack-разработчик на JavaScript Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована