Variables

Most of the time, a JavaScript application needs to work with information. Here are
two examples:
1. An online shop – the information might include goods being sold and a
shopping cart.
2. A chat application – the information might include users, messages, and
much more.
Variables are used to store this information.
A variable
A variable is a “named storage” for data. We can use variables to store goodies,
visitors, and other data.
To create a variable in JavaScript, use the let keyword.
The statement below creates (in other words: declares) a variable with the name
“message”:
let message;
Now, we can put some data into it by using the assignment operator =:
let message;

message = 'Hello'; // store the string 'Hello' in the variable named message
The string is now saved into the memory area associated with the variable. We can
access it using the variable name:
let message;
message = 'Hello!';

alert(message); // shows the variable content

To be concise, we can combine the variable declaration and assignment into a
single line:
let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!
We can also declare multiple variables in one line:
let user = 'John', age = 25, message = 'Hello';
That might seem shorter, but we don’t recommend it. For the sake of better
readability, please use a single line per variable.
The multiline variant is a bit longer, but easier to read:
let user = 'John';
let age = 25;
let message = 'Hello';
Some people also define multiple variables in this multiline style:
let user = 'John',
age = 25,
message = 'Hello';
…Or even in the “comma-first” style:
let user = 'John'
, age = 25
, message = 'Hello';
Technically, all these variants do the same thing. So, it’s a matter of personal taste
and aesthetics.
var instead of let
In older scripts, you may also find another keyword: var instead of let:
var message = 'Hello';
The var keyword is almost the same as let. It also declares a variable but in a
slightly different, “old-school” way.
There are subtle differences between let and var, but they do not matter to us yet.
We’ll cover them in detail in the chapter The old "var".
A real-life analogy
We can easily grasp the concept of a “variable” if we imagine it as a “box” for data,
with a uniquely-named sticker on it.
For instance, the variable message can be imagined as a box
labelled "message" with the value "Hello!" in it:
We can put any value in the box.
We can also change it as many times as we want:
let message;
message = 'Hello!';

message = 'World!'; // value changed

alert(message);
When the value is changed, the old data is removed from the variable:
We can also declare two variables and copy data from one into the other.
let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message

message = hello;

// now two variables hold the same data

alert(hello); // Hello world!
alert(message); // Hello world!
Declaring twice triggers an error
A variable should be declared only once.
A repeated declaration of the same variable is an error:
let message = "This";

// repeated 'let' leads to an error

let message = "That"; // SyntaxError: 'message' has already been declared
So, we should declare a variable once and then refer to it without let.
Functional languages
It’s interesting to note that there exist so-called pure functional programming
languages, such as Haskell, that forbid changing variable values.
In such languages, once the value is stored “in the box”, it’s there forever. If we
need to store something else, the language forces us to create a new box (declare a
new variable). We can’t reuse the old one.
Though it may seem a little odd at first sight, these languages are quite capable of
serious development. More than that, there are areas like parallel computations
where this limitation confers certain benefits.
Variable naming
There are two limitations on variable names in JavaScript:
1. The name must contain only letters, digits, or the symbols $ and _.
2. The first character must not be a digit.
Examples of valid names:
let userName;
let test123;
When the name contains multiple words, camelCase is commonly used. That is:
words go one after another, each word except first starting with a capital
letter: myVeryLongName.
What’s interesting – the dollar sign '$' and the underscore '_' can also be used in
names. They are regular symbols, just like letters, without any special meaning.
These names are valid:
let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3
Examples of incorrect variable names:
let 1a; // cannot start with a digit

let my-name; // hyphens '-' aren't allowed in the name

Case matters
Variables named apple and APPLE are two different variables.
Non-Latin letters are allowed, but not recommended
It is possible to use any language, including Cyrillic letters, Chinese logograms and
so on, like this:
let имя = '...';
let 我 = '...';
Technically, there is no error here. Such names are allowed, but there is an
international convention to use English in variable names. Even if we’re writing a
small script, it may have a long life ahead. People from other countries may need to
read it sometime.
Reserved names
There is a list of reserved words, which cannot be used as variable names because
they are used by the language itself.
For example: let, class, return, and function are reserved.
The code below gives a syntax error:
let let = 5; // can't name a variable "let", error!
let return = 5; // also can't name it "return", error!
An assignment without use strict
Normally, we need to define a variable before using it. But in the old times, it was
technically possible to create a variable by a mere assignment of the value without
using let. This still works now if we don’t put use strict in our scripts to maintain
compatibility with old scripts.
// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5
This is a bad practice and would cause an error in strict mode:
"use strict";

num = 5; // error: num is not defined

Constants
To declare a constant (unchanging) variable, use const instead of let:
const myBirthday = '18.04.1982';
Variables declared using const are called “constants”. They cannot be reassigned.
An attempt to do so would cause an error:
const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

When a programmer is sure that a variable will never change, they can declare it
with const to guarantee and communicate that fact to everyone.
Uppercase constants
There is a widespread practice to use constants as aliases for difficult-to-remember
values that are known before execution.
Such constants are named using capital letters and underscores.
For instance, let’s make constants for colors in so-called “web” (hexadecimal)
format:
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color

let color = COLOR_ORANGE;
alert(color); // #FF7F00
Benefits:
 COLOR_ORANGE is much easier to remember than "#FF7F00".
 It is much easier to mistype "#FF7F00" than COLOR_ORANGE.
 When reading the code, COLOR_ORANGE is much more meaningful
than #FF7F00.
Data types
A value in JavaScript is always of a certain type. For example, a string or a number.
There are eight basic data types in JavaScript. Here, we’ll cover them in general and
in the next chapters we’ll talk about each of them in detail.
We can put any type in a variable. For example, a variable can at one moment be a
string and then store a number:
// no error
let message = "hello";
message = 123456;
Programming languages that allow such things, such as JavaScript, are called
“dynamically typed”, meaning that there exist data types, but variables are not
bound to any of them.
Number
let n = 123;
n = 12.345;
The number type represents both integer and floating point numbers.
There are many operations for numbers, e.g. multiplication *, division /, addition +,
subtraction -, and so on.
Besides regular numbers, there are so-called “special numeric values” which also
belong to this data type: Infinity, -Infinity and NaN.
 Infinity represents the mathematical Infinity ∞. It is a special value that’s
greater than any number.
We can get it as a result of division by zero:
alert( 1 / 0 ); // Infinity
Or just reference it directly:
alert( Infinity ); // Infinity
 NaN represents a computational error. It is a result of an incorrect or an
undefined mathematical operation, for instance:
alert( "not a number" / 2 ); // NaN, such division is erroneous
NaN is sticky. Any further mathematical operation on NaN returns NaN:
alert( NaN + 1 ); // NaN
alert( 3 * NaN ); // NaN
alert( "not a number" / 2 - 1 ); // NaN
So, if there’s a NaN somewhere in a mathematical expression, it propagates to the
whole result (there’s only one exception to that: NaN ** 0 is 1).
Mathematical operations are safe
Doing maths is “safe” in JavaScript. We can do anything: divide by zero, treat non-
numeric strings as numbers, etc.
The script will never stop with a fatal error (“die”). At worst, we’ll get NaN as the
result.
Special numeric values formally belong to the “number” type. Of course they are
not numbers in the common sense of this word.
We’ll see more about working with numbers in the chapter Numbers.
BigInt
In JavaScript, the “number” type cannot safely represent integer values larger
than (253-1) (that’s 9007199254740991), or less than -(253-1) for negatives.
To be really precise, the “number” type can store larger integers (up
to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-
1) there’ll be a precision error, because not all digits fit into the fixed 64-bit storage.
So an “approximate” value may be stored.
For example, these two numbers (right above the safe range) are the same:
console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2); // 9007199254740992
So to say, all odd integers greater than (253-1) can’t be stored at all in the “number”
type.
For most purposes ±(253-1) range is quite enough, but sometimes we need the
entire range of really big integers, e.g. for cryptography or microsecond-precision
timestamps.
BigInt type was recently added to the language to represent integers of arbitrary
length.
A BigInt value is created by appending n to the end of an integer:
// the "n" at the end means it's a BigInt
const bigInt = 1234567890123456789012345678901234567890n;
As BigInt numbers are rarely needed, we don’t cover them here, but devoted them
a separate chapter BigInt. Read it when you need such big numbers.
String
A string in JavaScript must be surrounded by quotes.
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
In JavaScript, there are 3 types of quotes.
1. Double quotes: "Hello".
2. Single quotes: 'Hello'.
3. Backticks: `Hello`.
Double and single quotes are “simple” quotes. There’s practically no difference
between them in JavaScript.
Backticks are “extended functionality” quotes. They allow us to embed variables
and expressions into a string by wrapping them in ${…}, for example:
let name = "John";

// embed a variable
alert( `Hello, ${name}!` ); // Hello, John!

// embed an expression
alert( `the result is ${1 + 2}` ); // the result is 3
The expression inside ${…} is evaluated and the result becomes a part of the
string. We can put anything in there: a variable like name or an arithmetical
expression like 1 + 2 or something more complex.
Please note that this can only be done in backticks. Other quotes don’t have this
embedding functionality!
alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing)
We’ll cover strings more thoroughly in the chapter Strings.
There is no character type.
In some languages, there is a special “character” type for a single character. For
example, in the C language and in Java it is called “char”.
In JavaScript, there is no such type. There’s only one type: string. A string may
consist of zero characters (be empty), one character or many of them.
Boolean (logical type)
The boolean type has only two values: true and false.
This type is commonly used to store yes/no values: true means “yes, correct”,
and false means “no, incorrect”.
For instance:
let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked
Boolean values also come as a result of comparisons:
let isGreater = 4 > 1;

alert( isGreater ); // true (the comparison result is "yes")

We’ll cover booleans more deeply in the chapter Logical operators.
The “null” value
The special null value does not belong to any of the types described above.
It forms a separate type of its own which contains only the null value:
let age = null;
In JavaScript, null is not a “reference to a non-existing object” or a “null pointer” like
in some other languages.
It’s just a special value which represents “nothing”, “empty” or “value unknown”.
The code above states that age is unknown.
The “undefined” value
The special value undefined also stands apart. It makes a type of its own, just
like null.
The meaning of undefined is “value is not assigned”.
If a variable is declared, but not assigned, then its value is undefined:
let age;

alert(age); // shows "undefined"

Technically, it is possible to explicitly assign undefined to a variable:
let age = 100;

// change the value to undefined

age = undefined;

alert(age); // "undefined"
…But we don’t recommend doing that. Normally, one uses null to assign an “empty”
or “unknown” value to a variable, while undefined is reserved as a default initial
value for unassigned things.
Objects and Symbols
The object type is special.
All other types are called “primitive” because their values can contain only a single
thing (be it a string or a number or whatever). In contrast, objects are used to store
collections of data and more complex entities.
Being that important, objects deserve a special treatment. We’ll deal with them
later in the chapter Objects, after we learn more about primitives.
The symbol type is used to create unique identifiers for objects. We have to mention
it here for the sake of completeness, but also postpone the details till we know
objects.
The typeof operator
The typeof operator returns the type of the operand. It’s useful when we want to
process values of different types differently or just want to do a quick check.
A call to typeof x returns a string with the type name:
typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object" (1)

typeof null // "object" (2)

typeof alert // "function" (3)

The last three lines may need additional explanation:
1. Math is a built-in object that provides mathematical operations. We will learn
it in the chapter Numbers. Here, it serves just as an example of an object.
2. The result of typeof null is "object". That’s an officially recognized error
in typeof, coming from very early days of JavaScript and kept for
compatibility. Definitely, null is not an object. It is a special value with a
separate type of its own. The behavior of typeof is wrong here.
3. The result of typeof alert is "function", because alert is a function. We’ll study
functions in the next chapters where we’ll also see that there’s no special
 “function” type in JavaScript. Functions belong to the object type.
But typeof treats them differently, returning "function". That also comes from
the early days of JavaScript. Technically, such behavior isn’t correct, but can
be convenient in practice.
The typeof(x) syntax
You may also come across another syntax: typeof(x). It’s the same as typeof x.
To put it clear: typeof is an operator, not a function. The parentheses here aren’t a
part of typeof. It’s the kind of parentheses used for mathematical grouping.
Usually, such parentheses contain a mathematical expression, such as (2 + 2), but
here they contain only one argument (x). Syntactically, they allow to avoid a space
between the typeof operator and its argument, and some people like it.
Some people prefer typeof(x), although the typeof x syntax is much more common.
Summary
There are 8 basic data types in JavaScript.
 Seven primitive data types:
o number for numbers of any kind: integer or floating-point, integers are
limited by ±(253-1).
o bigint for integer numbers of arbitrary length.

o string for strings. A string may have zero or more characters, there’s
no separate single-character type.
o boolean for true/false.

o null for unknown values – a standalone type that has a single

value null.
o undefined for unassigned values – a standalone type that has a single
value undefined.
o symbol for unique identifiers.

 And one non-primitive data type:

o object for more complex data structures.

The typeof operator allows us to see which type is stored in a variable.

 Usually used as typeof x, but typeof(x) is also possible.
 Returns a string with the name of the type, like "string".
 For null returns "object" – this is an error in the language, it’s not actually an
object.
Interaction: alert, prompt, confirm
As we’ll be using the browser as our demo environment, let’s see a couple of
functions to interact with the user: alert, prompt and confirm.
alert
This one we’ve seen already. It shows a message and waits for the user to press
“OK”.
For example:
alert("Hello");
The mini-window with the message is called a modal window. The word “modal”
means that the visitor can’t interact with the rest of the page, press other buttons,
etc, until they have dealt with the window. In this case – until they press “OK”.
prompt
The function prompt accepts two arguments:
result = prompt(title, [default]);
It shows a modal window with a text message, an input field for the visitor, and the
buttons OK/Cancel.
title
The text to show the visitor.
default
An optional second parameter, the initial value for the input field.
The square brackets in syntax [...]
The square brackets around default in the syntax above denote that the parameter
is optional, not required.
The visitor can type something in the prompt input field and press OK. Then we get
that text in the result. Or they can cancel the input by pressing Cancel or hitting
the Esc key, then we get null as the result.
The call to prompt returns the text from the input field or null if the input was
canceled.
For instance:
let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
In IE: always supply a default
The second parameter is optional, but if we don’t supply it, Internet Explorer will
insert the text "undefined" into the prompt.
Run this code in Internet Explorer to see:
let test = prompt("Test");
So, for prompts to look good in IE, we recommend always providing the second
argument:
let test = prompt("Test", ''); // <-- for IE
confirm
The syntax:
result = confirm(question);
The function confirm shows a modal window with a question and two buttons: OK
and Cancel.
The result is true if OK is pressed and false otherwise.
For example:
let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

Summary
We covered 3 browser-specific functions to interact with visitors:
alert
shows a message.
prompt
shows a message asking the user to input text. It returns the text or, if Cancel
button or Esc is clicked, null.
confirm
shows a message and waits for the user to press “OK” or “Cancel”. It returns true for
OK and false for Cancel/Esc.
All these methods are modal: they pause script execution and don’t allow the visitor
to interact with the rest of the page until the window has been dismissed.
There are two limitations shared by all the methods above:
1. The exact location of the modal window is determined by the browser.
Usually, it’s in the center.
 2. The exact look of the window also depends on the browser. We can’t modify
it.
That is the price for simplicity. There are other ways to show nicer windows and
richer interaction with the visitor, but if “bells and whistles” do not matter much,
these methods work just fine.
Type Conversions
Most of the time, operators and functions automatically convert the values given to
them to the right type.
For example, alert automatically converts any value to a string to show it.
Mathematical operations convert values to numbers.
There are also cases when we need to explicitly convert a value to the expected
type.
Not talking about objects yet
In this chapter, we won’t cover objects. For now, we’ll just be talking about
primitives.
Later, after we learn about objects, in the chapter Object to primitive
conversion we’ll see how objects fit in.
String Conversion
String conversion happens when we need the string form of a value.
For example, alert(value) does it to show the value.
We can also call the String(value) function to convert a value to a string:
let value = true;
alert(typeof value); // boolean

value = String(value); // now value is a string "true"

alert(typeof value); // string
String conversion is mostly obvious. A false becomes "false", null becomes "null",
etc.
Numeric Conversion
Numeric conversion in mathematical functions and expressions happens
automatically.
For example, when division / is applied to non-numbers:
alert( "6" / "2" ); // 3, strings are converted to numbers
We can use the Number(value) function to explicitly convert a value to a number:
let str = "123";
alert(typeof str); // string

let num = Number(str); // becomes a number 123

alert(typeof num); // number

Explicit conversion is usually required when we read a value from a string-based
source like a text form but expect a number to be entered.
If the string is not a valid number, the result of such a conversion is NaN. For
instance:
let age = Number("an arbitrary string instead of a number");

alert(age); // NaN, conversion failed

Numeric conversion rules:

Value Becomes…

undefined NaN

null 0

true and fal

1 and 0
se

Whitespaces (includes spaces, tabs \t, newlines \n etc.) from the start and end are
string removed. If the remaining string is empty, the result is 0. Otherwise, the number is
from the string. An error gives NaN.

Examples:
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (error reading a number at "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0
Please note that null and undefined behave differently here: null becomes zero
while undefined becomes NaN.
Most mathematical operators also perform such conversion, we’ll see that in the
next chapter.
Boolean Conversion
Boolean conversion is the simplest one.
It happens in logical operations (later we’ll meet condition tests and other similar
things) but can also be performed explicitly with a call to Boolean(value).
The conversion rule:
 Values that are intuitively “empty”, like 0, an empty string, null, undefined,
and NaN, become false.
 Other values become true.
For instance:
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true

alert( Boolean("") ); // false
Please note: the string with zero "0" is true
Some languages (namely PHP) treat "0" as false. But in JavaScript, a non-empty
string is always true.
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)
Functions
Quite often we need to perform a similar action in many places of the script.
For example, we need to show a nice-looking message when a visitor logs in, logs
out and maybe somewhere else.
Functions are the main “building blocks” of the program. They allow the code to be
called many times without repetition.
We’ve already seen examples of built-in functions,
like alert(message), prompt(message, default) and confirm(question). But we can
create functions of our own as well.
Function Declaration
To create a function we can use a function declaration.
It looks like this:
function showMessage() {
 alert( 'Hello everyone!' );
}
The function keyword goes first, then goes the name of the function, then a list
of parameters between the parentheses (comma-separated, empty in the example
above, we’ll see examples later) and finally the code of the function, also named
“the function body”, between curly braces.
function name(parameter1, parameter2, ... parameterN) {
// body
}
Our new function can be called by its name: showMessage().
For instance:
function showMessage() {
alert( 'Hello everyone!' );
}

showMessage();
showMessage();
The call showMessage() executes the code of the function. Here we will see the
message two times.
This example clearly demonstrates one of the main purposes of functions: to avoid
code duplication.
If we ever need to change the message or the way it is shown, it’s enough to modify
the code in one place: the function which outputs it.
Local variables
A variable declared inside a function is only visible inside that function.
For example:
function showMessage() {
let message = "Hello, I'm JavaScript!"; // local variable

alert( message );
}
showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

Outer variables
A function can access an outer variable as well, for example:
let userName = 'John';

function showMessage() {
let message = 'Hello, ' + userName;
alert(message);
}

showMessage(); // Hello, John

The function has full access to the outer variable. It can modify it as well.
For instance:
let userName = 'John';

function showMessage() {
userName = "Bob"; // (1) changed the outer variable

let message = 'Hello, ' + userName;

alert(message);
}

alert( userName ); // John before the function call

showMessage();

alert( userName ); // Bob, the value was modified by the function

The outer variable is only used if there’s no local one.
If a same-named variable is declared inside the function then it shadows the outer
one. For instance, in the code below the function uses the local userName. The
outer one is ignored:
let userName = 'John';

function showMessage() {
let userName = "Bob"; // declare a local variable

let message = 'Hello, ' + userName; // Bob

alert(message);
}

// the function will create and use its own userName

showMessage();

alert( userName ); // John, unchanged, the function did not access the outer variable
Global variables
Variables declared outside of any function, such as the outer userName in the code
above, are called global.
Global variables are visible from any function (unless shadowed by locals).
It’s a good practice to minimize the use of global variables. Modern code has few or
no globals. Most variables reside in their functions. Sometimes though, they can be
useful to store project-level data.
Parameters
We can pass arbitrary data to functions using parameters.
In the example below, the function has two parameters: from and text.
function showMessage(from, text) { // parameters: from, text
alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)

showMessage('Ann', "What's up?"); // Ann: What's up? (**)
When the function is called in lines (*) and (**), the given values are copied to local
variables from and text. Then the function uses them.
Here’s one more example: we have a variable from and pass it to the function.
Please note: the function changes from, but the change is not seen outside,
because a function always gets a copy of the value:
function showMessage(from, text) {

from = '*' + from + '*'; // make "from" look nicer

alert( from + ': ' + text );

}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// the value of "from" is the same, the function modified a local copy
alert( from ); // Ann
When a value is passed as a function parameter, it’s also called an argument.
In other words, to put these terms straight:
 A parameter is the variable listed inside the parentheses in the function
declaration (it’s a declaration time term).
 An argument is the value that is passed to the function when it is called (it’s a
call time term).
We declare functions listing their parameters, then call them passing arguments.
In the example above, one might say: “the function showMessage is declared with
two parameters, then called with two arguments: from and "Hello"”.
Default values
If a function is called, but an argument is not provided, then the corresponding
value becomes undefined.
For instance, the aforementioned function showMessage(from, text) can be called
with a single argument:
showMessage("Ann");
That’s not an error. Such a call would output "*Ann*: undefined". As the value
for text isn’t passed, it becomes undefined.
We can specify the so-called “default” (to use if omitted) value for a parameter in
the function declaration, using =:
function showMessage(from, text = "no text given") {
alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

Now if the text parameter is not passed, it will get the value "no text given".
The default value also jumps in if the parameter exists, but strictly
equals undefined, like this:
showMessage("Ann", undefined); // Ann: no text given
Here "no text given" is a string, but it can be a more complex expression, which is
only evaluated and assigned if the parameter is missing. So, this is also possible:
function showMessage(from, text = anotherFunction()) {
// anotherFunction() only executed if no text given
// its result becomes the value of text
}