Переменные (Variable) в JavaScript
1. Что такое Переменная (Variable)?
Одна переменная (variable) это "расположение памяти" (Memory location) которая используется программой для хранения значений. Название переменной называется идентификатором (identifier).
Название переменной должно следовать по правилу, ниже являются правила названия переменной:
- Название переменной не должно совпадать с ключевыми словами (keyword).
- Название переменной может содержать буквы (alphabets) или цифры, но не начинается с цифр.
- Название переменной не должно содержать пробелы (white space), или специальные знаки, кроме нижней черты (underscore) (_) и знака доллара ($).
2. Объявить переменную
Объявление переменной является нужным, так как вам нужно это сделать перед тем как использовать ее. Синтаксис ES5 использует ключевое слово var для объявления переменной. ES6 добавляет 2 новых ключевых слова это let & const чтобы объявить переменную.
// Declare variables:
var a1;
console.log(a1); // undefined
var a2 = 100;
console.log(a2); // 100
var a3, a4;
var a5, a6 = 200;
console.log(a5); // undefined
console.log(a6); // 200
var a7= 100, a8 = 300;
let b1;
console.log(b1); // undefined
let b2 = "Hello";
console.log(b2); // Hello
const c = 100;
console.log(c); // 100
block
Блок (block) является набором команд расположенных в "фигурных скобках" (Curly brackets) { }.
let
Ключевое слово let используется для объявления переменной с диапазоном блока (block scope), это значит данная переменная будет распознаваться программой в том блоке или в подблоках, но не распознается программой вне блока, который определил его.
if(true) {
let a = 200;
console.log(a); // 200
}
// Program will ignore this statement:
console.log(a);
Если вы используете ключевое слово let чтобы определить 2 переменные с одинаковыми названиями, одна переменная объявляется в родительском блоке, другая переменная определяется в подблоке, программа будет их считать 2-мя разными переменными.
let i = 1000;
let j = 2000;
if(true) {
i = 100; // Assign new value to 'i'
let j = 200; // A new variable (***)
console.log("Test1: " + i + " : " + j); // Test1: 100 : 200
}
console.log("Test2: "+ i + " : " + j); // Test2: 100 : 2000
var
Ключевое слово var используется для объявления переменной, данная переменная имеет диапазон (scope) шире по сравнению с переменной let. Она распознается программой внутри блока, который определил ее, в подблоках, даже распознается вне блока, который определил ее.
if(true) {
var a = 200;
console.log(a); // 200
}
console.log(a); // 200
Если вы объявляете 2 переменные с одинаковыми названиями с ключевым словом var, одна переменная объявлена в родительском блоке, другая переменная в подблоке, программа будет считать эти 2 переменные одинаковыми (Одно расположение в памяти).
var i = 1000;
var j = 2000;
if(true) {
i = 100; // Assign new value
var j = 200; // Assign new value
console.log("Test1: " + i + " : " + j); // Test1: 100 : 200
}
console.log("Test2: "+ i + " : " + j); // Test2: 100 : 200
Переменные объявленные с ключевым словом var в одной функции будут распознаваться программой в той функции, она не будет распознаваться вне функции.
// A function
var test = function() {
var a = 200;
console.log(a); // 200
}
// Call function.
test();
console.log(a); // Not work!!
const
Ключевое слово const используется для объявления константы (constant). При объявлении константы вам нужно всегда прикрепить к ней значение. Но вы не можете прикрепить новое значение для данной переменной. Примечание: Как и переменная let, переменная const имеет диапазон блока (block scope).
// Declare a constant with a value
const greeting = "Hello";
// Assign new value to 'greeting'
greeting = "Hi"; // ==> Error!!
// Declare a constant without a value
const i ; // ==> Error!!
Переменная может быть объявлена с ключевым словом const, она будет константой в определении вы не сможете ей прикрепить значение, но она не является неизменной (imutable), вы все так же можете изменить ее property (свойства).
Смотрите пример ниже, переменная объявлена с ключевым словом const, ее значение это объект со многими property (свойствами). Вы можете прикрепить новое значение property (свойствам) данного объекта.
// Declaring a constant is an object
const person = {
name: "Clinton",
gender : "Female"
};
console.log(person.name); // Clinton
// Can assign new values to properties of const object.
person.name = "Trump";
person.gender = "Male";
console.log(person.name); // Trump
// ** Error! (Cannot assign new value to const variable).
person = {
name : "Trump";
}
+ const: Object.freeze()
Метод Object.freeze() зафиксировать (freeze) объект, вы не сможете поменять или прикрепить новое значение для своих property (свойств).
Object.freeze()
// Declaring a constant is an object
const person = {
name: "Clinton",
gender : "Female"
};
console.log(person.name); // Clinton
Object.freeze(person); // Freeze object 'person'.
person.name = "Trump";
console.log(person.name); // Clinton
Pуководства ECMAScript, Javascript
- Введение в Javascript и ECMAScript
- Быстрый старт с Javascript
- Диалоговое окно Alert, Confirm, Prompt в Javascript
- Быстрый запуск с JavaScript
- Переменные (Variable) в JavaScript
- Битовые операции
- Массивы (Array) в JavaScript
- Циклы в JavaScript
- Руководство JavaScript Function
- Руководство JavaScript Number
- Руководство JavaScript Boolean
- Руководство JavaScript String
- Заявление if/else в JavaScript
- Заявление Switch в JavaScript
- Обработка ошибок в JavaScript
- Руководство JavaScript Date
- Руководство JavaScript Module
- Функция setTimeout и setInterval в JavaScript
- Руководство Javascript Form Validation
- Руководство JavaScript Web Cookie
- Ключевое слово void в JavaScript
- Классы и объекты в JavaScript
- Техника симулирования класса и наследственности в JavaScript
- Наследование и полиморфизм в JavaScript
- Понимание Duck Typing в JavaScript
- Руководство JavaScript Symbol
- Руководство JavaScript Set Collection
- Руководство JavaScript Map Collection
- Понимание JavaScript Iterable и Iterator
- Руководство Регулярное выражение JavaScript
- Руководство JavaScript Promise, Async Await
- Руководство Javascript Window
- Руководство Javascript Console
- Руководство Javascript Screen
- Руководство Javascript Navigator
- Руководство Javascript Geolocation API
- Руководство Javascript Location
- Руководство Javascript History API
- Руководство Javascript Statusbar
- Руководство Javascript Locationbar
- Руководство Javascript Scrollbars
- Руководство Javascript Menubar
- Руководство JavaScript JSON
- Обработка событий в Javascript
- Руководство Javascript MouseEvent
- Руководство Javascript WheelEvent
- Руководство Javascript KeyboardEvent
- Руководство Javascript FocusEvent
- Руководство Javascript InputEvent
- Руководство Javascript ChangeEvent
- Руководство Javascript DragEvent
- Руководство Javascript HashChangeEvent
- Руководство Javascript URL Encoding
- Руководство Javascript FileReader
- Руководство Javascript XMLHttpRequest
- Руководство Javascript Fetch API
- Разбор XML в Javascript с помощью DOMParser
- Введение в Javascript HTML5 Canvas API
- Выделение кода с помощью библиотеки Javascript SyntaxHighlighter
Show More