Введение

Добро пожаловать в ваше путешествие в мир JavaScript! Если вы только начинаете, некоторые концепции могут показаться вам немного сложными. Но не волнуйтесь! В этом сообщении блога мы упростим две фундаментальные концепции: переменные и типы данных. Думайте об этом как о строительных блоках ваших знаний JavaScript.

Теперь возникает вопрос: Что такое переменные?

Переменные

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

Итак, в JavaScript есть три способа объявить переменную: используя var, let или const.

var oldToyBox = 'doll'; 
let toyBox = 'teddy bear';
const favoriteToy = 'race car';

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

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

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

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

Таким образом, основное различие между var, let и const в JavaScript заключается в их области действия и характеристиках переназначения.

"вар"

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

Одна ключевая особенность var заключается в том, что он «поднят». Это означает, что объявления var перемещаются в верхнюю часть своей области видимости во время выполнения. Следовательно, вы можете использовать переменную var до ее объявления, и она вернет undefined.

//Here is an example

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

function test() {
  console.log(myVar); // undefined
  var myVar = 10;
  console.log(myVar); // 10
}

test();
console.log(myVar); // 5

" позволять "

Ключевое слово let имеет блочную область видимости, что означает, что переменная, объявленная с помощью let, доступна в пределах ближайшего набора фигурных скобок {}. Если он объявлен вне какого-либо блока, он имеет глобальную область действия.

let не поднимается, как var. Если вы попытаетесь использовать переменную let до ее объявления, JavaScript выдаст ошибку ReferenceError.

//Here is an example

console.log(myLet); // ReferenceError: myLet is not defined
let myLet = 5;
console.log(myLet); // 5

if (true) {
  console.log(myLet); // 5
  let myLet = 10;
  console.log(myLet); // 10
}

console.log(myLet); // 5

"постоянный"

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

const myConst = 5;
console.log(myConst); // 5
myConst = 10; // TypeError: Assignment to constant variable.

Однако важно отметить, что const объекты и массивы не являются неизменяемыми (вы скоро узнаете, что это такое, если будете читать эту статью впервые. ПРОПУСТИТЕ этот абзац и перейдите к типам данных а затем вернуться к этому параграфу). Их свойства или элементы можно изменить, но саму переменную (ссылку на объект или массив) нельзя переназначить:

const myObj = { name: 'John' };
console.log(myObj); // { name: 'John' }
myObj.name = 'Jane';
console.log(myObj); // { name: 'Jane' }
myObj = { name: 'Jack' }; // TypeError: Assignment to constant variable.

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

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

Вот как мы создаем (или «объявляем») переменную в JavaScript:

let toyBox;

В этом примере toyBox — наша переменная. Сейчас это пустая коробка - мы еще не положили в нее игрушку.

Чтобы положить игрушку (или ценность) в коробку, мы используем оператор присваивания (=):

toyBox = 'teddy bear';

Теперь наша переменная toyBox содержит строку 'teddy bear'. Мы также можем объявить переменную и одновременно присвоить ей значение:

let toyBox = 'teddy bear';

теперь мы должны узнать, что такое типы данных.

Типы данных

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

  • Число. Это похоже на числовое значение, которое вы можете поместить в поле. Например, в коробке может быть указано количество имеющихся у вас яблок.
let apples = 10; // The "apples" box contains the number 10
  • Строка: это как фрагмент текста или буква, которую вы можете положить в коробку. Например, поле может содержать ваше имя.
let myName = "John"; // The "myName" box contains the string "John"
  • Логическое значение. Это похоже на простой индикатор "да/нет" или "истина/ложь", который вы можете поместить в поле. Например, коробка может содержать информацию о том, идет ли дождь на улице.
let isRaining = false; // The "isRaining" box contains the boolean false
  • Объект: это как маленькая коробка, которую вы можете поместить в свою большую коробку. Эта меньшая коробка может содержать несколько предметов. В JavaScript объект может содержать несколько значений в паре с именами.
let myCar = { 
  make: 'Toyota', 
  model: 'Corolla', 
  year: 2020 
}; // The "myCar" box contains an object with details about my car
  • Массив. Это похоже на набор слотов внутри вашей коробки, где каждый слот может содержать элемент. В JavaScript массив может содержать несколько значений в упорядоченном списке.
let myBooks = ['Moby Dick', 'The Great Gatsby', '1984']; // The "myBooks" box contains an array of book titles
  • Null: это похоже на пустую коробку. Переменная с нулевым значением представляет собой коробку, в которой ничего нет.
let nothingHere = null; // The "nothingHere" box is empty
  • Не определено: это похоже на коробку, которой даже не существует. Переменной, которой не присвоено значение, является undefined.
let iDontExist; // The "iDontExist" box doesn't exist
console.log(iDontExist); // undefined

В JavaScript тип данных в переменной (тип элемента в поле) может меняться, поскольку JavaScript является языком с динамической типизацией. Это означает, что вы можете поместить число в поле, а позже вы можете очистить поле и вставить, например, строку.

Итак, если вы внимательно прочитали эту статью, у вас могла возникнуть путаница: в чем разница между 0, null или undefined в переменной?
Этот вопрос возник у меня в самый первый раз, когда я изучал JavaScript. Если вы уже поняли, в чем разница, тогда Кодос и есть упрощенное объяснение этого вопроса для таких же, как я!

воспользуемся аналогией коробок (переменных) и игрушек (значений).

1.0: Представьте, что у вас есть коробка (которая похожа на переменную), вы заглядываете внутрь нее и обнаруживаете, что она пуста. Но тут ваш друг говорит вам: «Нет, там что-то есть, это невидимая игрушка под названием «Зеро». Это похоже на переменную со значением 0. Может показаться, что там ничего нет, но на самом деле что-то есть – 0.

let box = 0;  // The box has an invisible toy called 'Zero'.

2. null: Теперь предположим, что у вас есть другой ящик, и вы абсолютно уверены, что он пуст, потому что вы удалили из него все. Это похоже на переменную со значением null. Это значит, что у тебя есть коробка, но в ней ничего нет. Даже не невидимая игрушка.

let anotherBox = null;  // This box is definitely empty. Nothing is in here.

3. undefined: наконец, предположим, что вы видите коробку на расстоянии, но вы не уверены, есть ли что-то внутри нее, потому что еще не проверили ее. Это похоже на переменную undefined. У вас есть коробка, но вы не знаете, что в ней, потому что не смотрели.

let mysteryBox;  // What's in here? We don't know yet!

Подводить итоги:

  • 0 похож на невидимую игрушку.
  • null это как пустая коробка.
  • undefined это как иметь коробку, но не знать, что в ней.

Заключение

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

По мере того, как вы будете практиковаться и играть с этими концепциями, вы будете чувствовать себя более комфортно с ними. Удачного кодирования!

Разнообразный

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

Символ

Представьте, что у вас есть ящик для игрушек, в котором у каждой игрушки есть свое особое место, которое подходит только для этой игрушки. На это место нельзя положить другую игрушку; он зарезервирован только для этой игрушки. Symbol в JavaScript похоже на это. Каждый символ уникален и может использоваться как специальный идентификатор свойств в объекте. Даже если описание символа такое же, как у другого, это все равно разные символы, точно так же, как две игрушки могут выглядеть одинаково, но иметь свои особые места в коробке с игрушками. Symbol — это уникальный и неизменяемый тип данных, который часто используется для идентификации свойств объекта. Чтобы создать символ, вы пишете Symbol() с дополнительной строкой в ​​качестве его описания.

let toy1 = Symbol('teddy bear');
let toy2 = Symbol('teddy bear');
console.log(toy1 === toy2); // This will log false

В приведенном выше коде, несмотря на то, что toy1 и toy2 являются символами с описанием «плюшевый мишка», они являются разными символами, точно так же, как у двух плюшевых мишек были бы разные места в коробке с игрушками.

Символы обычно используются в качестве уникальных идентификаторов свойств объекта. Когда вы используете символы в качестве ключей свойств, эти свойства не подлежат перечислению (не учитываются в цикле) и не конфликтуют с другими свойствами в объекте, гарантируя, что каждое свойство уникально и не будет случайно перезаписано или использовано.

BigInt

Теперь представьте, что у вас есть коробка для игрушек, но это не коробка для игрушек обычного размера. Это гигантский ящик для игрушек, который может вместить, казалось бы, бесконечное количество игрушек. BigInt в JavaScript похож на эту гигантскую игрушечную коробку. Он может содержать чрезвычайно большое целое число, намного большее, чем может точно представить обычный тип данных Number в JavaScript. Таким образом, BigInt — это специальный числовой тип данных в JavaScript, который может обрабатывать целые числа произвольной длины. BigInt создается добавлением n в конец целого числа или вызовом функции BigInt().

let bigInteger = 1234567890123456789012345678901234567890n;
let bigInteger2 = BigInt("1234567890123456789012345678901234567890");

console.log(bigInteger); // 1234567890123456789012345678901234567890n
console.log(bigInteger2); // 1234567890123456789012345678901234567890n

В приведенном выше коде bigToyBox — это BigInt, представляющий очень большое целое число. Точно так же, как наша гигантская коробка для игрушек может вместить очень большое количество игрушек. Это может быть полезно при работе с очень большими числами, такими как те, которые используются в криптографии или для больших идентификаторов, где обычный JavaScript Number не сможет точно представить значение из-за ограничений в его точности.