JavaScript Variables Tutorial

Variables, Scope, and Closures

Names you give to pieces of the computers memory. They can be thought of as boxes in the memory closet, with names you use to label the front of the box, and values which are stored inside.

Types

JavaScript, like any computer language, has specific types of boxes, of specific sizes, for specific uses. But unlike "strongly typed" languages, where you must tell it what type each variable will hold, JavaScript uses "weak" or "implicit" typing; it will automatically pick the type of box for you, making your life easier... but it will switch from one sort of box to the next without telling you. For example, there is a type of box for numbers, and one for text (strings, messages, etc...). And it will select the type based on it's best guess. e.g.

var myvar = +"12" //this is now a number, and it's value is 12
var myvar = "12"*1 //this is now a number, and it's value is 12
var myvar = "12"+0 //this is now a string, and it's value is "120"

This video explains it very well:

Syntax

var variable [ = value ] [, variable2 [ = value2], ...]

var is the original variable declaration statement; let and const were added later. It will be available inside any function where it is declared. If declared outside a function, it's scope is global.

let variable [ = value ] [, variable2 [ = value2], ...]

The let statement also declares and (optionally) assigns a variable, but it will only be available inside the current block of the program. This is a true "local" variable. The advantage is that we can use the same variable name multiple places in the program without them interfering with each other.

const variable = value [, variable2 = value2, ...]

The const statement declares and (must) assign a constant value. It can not be changed or re-declared, but local variables can be created with the same name via the let statement. By convention, constants are named using all uppercase letters.

Note that even if you declare an object with const, you can still add properties to the object. e.g.

const my_obj = {}
my_obj.prop = "hello" //works just fine.

To stop an object having new properties added, use Object.preventExtensions(my_obj); 1. To stop properties being deleted, Object.seal(my_obj); and to stop the object being changed in any way, Object.freeze(my_obj);.

Also:

[Chapter 3] Variables and Data Types

Scope

The variables defined outside functions will be have global scope and can be accessed anywhere in the program. Those defined in a function will only be accessible inside the function but if a variable of the same name exists outside the function, it's value will be changed. If the let keyword is used, they will only be accessible inside the current block, and will not affect the value of variables outside the current scope. e.g.

var x = 1; // Here x is 1 and a global variable
let y = 1; // Here y is 1 and a global variable
var z = 1; // Here z is 1 and global
const Z = 1; // Here Z is 1 and a global constant
// Case matters: Z is not z.
// by convention, constants are written uppercase. 
// const Z = 2; // This would error. 
// Z = 0; // This would error.
function test() { //starting a new block.
  //Here x is undefined; var "lifts" to top of scope w/o value
  //Here Z is still 1. let does not lift.
  z = 2; //not a declaration. global var z is 2 from here down.
  for(let y = 2;y<3;++y) { //could be a function, if, for, etc.. 
    // Here y is already 2. parameters are part of block scope
    if (true) {
      var x = 2;//here x is 2
      let z = 3;//block scope, z is temporarily 3
      } //here x is 2 and z is 2
    var x = 3; //from here down, locally, x is 3
    let Z = 2; // Here Z is 2 (local scope)
    // Z = 2; // This would cause an error.
    // var Z = 2; // This would cause an error.
  }
}
test();
// Here x is 1
// Here y is 1
// Here z is 2
// Here Z is 1

https://stackblitz.com/edit/js-fpdxw2

var x = 1; // Here x is 1 and a global variable
let y = 1; // Here y is 1 and a global variable
var z = 1; // Here z is 1 and global
function test() { //starting a new block.
  //Here x is undefined; var "lifts" to top of scope w/o value
  z = 2; //not a declaration. global var z is 2 from here down.
  for(let y = 2;y<3;++y) { //could be a function, if, for, etc.. 
    // Here y is already 2. parameters are part of block scope
    if (true) {
      var x = 2;//here x is 2
      let z = 3;//block scope, z is temporarily 3
      } //here x is 2 and z is 2
    var x = 3; //from here down, locally, x is 3
  }
}
test();
// Here x is 1
// Here y is 1
// Here z is 2

Closures

A closure gives you access to an outer function's scope from an inner function (a function defined inside another function). In JavaScript, closures are created every time a function is created, at function creation time. Even if you call the function from outside the outer function scope, you still have access to the variables inside it.