Чем отличается const от let

Переменные: let и const

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

В ES-2015 предусмотрены новые способы объявления переменных: через let и const вместо var .

let a = 5;

let

У объявлений переменной через let есть три основных отличия от var :

Область видимости переменной let – блок <. >. Как мы помним, переменная, объявленная через var , видна везде в функции. Переменная, объявленная через let , видна только в рамках блока <. >, в котором объявлена. Это, в частности, влияет на объявления внутри if , while или for . Например, переменная через var :

var apples = 5; if (true) < var apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // 10 (снаружи блока то же самое)

В примере выше apples – одна переменная на весь код, которая модифицируется в if . То же самое с let будет работать по-другому:

let apples = 5; // (*) if (true) < let apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // 5 (снаружи блока значение не изменилось)

Здесь, фактически, две независимые переменные apples , одна – глобальная, вторая – в блоке if . Заметим, что если объявление let apples в первой строке (*) удалить, то в последнем alert будет ошибка: переменная не определена:

if (true) < let apples = 10; alert(apples); // 10 (внутри блока) >alert(apples); // ошибка!

alert(a); // undefined var a = 5;

С переменными let всё проще. До объявления их вообще нет. Такой доступ приведёт к ошибке:

alert(a); // ошибка, нет такой переменной let a = 5;

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

let x; let x; // ошибка: переменная x уже объявлена

Это – хоть и выглядит ограничением по сравнению с var , но на самом деле проблем не создаёт. Например, два таких цикла совсем не конфликтуют:

// каждый цикл имеет свою переменную i for(let i = 0; i for(let i = 0; i alert( i ); // ошибка: глобальной i нет

for(var i=0; i alert(i); // 10

С переменной let – всё по-другому. Каждому повторению цикла соответствует своя независимая переменная let . Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации. Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче Армия функций.

function makeArmy() < let shooters = []; for (let i = 0; i < 10; i++) < shooters.push(function() < alert( i ); // выводит свой номер >); > return shooters; > var army = makeArmy(); army[0](); // 0 army[5](); // 5

const

Объявление const задаёт константу, то есть переменную, которую нельзя менять:

const apple = 5; apple = 10; // ошибка

В остальном объявление const полностью аналогично let .

Заметим, что если в константу присвоен объект, то от изменения защищена сама константа, но не свойства внутри неё:

const user = < name: "Вася" >; user.name = "Петя"; // допустимо user = 5; // нельзя, будет ошибка

То же самое верно, если константе присвоен массив или другое объектное значение.

константы и КОНСТАНТЫ

Константы, которые жёстко заданы всегда, во время всей программы, обычно пишутся в верхнем регистре. Например: const ORANGE = «#ffa500» .

Большинство переменных – константы в другом смысле: они не меняются после присвоения. Но при разных запусках функции это значение может быть разным. Для таких переменных можно использовать const и обычные строчные буквы в имени.

Итого

• Видны только после объявления и только в текущем блоке.
• Нельзя переобъявлять (в том же блоке).
• При объявлении переменной в цикле for(let …) – она видна только в этом цикле. Причём каждой итерации соответствует своя переменная let .

Переменная const – это константа, в остальном – как let .

Чем отличается const от let

Разница между «var», «let» и «const» в JavaScript

Появление операторов «let» и «const» — одно из важных новшеств ES6. Но чем эти операторы отличаются от уже знакомого всем разработчикам «var»? Наша статья поможет разобраться в этом вопросе.

Веб-разработка
24 нояб. 2020

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

В JavaScript существует два вида области видимости: область действия функции и область действия блока.

Область действия функции

При использовании var переменные имеют функциональную область видимости, поскольку их видимость ограничена функцией. Если вы попытаетесь использовать его вне функции, вы получите сообщение об ошибке:

function myFn() < var foo = 'Hello!'; console.log(foo); // 'Hello!' >console.log(foo); // ReferenceError: foo is not defined

Область действия блока

Блок кода — это код между фигурными скобками в JavaScript.

if (true) < var foo = 'Hello!'; let a = 'itlogia'; const b = 'let's learn!'; console.log(foo); // 'Hello!'; console.log(a); // 'itlogia'; console.log(b); // 'let's learn!'; >console.log(foo); // 'Hello!'; console.log(a); // ReferenceError: a is not defined console.log(b); // ReferenceError: b is not defined

Обратите внимание, что видимость foo не ограничивается блоком if-statement. Однако видимость как a, так и b ограничена для блока кода.

Эта концепция области видимости показывает наиболее заметное различие между var и современными let и const.

Var

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

• Глобальная область видимости — переменная объявлена вне функции.
• Локальная область видимости — доступ к переменной только в рамках определенной функции.

Рассмотрим пример

var a = ‘Hello’; function newFunction()

В этом примере a имеет глобальную область видимости, потому что существует вне функции. А вот область видимости b — локальна. Мы не имеем доступа к переменной b вне функции, в которой она объявлена. Поэтому, если сделаем так, то получим ошибку:

var a = 'Hello'; function newFunction() < var b = 'Hi'; >console.log(b); // error: b is not defined

Мы получили ошибку, поскольку переменная b недоступна вне функции.

Переменные, объявленные при помощи var, могут как объявляться заново, так и обновляться.
Например:

var a = 'Hello'; var a = 'Hello, itlogia!';

— и это не приведет к ошибке.

И вот так мы тоже не получим ошибок:

var a = 'Hello'; a = 'Hello, itlogia!';

Let

Оператор let — это улучшенный вариант var. В отличие от var, let имеет блочную область видимости. Переменная, объявленная в блоке кода при помощи оператора let, доступна только в рамках этого блока кода.

let a = 'Hello'; let b = 4; if(b > 3) < let c = 'Hello, itlogia!'; console.log(c);//'Hello, itlogia!' >console.log(c) // c is not defined

Таким образом, использование переменной c вне ее блока (т. е., за пределами кода, ограниченного фигурными скобками, в котором была объявлена переменная) приводит к ошибке. Произошло это потому, что переменные, объявленные при помощи let, имеют блочную область видимости.

Const

Ключевое слово const — это сокращение от слова «константа». Как и в случае с let, у оператора блочная область видимости, однако переназначить его нельзя.

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

const a = 'Hello'; a = 'Hello, itlogia!';//error : Assignment to constant variable.

const a = 'Hello'; Const a = 'Hello, itlogia!';//error : Identifier 'a' has already been declared

Вследствие этого каждая переменная, объявленная с использованием const, должна быть инициализирована при объявлении.

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

const a =

мы не сможем сделать так:

const a = < words : 'Hello, itlogia!';, number : 'five' >//error : Assignment to constant variable.

а вот так — сможем:

a.message = 'Hello, itlogia!';

Значение a.message обновится без ошибок.

В этой статье мы рассказали о разнице между операторами в «var», «let» и «const» в JavaScript. Советуем самостоятельно протестировать каждую описанную ситуацию, скопировав код из нашей статьи. Так вы закрепите новые знания на практике и поймете тему лучше!

Let vs const — что использовать?

Привет, Хабр! Представляю вашему вниманию перевод статьи «On let vs const» автора Дэна Абрамова.

Мой предыдущий пост содержит такой параграф:

let vs const vs var: Обычно, все что вам нужно, — это let. Если вам нужно запретить перезаписывание переменной, вы можете использовать const. (Некоторые очень педантичны по этому поводу и предпочитают использовать const, когда бывает только одно назначение переменной).

Это утверждение оказалось очень спорным, на Twitter’e и Reddit’e сразу же начались жаркие обсуждения по этому поводу. Похоже наиболее популярное мнение (или по крайней мере, устно высказанное большинством) это то, что следует всегда использовать const и обращаться к let только при необходимости, что может быть обеспечено ESLint правилом prefer-const.

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

Почему предпочитают const

• Четкое правило: Это лишняя нагрузка для мозга, когда вам приходится каждый раз думать, использовать const или же лучше будет let. Правило «Всегда используй const, где это работает» освобождает вас от лишней мороки и оставляет эту задачу для линтера.
• Переназначения могут стать причиной багов: В больших функциях бывает так, что вы можете не заметить, если переменная переназначится, и это может оказаться причиной багов. Особенно в замыканиях. Const дает вам уверенность в том, что вы всегда будете видеть одно и то же значение.
• Понимание мутации: Те, кто только начинает изучать JavaScript, могут неправильно понять принцип работы const, думая что он предотвращает мутацию переменной. Важно понять разницу между мутацией переменной и ее переназначением. Использование const принуждает вас понять и противостоять этому различию на ранней стадии.
• Бессмысленные переназначения: Иногда переназначение переменной не имеет смысла вообще. Например, в React Hooks, значения, которые вы получаете из хука — как useState — больше похожи на параметры. Они идут в одном направлении. Видя ошибку при их назначении, вы раньше узнаете о потоке данных React’а.
• Преимущества исполнения: Есть также редкие заявления о том, что движок JavaScript’а может быстрее исполнять код, где используется const, так как знает, что переменная не может быть перезаписана.

Почему не предпочитают const

• Const теряет свой смысл: Если мы везде будем использовать const, мы потеряем способность понимать, было ли это важно, чтобы что-то не было переназначено.
• Конфуз с иммутабельностью: В каждой дискуссии, где говорят, что нужно всегда использовать const, находятся те, кто путается в вопросе иммутабельности. Это неудивительно, так как обе операции (объявление и переназначение) используют один оператор » javascript»>const a = cond ? b : c

Мое мнение

Я могу использовать любое правило которое используют другие.

Если вам не все равно, используйте линтер, который автоматизирует проверку и исправление, меняя let на const, так что это не потратит ваше время в дальнейшем ревью кода.

И последнее, помните, что линтеры созданы для облегчения разработки. Если какое либо правило докучает вам или вашей команде, просто уберите его. Это будет лучше всего. Учитесь на своих ошибках.

Ссылка на оригинал статьи — On let vs const.

Var, Let, Const — в чем разница?

ES2015 (ES6) принес с собой много новых интересных фич. Теперь на дворе 2020 год, и можно предположить, что многие JavaScript-разработчики уже познакомились с этими фичами и стали их применять.

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

Одна из фич, появившихся в E6, — это добавление let и const , которые можно использовать, чтобы объявить переменную. Вопрос таков: чем они отличаются от старого-доброго var , которым мы пользовались до этого? Если вам это до сих пор неясно, тогда эта статья для вас.

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

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

Область видимости var

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

Переменная var является глобальной, когда объявлена вне какой-либо функции. Это означает, что любая переменная, объявленная через var вне блока функции, доступна для использования во всем окне.

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

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

 var greeter = "hey hi"; 
 
function newFunction() var hello = "hello"; 
>

Здесь переменная greeter — глобальная, поскольку находится вне какой-либо функции, а hello — ограничена функцией. Так что мы не можем обратиться к переменной hello извне данной функции. Поэтому, если попробовать сделать вот так:

 var tester = "hey hi"; 
 
function newFunction() var hello = "hello"; 
> 
console.log(hello); // error: hello is not defined

…на выходе будет ошибка. Это происходит из-за того, что переменная hello недоступна вне конкретной функции.

Переменные var могут быть объявлены повторно или обновлены

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

 var greeter = "hey hi"; 
var greeter = "say Hello instead";

 var greeter = "hey hi"; 
greeter = "say Hello instead";

Поднятие var

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

console.log (greeter);
var greeter = "say hello"

…то это будет интерпретировано так:

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"

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

Проблема с var

Есть одна слабость, которая сопутствует var . Чтобы объяснить ее, я приведу пример ниже:

 var greeter = "hey hi"; 
var times = 4;
 
if (times > 3) var greeter = "say Hello instead"; 
> 
 
console.log(greeter) // "say Hello instead"

Как видно, поскольку times > 3 возвращает значение true, значение переменной greeter переопределяется как “say Hello instead” . Хотя это не проблема, если вы сознательно хотите добиться такого переопределения для greeter . Проблема возникает тогда, когда вы не осознаёте, что переменная greeter уже была определена ранее.

Если вы использовали greeter в других участках вашего кода, вас удивит результат, который получите на выходе. Это наверняка вызовет множество ошибок в вашем коде. Вот почему возникает необходимость в let и const .

let теперь наиболее предпочтительный вариант для объявления переменных. Что неудивительно: let выступает в качестве улучшения объявления через var , и к тому же решает проблему с var , о которой мы только что говорили.

let имеет блочную область видимости

Блок — это фрагмент кода, ограниченный фигурными скобками <>. Всё, что находится внутри фигурных скобок, относится к блоку.

Таким образом, переменная, объявленная в блоке через let, будет доступна только внутри этого блока. Давайте рассмотрим на примере:

 let greeting = "say Hi"; 
let times = 4;
 
if (times > 3) let hello = "say Hello instead"; 
console.log(hello);// "say Hello instead" 
> 
console.log(hello) // hello is not defined

Здесь видно, что попытка использовать hello вне блока (фигурных скобок, в рамках которых переменная была определена) возвращает ошибку. Это происходит потому, что переменные типа let являются блочными.

Переменные let могут быть обновлены, но не объявлены повторно

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

 let greeting = "say Hi"; 
greeting = "say Hello instead";

этот код уже вернет ошибку:

 let greeting = "say Hi"; 
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

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

let greeting = "say Hi"; 
if (true) let greeting = "say Hello instead"; 
console.log(greeting); // "say Hello instead" 
> 
console.log(greeting); // "say Hi"

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

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

Кроме того, поскольку переменная внутри конкретной области видимости может быть объявлена только единожды, проблема, которую мы обсуждали выше относительно var , перестает иметь место.

Поднятие let

Точно так же, как в случае с var , объявления через let перемещаются вверх. Но в отличие от var -переменных, которые инициализируются как undefined , ключевое слово для let не инициализируется. Так что если вы попытаетесь использовать переменную let до того, как она будет объявлена, то получите ошибку обращения к переменной ReferenceError.

Const

Переменные, объявленные через const , сохраняют постоянные значения. Объявления через const имеют некоторое сходство с объявлениями через let .

const имеет блочную область видимости

Точно как и в случае с let , переменные, объявленные через const , могут быть доступны только внутри того блока, где были объявлены.

Переменные const не могут быть ни обновлены, ни объявлены повторно

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

 const greeting = "say Hi"; 
greeting = "say Hello instead";// error: Assignment to constant variable.

 const greeting = "say Hi"; 
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Таким образом, каждое объявление через const должно быть инициализировано в момент объявления.

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

 const greeting = message: "say Hi", 
times: 4 
>

…то, пускай, мы не можем сделать такого:

const greeting = words: "Hello", 
number: "five" 
> // error: Assignment to constant variable.

Мы можем сделать другое:

greeting.message = "say Hello instead";

Это позволит обновить значение greeting.message без того, чтобы получить на выходе ошибку.

Поднятие const

Точно так же, как и let , объявления через const перемещаются вверх, но не инициализируются.

Так что на случай, если вы упустили суть отличий, то вот они вкратце:

1. Переменные, объявленные через var , могут быть глобальными или иметь область видимости в рамках функции; let и const имеют блочную область видимости.
2. var -переменные могут быть как обновлены, так и переопределены внутри области видимости; let -переменные можно обновлять, но не переопределять; const -переменные нельзя ни обновлять, ни переопределять.
3. Со всеми ними осуществляется поднятие наверх области видимости. Но если var -переменные при этом инициализируются как undefined , let и const не инициализируются.
4. В то время как var и let можно объявить, но не инициализировать, const необходимо инициализировать во время объявления.

• Дуэт Markdown и JavaScript (mdjs) — залог отличной документации
• Сравниваем различные способы выполнения HTTP-запросов в JavaScript
• Двоичное дерево поиска: вставка значения с использованием JavaScript