Как и зачем кушаем переменные

Переменная – это 'именованный контейнер' который хранит в себе определенные значения(данные). Мы можем использовать переменные для хранения любых данных - числа, строки, объекты, функции и так далее. Для объявления переменных существует три директивы(Ключевые слова):

let;
const;
var;

Просто прописываем после них имя переменной и она готова.

let a;
const b;
var c;

Для присваивания в переменную используем оператор присваивания. Выглядит он как знак равенства в математике ' = '.
Но в js и многих других языках, это знак присваивания.

let a = 1; 
const b = 2;
var c = 3;
console.log(a,b,c) // 1 2 3

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

let a = 1; 
const b = a;
console.log(b) // 1

Что бы перезаписать переменную пишем ее имя и присваиваем нужное значение.

let a = 10;
a = 15;
console.log(a); // 15

Область видимости переменных

Область видимости - это определенный предел(рамки) в которых могут действовать наши переменные. Если мы просто в потоке кода объявим переменную, это будет глобальная переменная и доступ к ней будут иметь все.

Глобальная видимость

'use strict'
// это наш js файл
let a = 1;
const b = 2;
var c = 3;

function sum () {
return a + b + c;
}
console.log(sum()) // 6

Функция sum имела доступ ко всем переменным a,b,c и если будет цикл или условие, то они тоже будет иметь к ним доступ. Они доступны из любого места программы. По возможности минимизируем использовние глобальных переменных. Их использование нарушает инкапсуляцию, приводит к коллизии в коде и проблемам с модулями.

Локальная область

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

'use strict'
{            // помещаем переменные в блок кода
let a = 1;
const b = 2;
var c = 3;
}
function sum () {
return a + b + c;
}
console.log(sum()) // будет ошибка 'is not defined'. Программа не найдет эти переменные.

И так мы подходим к различиям переменных и их поведению в этих самых блоках кода.

Различия между переменными

let; // Это современный способ объявления переменной.
var; // устаревший способ, всегда будет встречаться в старом коде
const // Это неизменная переменная(константа) - ее значение не менятся.

Разница между let и var:

Var:

var x = 2; // глобальная переменная 'x'

{
    var x = 1; // локальная переменная 'x' в блоке кода {}
}

console.log(x); // будет 1 var перезаписала себя!

Область видимости переменных var ограничивается либо функцией, либо, скриптом если она глобальная.

if(true) { //  у нас есть некое правдивое условие.
    var hi = 'hi'; // внутри блока кода есть переменная hi
}

console.log(hi); // выводим ее вне блока и получаем строку hi
//(видимость var не ограничена условиями, циклами или другими блоками, кроме функции)

Используем функцию:

function f1 () { // есть некая функция f1
    var hi = 'hi' // внутри так же переменная hi
}

console.log(hi); // теперь будет ошибка('hi' is not defined), у нас к ней нет доступа.

let:

let y = 2; // глобальная переменная 'y'

{
    let y = 1; // локальная переменная 'y'
    console.log(y); // будет 1
    
}
console.log(y); // будет 2

У let область видимости ограничивается любыми блоками кода { }. Будь то цикл, условие или функция.

if(true) { //  
    let hi = 'hi';  // Теперь везде используем let
}

console.log(hi); // ошибка('hi' is not defined)

Используем функцию:

function f1 () {
    let hi = 'hi' 
}

console.log(hi); // ошибка ('hi' is not defined)

Пример работы const(Константа):

const str = 'я строка' // объявили переменную
str = 'нет, это я строка' // пытаемся поменять значение
console.log(str) // Assignment to constant variable.
// выдает ошибку, так как мы пытаемся переписать константу

Константу мы не можем менять, у неё фиксированое значение. Но! В javaScript прямых констант не бывает. Создадим объект через const

const obj = {
    a:10  // внутри укажем свойство со значением.
}
obj.a = 5; // перепишем его
console.log(obj.a) // 5

Мы не можем изменить obj, но можем изменять - a внутри константы - obj Так как - a не является константой. Так будет с массивами и другими объектными значениями.
В остальном const работает также как и let.

Имена переменных

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

const MY_VARIABLE = 1;

JavaScript чуствителен к регистру. Это две разные переменные:

let anime = 'gavno'
let Anime = 'gavno'

В js есть ограничение для имён. Имя может содержать буквы, цифры и символы $ или _.
Примеры допустимых имён:

let hello;
let hello123;
let hi$;
let $_;

Так же первый символ не должен быть цифрой. Если нужно использовать несколько слов, то используем верблюжью нотацию(Это когда каждое слово после предыдущего начинается с заглавной буквы). Пример:

let userName;
let animeGovno;
let iPoshytil;
let vsemPrivetItMe;

Примеры неправильных имён переменных:

let 2gays; //  не может начинаться с цифры
let hi-hi; // дефис '-' не разрешён в имени