#001 JavaScript с Dimos: переменные и константы

Привет 👋 Я Dimos, старший инженер-программист и архитектор программного обеспечения в arconsis. Время от времени я публикую статьи в серии JavaScript with Dimos, где я пытаюсь проанализировать тему JavaScript и сосредоточиться на основных концепциях JavaScript.

В главе «Грамматика JavaScript» мы рассмотрим базовую грамматику JavaScript, объявления переменных и типы данных.

Дорожная карта сообщений главы

Переменные и константы (эта статья)
"Типы данных"

Сегодня, в первой статье этой главы, мы рассмотрим переменные и константы JavaScript, как их инициализировать и использовать, а также их различия.

Переменные JavaScript

Переменная — это просто контейнер для хранения данных и хранения его значения. Например, мы можем использовать переменную для хранения числа или строки:

var str = 'Hello!';

В приведенном выше примере str — это переменная, которую мы используем для хранения текста.

Объявление переменной

Важно знать, как объявлять переменные на каждом языке программирования. Ключевые слова var, let и const используются для объявления переменных в JavaScript. Между ними есть некоторые существенные различия, которые мы проанализируем позже в этом руководстве.

var x = 1;
let y = 2;
const z = 3;

Инициализация переменной

Мы можем использовать оператор присваивания =, чтобы инициализировать переменную и присвоить ей значение. Например:

var num = 3;
let str = 'Hello!';
const isValid = true;
let str2;
str2 = 'Hey!';

В приведенном выше примере num было инициализировано 3 в качестве начального значения. Как мы видим, мы можем объявить и инициализировать переменную одновременно (let str = 'Hello!';) или мы можем сначала объявить ее (let str2;), а затем инициализировать str2 = 'Hey!';.

JavaScript поддерживает объявление несколько переменных в одном предложении, как показано ниже:

let x = 1, y = 2, z = 3;

Переназначение значения переменной

В JavaScript можно изменить значение переменной, как показано ниже:

let x = 1;
console.log(x); // output 1
x = 2;
console.log(x); // output: 2
var y = 'Hello!';
console.log(y); // output: Hello!
y = 'Hey!';
console.log(y); // output: Hey!

Константы JavaScript

Подобно переменным, мы можем объявить константы в JavaScript. Мы можем использовать оператор const (был введен в версии ES6) для создания констант. Например:

const x = 1;

Константы похожи на переменные, за исключением:

объявление и инициализация должны выполняться одновременно.
нельзя переназначить после инициализации.

Например:

const x;  // Uncaught SyntaxError: missing = in const declaration
x = 1;
console.log(x);
const x = 1;
x = 3;  // Uncaught TypeError: invalid assignment to const 'x'
console.log(x);

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

const vehicle = { type : 'car'};
console.log(vehicle.type);  // output: "car"
vehicle.type = 'bike';
console.log(vehicle.type);  // output: "bike"

оператор var

Оператор var определяет переменную с областью действия или с глобальной областью действия (области действия будут обсуждаться в следующей статье). Мы можем опционально присвоить значение переменной, объявленной var. Он не поддерживает область действия на уровне блока, что означает, что переменная, объявленная внутри {…} (например, внутри оператора for или if), не может быть доступна за пределами блока, что потенциально может привести к ошибкам.

var num = 1;
if (num === 1) {
    var num = 2;
    console.log(x); // output: 2
}
console.log(num); // output: 2

a) var находится в области действия функции

Область действия означает, что к переменным, определенным внутри функции, нельзя получить доступ откуда-либо за пределами функции. Например:

function foo() {
    var x = 1;
    function baz() {
        var y = 2;
        console.log(x); // output: 1 (baz() can see outer scope)
        console.log(y); // output: 2
    }
    baz();
    console.log(x); // output: 1 (as x is in same function scope)
    console.log(y); // Uncaught ReferenceError: y is not defined
}
foo();

Другой пример:

var animal = 'dog';
function foo() {
    animal = 'cat';
    console.log(animal); // output: "cat"
}
console.log(animal); // output: "dog"
foo();
console.log(animal); // output:"cat"
// output: "dog", "cat", "cat"

b) var поднимается

Переменные, объявленные var, обрабатываются перед выполнением любого кода в процессе, известном как «подъем с undefined в качестве начального значения. Если мы объявим переменную в любом месте кода, используя var, это то же самое, что объявить ее вверху. Следовательно, может показаться, что var используется до его объявления, что называется подъемом». Другими словами,термин подъем означает, что все объявления var и function подтягиваются к началу кода, когда код бегать.

animal = 'dog';
var animal;

// ...is equivalent (hoisting):

var animal;
animal = 'dog';
console.log(foo); // output: undefined
var foo = 1;
console.log(foo); // output: 1

Или другой пример:

function foo() {
  console.log(baz); // output: undefined
  var baz = 3;
  console.log(baz); // output: 3
}
// ...is equivalent (hoisting):

function foo() {
  var baz;
  console.log(baz); // output: undefined
  bar = 3;
  console.log(baz); // output: 3
}

Рекомендация. Лучше всегда объявлять переменные в верхней части их области действия, чтобы было ясно, что является их областью действия.

c) var можно повторно объявить

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

var x = 1;
console.log(x); // output: 1
var x = 3;
console.log(x); // output: 3

d) var можно переназначить

Переменным, объявленным var, можно переназначить новое значение. Например:

var x = 1;
console.log(x); // output: 1
x = 3;
console.log(x); // output: 3

пусть заявление

Оператор let был представлен в версии ES6. Операторы let и var имеют некоторое сходство, но их главное отличие состоит в том, что let объявляет переменную блока, и хотя ее можно переназначить, нельзя переназначить. объявлен. Кроме того, по сравнению с операторами var, переменная, объявленная с использованием let, не будет поднята.

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

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

let x = 3;
if (x === 3) {
    let x = 6;
    console.log(x); // output: 6
}
console.log(x); // output: 3

Другой пример:

function foo() {
    let x = 3;
    function baz() {
        let x = 6;  // different variable
        console.log(x);  // output: 6
    }
    baz();
    console.log(x);  // output: 3
}
foo();
console.log(x); // output: ReferenceError: x is not defined (defined in function scope, cannot be accessed outer)

б) пусть нельзя поднять

Переменные, объявленные оператором let, нельзя поднять, и ожидается, что будет выброшено ReferenceError, по сравнению с переменными, объявленными var. Например:

console.log(x); // Uncaught ReferenceError: can't access lexical declaration 'x' before initialization
let x = 1;

c) let не может быть повторно объявлен

Если мы попытаемся повторно объявить ту же переменную с помощью let в той же функции или в том же блоке, то ожидается, что будет выброшено SyntaxError. Например:

if (true) {
    let x = 1;
    let x = 3; // Uncaught SyntaxError: redeclaration of let x
}

Или другой пример:

function foo() {
    let x = 3;
    let x = 6; // Uncaught SyntaxError: redeclaration of let x
}
foo();

Также, если мы объединим операторы var и let, то можно получить SyntaxError, потому что var поднимается на вершину блока. Как мы можем видеть ниже, переменная, объявленная var, введет повторное объявление x , так как не имеет блочной области видимости и будет «вытягиваться» поверх кода из-за «подъема».

let x = 3;
{
    var x = 5; // Uncaught SyntaxError: redeclaration of let x, Previously declared
}

d) let можно переназначить

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

let x = 1;
console.log(x); // output: 1
x = 3;
console.log(x); // output: 3

оператор константы

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

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

Оператор const позволяет нам определять переменные с блочной областью действия. Это означает, что переменные ограничены рамками оператора block или выражения, в котором они используются, а также в любом содержащемся >подблоки.

const x = 3;
if (x === 3) {
    const x = 6;
    console.log(x); // output: 6
}
console.log(x); // output: 3

Или другой пример:

function foo() {
    const x = 3;
    function baz() {
        const x = 6;  // different variable
        console.log(x);  // output: 6
    }
    baz();
    console.log(x);  // output: 3
}
foo();
console.log(x); // output: ReferenceError: x is not defined (defined in function scope, cannot be accessed outer)

b) const нельзя поднять

Переменные, объявленные оператором const, нельзя поднять, и ожидается, что будет выброшен ReferenceError, по сравнению с переменными, объявленными var. Например:

console.log(x); // Uncaught ReferenceError: can't access lexical declaration 'x' before initialization
const x = 1;

c) const не может быть повторно объявлен

Если мы попытаемся повторно объявить ту же самую переменную с помощью const в той же функции или в том же блоке, то ожидается, что будет выброшено SyntaxError. Например:

if (true) {
    const x = 1;
    const x = 3; // Uncaught SyntaxError: redeclaration of let x
}

Или другой пример:

function foo() {
    const x = 3;
    const x = 6; // Uncaught SyntaxError: redeclaration of let x
}
foo();

Также, если мы объединим операторы var и const, то можно получить SyntaxError, потому что var поднимается на вершину блока. Как мы видим ниже, переменная, объявленная var, введет повторное объявление x , так как не имеет блочной области видимости и будет «вытягиваться» поверх кода из-за «подъема».

const x = 3;
{
    var x = 5; // Uncaught SyntaxError: redeclaration of let x, Previously declared
}

d) const нельзя переназначить

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

const x = 1;
console.log(x); // output: 1
x = 3;
console.log(x); // output: TypeError: invalid assignment to const 'x'

Примечание. Если мы знаем, что значение переменной не изменится, предпочтительнее использовать const вместо var или let.

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

Подпишитесь на Twitter здесь!
Подпишитесь на Github здесь!

#001 JavaScript с Dimos: переменные и константы

Дорожная карта сообщений главы

Переменные JavaScript

Объявление переменной

Инициализация переменной

Переназначение значения переменной

Константы JavaScript

оператор var

пусть заявление

оператор константы

До встречи в следующий раз!

Рекомендации

материалы по теме:

Новые материалы

Коллекции публикаций по глубокому обучению

Представляем: Pepita

Советы по коду Laravel #2

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)

3 способа решить квадратное уравнение (3-й мой любимый) -

Создание VR-миров с A-Frame

Демистификация рекурсии

Метки