Константы. Ключевые слова LET CONST VAR.

Переменные

Что такое переменная? Переменная - это такой контейнер(коробка) которая предназначена для хранения значений информации, для последующего использования в коде. Мы берем коробку, даем имя, чтобы потом нам было легче ее найти среды хлама. В коробку помещаем некое значение (информацию), таким образом можем потом работать с этой информацией. (Кстати значение в переменных, информацию в нашей коробке, мы можем изменять по мере написания команд)

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

Ключевое слово для объявления переменной let это как я уже сказал команда для того, чтобы js понял, что мы хотим создать нашу коробку. после объявления "let", мы обязательно должны поставить пробел, придумать и записать имя (тоесть дать имя для нашей коробки); Перед тем, как вы дадите какое то имя, нужно знать о некоторых правилах, как правильно нужно давать имена коробкам(т.е. нашей переменной). Имя переменной может содержать только: буквы, лучше латинского алфавита, цифры и символы $ и _ При этом первый символ не должен быть цифрой. Верное объявление:

let age; 
let info123;
let $size;
let _color;

Вот примеры как правильно записывать имена переменных.

Неверное объявление:

let 123info; 
let my-age;

И вот примеры как нельзя записывать их, здесь есть и + и - js, что консоль даст вам ошибку если переменная будет записана не правильно. Но минус, если совсем тупить, можно не сразу ее заметить, но есть + того, что мы сможем увидеть в какой строке кода у нас ошибка, поэтому будет легче понять проблему.

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

Если ваша переменная содержит несколько слов в имени, принято использовать стиль " camelCase", по другому - ГорбатыйРегистр, либо ВерблюжийРегистр. Здесь понятно и так из названия, что горб регистр, обозначает, что каждое новое слово, пишется с большой буквы, КРОМЕ ПЕРВОГО СЛОВА, без пробелов, например:

let adaptiveDivHeader;

Вот несколько примеров, на всякий, как лучше не использовать:

//Вместо
let s;
let sdkljghfasdfkgl;
let leftsidebarsize;

//Лучше писать
let size;
let age;
let leftSidebarSize;

И не забываем с предыдущего урока, что регистр так же имеет значение!

let sidebarsize;
let sideBarSize;

эти переменные, будут обе работать, но для js это будут абсолютно разные имена переменных.

В качестве имен переменных нельзя использовать так называемые зарезервированные имена, например:

let let;
let break;
let for;

Список зарезервированных переменных есть в отдельном блоке.

Присвоение значений переменных

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

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

//Объявление без значения
let boxDick;

//Присвоение значения
boxDick = 'freelance';

//Объявление переменной и присвоение значения
let kapibara = 'theOnlyOne';

Теперь попробуйте создать какую то переменную, дать ей имя, присвоить ей какое то значение и вывести это на вашей страничке. +1 будет если сделаете через консоль +2 если выведете окно на вашей страничке с вашей переменной.

стоит обратить внимание на мой первый пример где идет объявление без значения, сдесь мы даем объявление через let, но далее let нам повторно уже не нужно писать, мы просто начинаем писать наши инструкции без команды let Оператором кстати присвоения служит знак = об операторах и различных типах данных наример о сроках уже позже об этом поговорим на след лекциях. Как правильно вообще читается наша инструкция? let с английского переводится как - "пусть" тоесть на последнем примере это будет : Пусть капибара будет Единственной;

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

Объявление нескольких переменных

Здесь есть несколько способов, как можно присвоить несколько значений, все они используются

//ОБЪЯВЛЕНИЕ НЕСКОЛЬКИХ ПЕРЕМЕННЫХ
//В строку через запятую
let myName = 'Алексей', myAge = 22, myMessage = 'Пробуй до последнего, и рано или поздно жизнь даст отпор!';

//Через запятую с новой строки
let myName = 'Алексей', 
    myAge = 22, 
    myMessage = 'Пробуй до последнего, и рано или поздно жизнь даст отпор!';


//Отдельно
let myName = 'Алексей';
let myAge = 22;
let myMessage = 'Пробуй до последнего, и рано или поздно жизнь даст отпор!';

Понятное дело, что в одну строку не очень читабельно писать, поэтому это редко очень используется.

Смена значений переменных

Смена значения наших переменных можно сделать прям по ходу нашего кода или выполнения нашей инструкции. Тоесть взять из нашей коробки ненужное и добавить чтото новое

//ИЗМЕНЕНИЕ ЗНАЧЕНИЯ ПЕРЕМЕННОЙ
let myAge = 36;
myAge = 18;
console.log(myAge);

Как вы видите на примере, мы написали переменную, дали ей значение, а дальше уже по ходу работы просто изменили значение уже без присваивания, т.е. без команды let. Ну а дальше просто вывели как мы это делали уже с вами неоднократно. Было бы круто изменить так же возраст :)

Так же есть еще одна не менее важная штука: Передача значений

let myAge = 36;
let myNewAge = 18;

//Копируем значение переменной myNewAge
//в переменную myAge

myAge = myNewAge;
console.log(myAge);

У нас есть 2 переменные с разными значениями, далее мы записываем одну переменную и присваиваем ей имя другой переменной.

Use Strict

Как мы помним из прошлой лекции, про строгий режим, это один из самых отличных примеров, где строгий режим US влияет на переменные. Раньше переменные объявлялись вот так:

// "use strict" строгий режим отключен

myAge = 36;
console.log(myAge);

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

Но если мы с вами включим строгий режим, то сразу увидим ошибку в консоли. US используется в 90% проектов, потому что это как мы помним с прошлых пар, это включение нового ES. и если вы разрабатываете современный проект, он 100% будет у вас включен.

тут уже мы должны включить ключевое слово.

Область видимости объектов

Объявление переменных в разных частях кода, имеет большое значение, это так называется область. Эта область видимости переменных в js и будет называться блок, как в html у нас использовался div

//Пример блока инструкций
function testBlock() {
	let myAge = 36;
	console.log(myAge);
}

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

вывести в консоль наш блок "testBlock()"

Теперь, если я попробую вывести нашу переменную вне нашего блока, то у нас будет вот так:

onsole.log(myAge);

Т.е. Как мы видим Переменная не видна за пределами блока и консоль выдает ошибку.

Один из важных примеров, когда у нас есть 2 переменные с одинаковыми названиями, но одна переменная записана в блоке, а другая записана вне.

//Переменные внутри и за пределами блока
let myAge = 36;

function testBlock() {
	let myAge = 18;
	console.log(myAge); //Вывод переменной
}
testBlock();

console.log(myAge); //Вывод переменной

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

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

console.log(myAge);
let myAge = 18;

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

стоит так же учесть, что одно и то же имя нелья использовать вне блока.

//Повторное объявление переменной
//в рамках одногоблока запрещено
let myAge = 36;
let myAge = 15; //Ошибка - переменная уже объявлена

В то же время, в цикле можно использовать одно имя

//В то же время внутри блока (например цикла) проблем нет
for (let i = 0; i < 3; i++) {
	//Тут своя переменная i
	console.log(i);

}
for (let i = 0; i < 3; i++) {
	//И тут своя переменная i
	console.log(i);
}

Мы обязательно поговорим на счет блоков более подробнее

Константы

Константа - это переменная, но ее нет возможности ее изменить(почти)

Как бы логично не звучало, чтобы объявить константу мы используем ключевое слово const (т.е. constant - постоянный)

const myAge = 22;
myAge = 18; //Нельзя изменить константу

Как я уже говорил главное отличия константы от переменной, ее нельзя изменить в последствии. В остальном это одинаковые команды. Единственное различие имена констант принято ПИСАТЬ В ВЕРХНЕМ РЕГИСТРЕ. а слова разделяют нижнем подчеркиванием. Есть еще одно но, как я уже говоил, константы не меняются, ноо почти.

//Смена значений в константе
//Объект с данными
const userProfile = {
	name: 'Алексей',
	age: 22,
	message: 'Пробуй до последнего, и рано или поздно жизнь даст отпор!'
}
console.log(userProfile);

//Далее я меняю значение одного из полей объекта
userProfile.age = 18;
//Ошибки нет, данные изменились
console.log(userProfile);

На данном примере видно, что мы смогли изменить значение. Речь идет как раз таки про это. Мы не можем изменить тип данных константы, а об изменении значении внутри. сами типы данных мы позже пройдем. пока на примере мы видим создание константы, где мы создали для него блок значений переменных, далее выводим. А вот потом, мы меняем с вами значение одно из полей нашей константы, как видим в консоле, ошибки у нас нет. Тоже самое сработает со всем.

Ключевое слово VAR

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

/Использование переменной до её объявления

"use strict"

age = 35;
console.log(age);

var age;

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

function testBlockLet() {
	let myAgeLet = 36;
}
testBlockLet();

//Переменная НЕ видна за пределами блока
//console.log(myAgeLet);

function testBlockVar() {
	var myAgeVar = 36;
}
testBlockVar();

//Переменная НЕ видна за пределами блока
console.log(myAgeVar);

Второе различие касается области видимости переменных. как мы знаем если объявить за пределами блока имя, которое использовалось только с блоке, js выдаст ошибку. c var работает тоже самое, НО, с if он начнет работать и за пределами, когда в то же время let будет выдавать ошибку.

if (true) {
	let sizeLet = 50;
}
//Переменная НЕ видна за пределами блока
//console.log(sizeLet);
if (true) {
	var sizeVar = 50;
}
//Переменная ВИДНА за пределами блока
console.log(sizeVar);

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

Т.е.

let userName = 'Фрилансер по жизни';

// ... некий код c использованием userName ...

userName = 36;

// ... некий код c использованием userName ...

userName = 'Живи, а работай в свободное время!';

// ... некий код c использованием userName ...

// ????????????

Вот на примере мы используем нашу переменную и каждый раз меняем ей значене

Не зря я давал пример на счет коробки, представим опять же, одну бутылку стеклянную, где вы заливаете каждый раз разные жидкости, например воду, масло алкоголь и т д. уже и так логичнр, что в будущем будем забываи для чего вообще используется у нас бутылка и что в ней сейчас налито. так же здесь, мы будем уже забывать, для чего мы используем данну переменную, как она используется и т д, код станет очень трудно читабельным поэтому менять переменные не рекомендовано, для разных типов данных, но при одинаковых , например "userAge" можно использовать одну переменную. Современные брузеры отлично оптимизируют js, даже более того использование разных перменных для разных значений помогает движку в бразуере оптимизировать код.

//ДОМАШКА
1) Придумай имя переменной для хранения цвета
	глаз пользователя сайта
2) Объяви две переменных - user и userName.
	Присвой значение "Вася" переменной userName.
	Скопируй значение переменной userName в переменную user.
	Выведи в консоль переменную user. Результат должен быть Вася

3) Напиши какой вариант либо варианты записаны НЕ верно?
//Вариант №1
let user = 'Вася' let age = 36

//Вариант №2
let myage = 36;

//Вариант №3
const BLOCK_SIZE = 14 + 50;

//Вариант №4
const BLOCK_HEIGHT = 100;

//Вариант №5
if (true) {
	var size = 15;
}
console.log(size);