WebAssembly.fr/en/

Variables and constants in JavaScript

Variables are dynamic in JavaScript, there are names associated with values and they may be reallocated in the program to values of different types: numbers, strings, arrays, etc.

The name of a variable is a series of letters or digits, which starts with a letter or the underscore sign or the $ sign.
For example:

_x name
name2 
$name

The single $ symbol represents the name of a variable. It is used for example by jQuery to represent the jQquery object.
Example of $ variable name:

$ = "text";
alert($);

Names are case-sensitive, the name Xeon is different from xeon.

Declaration with the reserved word var, let or const

A variable is declared by the use of the var reserved word:

var x;

Or with the keyword let:

let x;

In both cases it must be assigned before it is used.
It may be declared also by assigning a value to an identifier:

x = 24; 

That could lead to some confusions...
A more secure declaration would be rather:

var x = 24;
let y = "hello";

Inside the body of a function, the keyword var or let is required to create a variable locale to this function.
It is not required in the global space nor for the arguments of functions.
If a variable does not have an assigned value, its contents is undefined, which one can test by a comparison statement:

var y;
if(y == undefined) {
   y = 0; 
}

Constants are declared with the const reserved word (instead of var) and are assigned at the time of the declaration, then it is of course impossible to modify them later on.

const x = 24;

Difference between var and let

A variable declared with the var keyword is visible in the scope where it is defined and in inner scopes.

function outer() {
  var a1 = "hello";
  if(true) {
    var a1 = "hello world";
    display("a1 inside if: " + a1);
   }
  display("a1 outside if: " + a1);
}
outer();  
  
Using var

Let's take the same script and use let instead of var...

function outer() {
  let a1 = "hello";
  if(true) {
    let a1 = "hello world";
    display("a1 inside if: " + a1);
  }
  display("a1 outside if: " + a1);
}
outer();  
  
Using let

We see that with let, the visibility of the variable is limited to the scope of the control structure where it is declared.

It is preferable let instead of var to avoid any confusion, unless you specifically want a global visibility.

In summary...

var declaration:

  • A var declaration is visible in the current scope and in inner scopes, even if the variable is redeclared within them.
  • A var declaration inside a function is not visible outside that function.
  • A var declaration inside a control structure is visible outside of it. If the structure is inside a function, it is visible within the function but not outside of it.
  • Declaring a variable anywhere in a script is equivalent to declaring it at the beginning of the script (hoisting). This does not affect other scripts on the page. You can assign and then reference a var before its declaration.

let declaration:

  • A let declaration is visible in the function or block where it is declared and not outside of it.
  • Variables declared with let are visible in inner blocks. They cannot be redeclared with let in an inner block. (This would be a double declaration).
  • You cannot write: if(x) let y = 1;
    Because `y` would not be usable anywhere. You can write if(x) y = 1;

const declaration:

  • const behaves like let.

Three primitives and objects

The language primitives are:

  • boolean
  • string
  • number

They have reserved words and other keywords has been reserved for the future: byte, float, int, short, etc ...

To know the type of a variable, which is defined by the value assigned to it, use typeof. Example:

document.write (typeof Boolean (true));
let x = "text";
document.write (typeof x);

There are objects préféfinis the same name as primitives, but capitalized:

  • Boolean
  • Number
  • String

They are initialized by an argument. example:

let x = new Number(50);
let y = new String("text"); 

If we associate a property of the object corresponding to a primitive, example length to a string , it will be dynamically transformed into object for this statement. This does not change the type of the variable beyond the statement.
Demonstration:

let a = "text";
document.write(typeof a);
document.write(a.length);
a = new String("demo");
document.write(typeof a);

Scope is local to a function or global

A variable is regarded as global if it is declared out of a definition of function or structure. It is then visible in the body of functions and in structures of the global space or contained in functions.

A variable defined in a function is visible in this function and the body of any structure contained in this function.

But if it is created without the var keyword, it becomes part of the global space, even if it has not been defined outside the function.

function () {
  let x = 1;  
  y = 2;  
}

The variable x is local, while y is global.

A variable defined as global in a HTML window, can be used in another one by associating its to the name of the window, for example, x is defined in a window whose name is win2:

win2.x;

Values are predefined for conditional tests

Some values are built-in the language:

true
A boolean value.
false
The opposite boolean value.
undefined
As you may see, the variable is not assigned.
NaN
Not A Number. Value to indicate the variable does not hold a number. This value may be assigned, ex: x = NaN, and is tested with the function isNaN().
null
Has no assigned value.

See also

  • Scope of variables. Rules of visibility are unique to JavaScript.
  • Objects. Objects are dynamic variable to which we add attributes and methods.