Variables in JavaScript are containers for storing various information.
JavaScript VariablesJavaScript variables are "containers" into which you can load various information and later retrieve it back.
Each JavaScript variable must have its own unique name, which can begin with a Latin letter or the "_" symbol.
Please note: Variable names in JavaScript cannot begin with numbers.
Please note: since JavaScript is case sensitive, variables with the same names written in different case (for example, var and VAR) will be different variables.
Creating VariablesCreating variables in JavaScript is often called "announcement" variables.
Variables in JavaScript are declared using the var command.
//Create a variable named ex1 var ex1; //Create a variable named ex2 var ex2;
The variables created above will be empty, that is, we have created containers, but have not loaded any values into them.
Values can also be loaded into containers right at the time of creation, as in the example below:
//Create a variable named ex1 containing the value 4 var ex1=4; //Create a variable named ex2 containing the value 5 var ex2=5;
In order to extract a value from a previously created variable, you need to refer to its name.
In the following example, we will extract the contents of variables and immediately output them to the page using the document.write command.
//Write the number 4 into the variable ex1 var ex1=4; //Write the number 5 into the variable ex2 var ex2=5; //Output the contents of variable ex1 to the page document.write(ex1+"
"); //Output the contents of the variable ex2 document.write(ex2+"
"); //Change the contents of the ex2 variable ex2=200; //Output the new contents of the ex2 variable document.write(ex2);
Quick view
String variablesIn addition to numbers, you can store arbitrary text in variables. Variables that store text are called string variables.
When writing text to a variable, be sure to enclose it in double quotes (") or single quotes (").
//Write the string “Hello everyone!” into the ex variable var ex="Hello everyone!"; //Output the value of the ex variable to the page document.write(ex);
Quick view
Defining variables with and without varIn JavaScript, you can define variables with or without var.
//Create a new variable with var var ex=123; //Create a new variable without var ex2=20;
You might think that variable declarations with and without var always produce the same result, but this is only true when the declaration occurs in a global context (i.e. outside of all functions).
If the declaration occurs in a local context (i.e., in the body of a function), a declaration with var creates a local variable (i.e., a variable that will be available only in the body of this function and will be destroyed after the function is executed), a declaration without var creates a global variable (i.e. a variable that will be available to other functions within a given script).
Note that we'll talk more about local and global variables later in this tutorial.
About deleting and redefining variablesBy redefining variables, you do not erase the value that is stored in them.
Var ex=123; var ex; document.write(ex); // Prints 123
If you want to delete a variable in JavaScript and it was not declared with var, you can use the delete operator.
Ex=123; delete ex;
The delete operator cannot delete variables declared with var, so if a variable was declared with var, the only way to delete it is to set it to null or undefined.
Var ex=123; ex=null; // or ex=undefined
Do it yourselfExercise 1 . Correct the errors in the code below:
Exercise 1
var 33var=33; document.write(33var); document.write("
"); var str1=Hello everyone!; document.write(str1); document.write("
"); var vaR = 288; document.write(var); document.write("
");
Task 2. The external file secred1.js contains the variables sec1, sec2, sec3 and sec4, which contain the letters of the code word (not in order). Connect external file and find out the code word by printing variable values on the page.
In this example, x, y , and z are variables:
From the example above, you can expect:
- x retains the value 5
- y retains the value 6
- z retains the value 11
In this example, price1, price2, and total are variables:
In programming, just like in algebra, we use variables (for example, price1 ) to store values.
In programming, just like in algebra, we use variables in expressions (total = price1 + price2) .
From the above example, you can calculate the total to be 11.
JavaScript variables are containers for storing data values.
JavaScript IdentifiersAll JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (such as x and y), or more descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
- Names can contain letters, numbers, underscores, and dollar signs.
- Names must start with a letter
- Names can also start with $ and _ (but we won't use it in this tutorial)
- Names are case sensitive (y and y are different variables)
- Reserved words (such as JavaScript keywords) cannot be used as names
JavaScript identifiers are case sensitive.
Assignment operatorIn JavaScript, the equal sign (=) is an "assignment" operator, not an "equals" operator.
This is different from algebra. The following makes no sense in algebra:
In JavaScript, however, this makes sense: it assigns the value x + 5 to x.
(It calculates the value of x + 5, and puts the result in x. The value of x is increased by 5)
The "equals" operator is written as == in JavaScript.
Types JavaScript dataJavaScript variables can contain numbers like 100 and text values like "John Doe" .
In programming, text values are called text strings.
JavaScript can work with different types of data, but this moment, just thinking numbers and strings.
Strings are written in double or single quotes. Numbers are written without quotes.
If you put quotation marks around a number, it will be treated as a text string.
Declaring (Creating) JavaScript VariablesCreating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:
Once declared, the variable has no value. (Technically the meaning is undefined)
To assign a value to a variable, use the equal sign:
carName = "Volvo";
You can also assign a value to a variable when declaring it:
var carName = "Volvo";
In the example below, we create a variable called carName and assign the value "Volvo" to it.
Then we "output" the value inside the HTML item with id="demo" :
example
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
You can declare many variables in one statement.
Start the statement with var and separate the variables using commas:
The declaration can span several lines:
Value = undefinedIN computer programs, variables are often declared without a value. The value could be something that needs to be calculated, or something that will be provided later as user input.
A variable declared without a value will have a value of undefined.
The carName variable will have the value undefined after this statement is executed.
The var statement declares a variable, optionally initializing it to a value.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax var varname1 [= value1] [, varname2[= value2]... [ , varnameN [= valueN]]]; varnameN Variable name. It can be any legal identifier. valueN Initial value of the variable. It can be any legal expression. Default value is undefined. Descriptionvar declarations, wherever they occur, are processed before any code is executed. This is called hoisting, and is discussed further below.
The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global. If you re-declare a JavaScript variable, it will not lose its value.
Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:
1. Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.
Function x() ( y = 1; // Throws a ReferenceError in strict mode. var z = 2; ) x(); console.log(y); // 1 console.log(z); // Throws a ReferenceError: z is not defined outside x.
2. Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.
Console.log(a); // "undefined" or "" depending on browser console.log("still going..."); // still going... var a = 1; console.log(a); // 1 console.log("still going..."); // still going...
3. Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).
Var a = 1; b = 2; delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise. delete this.b; console.log(a, b); // Throws a ReferenceError. // The "b" property was deleted and no longer exists.
Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus it is recommended to always declare variables, regardless of whether they are in a function or global scope. And in ECMAScript 5 strict mode, assigning to an undeclared variable throws an error.
var hoistingBecause variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it"s declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.
Bla = 2; var bla; // ...is implicitly understood as: var bla; bla = 2;
For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it"s clear which variables are function scoped (local) and which are resolved on the scope chain.
It"s important to point out that the hoisting will affect the variable declaration, but not its value"s initialization. The value will indeed be assigned when the assignment statement is reached:
Function do_something() ( console.log(bar); // undefined var bar = 111; console.log(bar); // 111 ) // ...is implicitly understood as: function do_something() ( var bar; console .log(bar); // undefined bar = 111; console.log(bar); // 111 )
Examples Declaring and initializing two variables var a = 0, b = 0; Assigning two variables with single string value var a = "A"; var b = a; // ...is equivalent to: var a, b = a = "A";Be mindful of the order:
Var x = y, y = "A"; console.log(x + y); //undefinedA
Here, x and y are declared before any code is executed, but the assignments occur later. At the time " x = y " is evaluated, y exists so no ReferenceError is thrown and its value is undefined . So, x is assigned the undefined value. Then, y is assigned the value "A" . Consequently, after the first line, x === undefined && y === "A" , hence the result.!}
Initialization of several variables var x = 0; function f() ( var x = y = 1; // Declares x locally; declares y globally. ) f(); console.log(x, y); // 0 1 // In non-strict mode: // x is the global one as expected; // y is leaked outside of the function, though!The same example as above but with a strict mode:
"use strict"; var x = 0; function f() ( var x = y = 1; // Throws a ReferenceError in strict mode. ) f(); console.log(x, y);
Implicit globals and outer function scopeVariables that appear to be implicit globals may be references to variables in an outer function scope:
Var x = 0; // Declares x within file scope, then assigns it a value of 0. console.log(typeof z); // "undefined", since z doesn't exist yet function a() ( var y = 2; // Declares y within scope of function a, then assigns it a value of 2. console.log(x, y); // 0 2 function b() ( x = 3; // Assigns 3 to existing file scoped x. y = 4; // Assigns 4 to existing outer y. z = 5; // Creates a new global variable z, and assigns it a value of 5. // (Throws a ReferenceError in strict mode.) ) b(); // Creates z as a global variable. console.log(x, y, z); // 3 4 5 ) a (); // Also calls b. console.log(x, z); // 3 5 console.log(typeof y); // "undefined", as y is local to function a
Specifications| ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. Implemented in JavaScript 1.0 |
| ECMAScript 5.1 (ECMA-262) The definition of "var statement" in that specification. |
Standard | |
| ECMAScript 2015 (6th Edition, ECMA-262) |
Standard | |
| ECMAScript Latest Draft (ECMA-262) The definition of "variable statement" in that specification. |
Draft |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile Server | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js | ||||||||||||
| Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
The programmer wants to create a global variable film and another variable that has the same name but only acts in the showBadFilm() function. What message will the alert output from the showGoodFilm() function? What message will be displayed if this function is called again, but after calling the showBadFilm() function?
Good or bad movie? var film = "Red viburnum"; function showGoodFilm() ( alert(film + " - good film!"); ) function showBadFilm() ( film = "September 11"; alert(film + " - bad movie!"); ) showGoodFilm(); // what will the alert display? showBadFilm(); // what will the alert display? showGoodFilm(); // what will the alert display?
Solution:
Note that in the showBadFilm() function there is no film before the variable keyword var. Therefore, JavaScript assumes that you want to override the value of a global variable, rather than create a local variable of the same name. Therefore, calling the showGoodFilm() function again will print: "September 11 is a good movie!"
- Data type checking
Which primitive data type are the following variables? Try to answer without running the script.
Checking the data type var film = "Red Viburnum"; var 07_agent = "Agent"; var num = 10; var num1 = "10"; var u = true; var x; alert(typeof Film); //??? alert(typeof 07_agent); //??? alert(typeof num); //??? alert(typeof num1); //??? alert(typeof u); //??? alert(typeof x); //???
Solution:
Notice that the first variable is declared with the name film , and the variable in the alert is Film . These are two different variables because JavaScript is a case-sensitive language. The name 07_agent starts with a number, and this will cause a syntax error and, as a result, the script will not work.
To be honest, I didn’t want to introduce this topic from the beginning. What about variables, especially in JavaScript? But then I remembered how I sometimes dealt with complex constructions and had difficulty understanding some expressions that seemed unacceptable in other programming languages. We can say this: here you will not get the “Invalid data type” error, and if you do, it will be very rare. If you have worked with other programming languages, then remember how often you got the error about invalid data types. In JavaScript, a data type can be easily redefined, but you may not even notice where - that's where the difficulty lies. On the other hand, if you are well versed in the principles of type conversions and know all the properties of variables and arrays, these capabilities will only give you confidence in writing programs.
JavaScript variables can store different types of values:
- Lines are a sequence of characters;
- Numeric values - integers and real numbers;
- Boolean values - only two values true or false;
- Arrays - sets of variables of the same type;
- Dates are date and time values.
To save any values when loading a new document in JavaScript, there are only 2 solutions:
- by creating variables in the frame document top level;
- by using "cookies";
Cookies allow small pieces of information to be stored on local disk user. By setting the cookie values and resetting them at subsequent stages of work, it is possible to restore the necessary values. We will talk about cookies in more detail later.
Variable names, variable creation
In JavaScript, creating a variable is much easier than in other programming languages. For example, when creating a variable, there is no need to specify its type. Variables are defined both with and without initial values. During program execution, already created variables can even be converted to different data types. Variable names can begin with any letter (a through z, or A-Z) or an underscore (_), and the rest can contain numbers, underscores, and letters. Remember that variable names differ between upper and lower case characters: for example, MyVariable is not the same as myvariable.
A variable can be created in one of the following ways:
- using the var operator and the assignment operator (=);
- using the assignment operator (=).
Var MyVariable = 35
Creates a variable named MyVariable containing the numeric value 35. The variable exists as long as the current document is loaded. If you create this variable in a top-level document containing a frame, it should be accessed using the expression top.MyVariable, or better yet parent.MyVariable to protect against nested frames.
In JavaScript, variables can be overridden, even by specifying a different data type. For example, after executing the statement
Var MyVariable = "35"
The variable will already store the string "35". Such transformations sometimes lead to misunderstandings. For example:
What value do you think the variable "c" will take after the program is executed? If you are not familiar with the rules for converting variables in JavaScript, you will not guess. The value of the variable "c" after the block is completed will be equal to the numerical value 320. We will talk about the principles of converting variable types later. A variable can be defined without using the “Var” operator, but simply by assigning a value, and the type of data that will be assigned determines the type of the variable. The "Var" operator is used mostly for the readability of a JS program. The variable can be specified without initial values, for example:
Var MyVariable;
A variable named MyVariable has been created with no defined data type and no initial value. Variables created using such declarations are known as null variables. For example, by comparing such a variable with the value null, you can find out whether the variable is defined. However, one should not confuse different things: "" - an empty string is a string type and not a null value at all.
The type of a variable can be set anywhere in a JS program, unlike other programming languages, which gives additional flexibility, but also the possibility of confusion - remember this. A variable that has not been created cannot be accessed. If you need to create a temporary variable, such as a loop counter, you need to prefix it with var:
for (var i=0; i "10");
The simplest and most common way to create a String object is to use operators such as
Var myVariable = "Good beer";
The following statement assigns the string "Good Beer" to the string variable myVariable. The variable myVariable is treated as a string object and can use any of standard methods JavaScript String object. The Var operator can be skipped, as mentioned earlier, it is needed mainly for the readability of the program.
To create string objects, you can use the String() constructor with the new operator. The String object is not actually part of the JavaScript language, but is a built-in browser object, mainly because strings are created when the user needs them. Let's look at an example:
Var myVariable = new String();
This statement creates new object- an empty string named myVariable. Initially, this is the empty string (""), and the value of the myVariable.length property is 0.
The String() constructor allows a given string to be passed as an argument:
Var myVariable = new String("Proper beer");
A string object can contain special characters that control string formatting:
- \n - newline character;
- \r - carriage return character;
- \f - code for moving to a new page;
- \xnn - representation of the character as hexadecimal ASCII code nn;
- \b - key code.
The String object has only one property, length, whose value is the number of characters in the string contained in the object. String object methods can be divided into two categories:
- HTML document formatting methods;
- string processing methods.
Here is a list of methods: (the letter F is formatting methods, and the letter U is row management)
| Method | Description | |
| anchor() | U | Creates a named label, i.e. tag from the contents of the object |
| big() | F | Encloses a string in a container. . . , to display in large font |
| blink() | F | Encloses a string in a container. . . so that it appears blinking. |
| bold() | F | Encloses a string in a container. . . so that it appears in bold. |
| charAt() | U | Returns the character at a given string position |
| fixed() | F | Encloses a string in a container. . . so that it is displayed in a constant width font. |
| fontcolor() | F | Encloses a string in a container. . . so that it appears in a specific color. |
| fontsize() | F | Encloses a string in a container. . . so that it is displayed in a specific font size. |
| IndexOf() | U | Returns the index of the first specified character found in the string. |
| italics() | F | Encloses a string in a container . . . so that it appears in italics. |
| lastIndexOf() | U | Returns the index of the last specified character found in a string. |
| link() | U | Creates a hyperlink tag . . . and puts the contents of the object into it |
| small() | F | Encloses a line in a tag. . . so that it appears in a smaller font size. |
| strike() | F | Encloses a string in a container. . . so that it appears crossed out. |
| sub() | F | Encloses a string in a container. . . so that it appears as a subscript. |
| substring() | U | Returns a substring of a text string. |
| sup() | F | Encloses a string in a container. . . so that it appears as a superscript. |
| toLowerCase() | U | Converts all letters of a string to lowercase |
| toUpperCase() | U | Converts all letters in a string to uppercase |
Numeric variables
Numeric values can be either integer or floating point numbers. Floating point numbers are called real or floating point numbers. The following operations are applicable to numeric values:
- multiply(*);
- division(/);
- addition (+);
- subtraction (-);
- increase (++);
- decrease (--);
Boolean variables
Boolean, or logical, variables contain only literal values - true and false - and are used in logical expressions and operators.
To check the value of a Boolean variable, the logical equality operation is also used:
booleanVar == true
although in this case such a verification operation is unnecessary. To check for values that are not true, use the logical negation sign (!). For example, the expression!booleanVar will return true if booleanVar is false. Instead of the words "true" and "false", you can use the numeric values "1" and "2", since it is the TakBoolean values that are represented in the computer's memory: 1==true and 0==false.
Array variables
Array variables contain ordered sets of values of the same type, represented as a single variable for convenience. Many standard document property objects in JavaScript, particularly hyperlinks and labels, are arrays. In JavaScript, an array element must be accessed using an expression:
ArrayName
Where arrayName is the name of the array, and index is a numeric variable or a number that specifies the position of the element in the array. For example, arrayName is the first element of this array. Indices of array elements in JavaScript start from zero. Array elements can be of any type, such as strings or booleans. In addition, under certain conditions, an array can contain elements of different data types. In language JavaScript arrays are created using:
- constructor Array();
- constructor Object();
- user defined constructor.
Var path = "c:/images/" ,
arrayImg = new Array();
arrayImg = path+"img1.gif";
arrayImg = path+"img2.gif";
When you use the Array() constructor, the length property is set automatically. Therefore, after initializing the array elements in the example above, the expression arrayImg.length returns the value 2. Array elements can also be specified as constructor parameters:
Var path = "c:/images/" ,
arrayImg = new Array(path+"img1.gif", path+"img2.gif");
This expression is a shorthand version of the previous example.
In JavaScript, you can create an array, this is an array in which the elements have different type data:
Var myArray = new Array(3.14, true, 85, date(), "word");
Creates an array whose element myArray is a floating point number, element myArray is boolean value, the myArray element is a Date object.
The size of the array, and therefore the value of the length property of the object created by the Array() constructor, depends on the maximum index value that was used to specify the array element. For example:
Var myArray = new Array;
myArray = "This is the 21st element of the array";
The twenty-first element of the array is assigned the string value "This is the 21st element of the array," and the value of the myArray.length property is 21, regardless of whether array elements with index less than 20 have values.
The length property of an Array object is automatically set when you explicitly specify the number of elements in the Array() constructor:
MyArray = new Array(10);
The operator creates an array of 10 elements from 0 to 9. The length property of an array cannot be set by assignment because length is a read-only property. For example, to set the length property to 10, you only need to determine the value of the last, in this case, the 9th element of the array:
MyArray = new Array();
myArray = 0;
In addition, it is possible to set the values of array elements when constructing it:
MyArray = new Array(0,0,0,0,0,0);
Object() constructor
The concepts of object and array are equivalent, although the Object() and Array() constructors work differently. It is impossible to pass multiple array elements to the Object() constructor, so this expression
var myObj = new Object(value1, value2);
won't work. Arrays created using the Object() constructor do not have a length property. Therefore, when creating an array in this way, you should either traverse this array using for loop and count the elements of the array, or hardcode the length of the array to the value of its first element (this is usually done by simulating the length property), and then access it as needed to check the size of the array, increment the value when adding a new element, and also as a loop parameter when cyclically reading or changing element values. Such an object is often inappropriate for cases where the contents of the array must change dynamically, so in most cases the Array() constructor is used. The index values of arrays created in the Object() constructor also start from zero. To create an array using the Object() constructor, it is common to use a notation like:
Var myObj = new Object();
myObj = 2; // set the array size
myObj = "First element";
myObj = "Second element";
To find out the size of an array created in this way, you need to access the myObj element. The value of the myObj.length property is null, since the value is undefined.
Converting Strings and Numbers
Finally we come to the most interesting topic. The fact is that in the JavaScript language, unlike other languages, there are no functions like Val() and Str(). I once saw a program in JavaScript, I won’t name the author, where, with the help of all kinds of data type conversions, there was an attempt to confuse the program for “non-advanced” users. So, you need to remember two rules:
- Converting a number to a string of characters is done by adding the numeric argument to the string argument, regardless of the rearrangement of the terms. For example, if the variable is varI = 123, then you can convert the variable and therefore its value into a character string: varI = varI + "" or vice versa: varI = "" + varI. If you add a non-empty string: varI = varI + "456", then the result of the value of the varI variable will be "123456". The same is true vice versa: varI = "456" + varI - result: "456123";
- Converting a string to a number is done by subtracting one operand from another and also regardless of their position. For example, if the variable varI = "123", then you can convert it to a number by subtracting the values 0 from it: varI = varI - 0, and accordingly the value of the variable from a string type is converted to a numeric one: 123. When rearranging the operands, the sign of the numeric value will change to opposite. Unlike converting a number to a string, subtraction operations cannot use literal values. So if "JavaScript" + 10 turns into varI == "JavaScript10", then an operation like varI = "JavaScript" - 10 will produce the value "NON" - that is, such an operation is not allowed. And yet, when subtracting a string value from a string value, a transformation also occurs: varI = "20" - "15", the value of the varI variable will be the number 5.
Loading...
