JavaScript ES6 Variables

Variables are the basic building blocks of any JavaScript program. Variables are how you store values for later use in your program.

Declaring a Variable

You must declare a variable before you can use it.

Here is an example of a variable declaration:

var x = 2

We use the var keyword to let JavaScript know we are declaring a variable. The x represents an identifier we provide to name our variable. Finally, we assign our variable x with a numeric value of 2.

More on Identifiers

The name we give a variable is called its identifier. In the above example, x is our identifier.

Identifiers typically describe the variable they declare. For example, firstName may be used as an identifier to declare a variable storing someone's first name:

var firstName = "Bob"

It's important to remember that identifiers make your code more readable and help describe what the program is doing. There are a few rules that apply to identifiers:

identifiers can't be keywords

JavaScript has a number of predefined keywords it relies on. For example, var is a keyword reserved for declaring variables. Below is a list of reserved words that can't be used as identifiers in JavaScript:

identifiers CAN contain alphanumeric characters, but can't begin with numbers. For example:

var number2 //valid declaration
var 2number //invalid declaration

identifiers can't contain spaces and special characters other than $ and _

Remember that variables must be initialized before they can be used. Additionally, you can initialize variables before assigning them values. For example:

var x
x = 3

Using a Variable

After declaring our variable x, we can now use it in our program.

var x = 2
x + 2
//returns 4

Notice how we can use our declared variable x to perform basic arithmetic. We use the operator to add 2 to x, resulting in a returned value of 4.

Variable Scope

Every variable you create in JavaScript has an associated scope. Scope refers to a variable's access from different parts of the program.

There are three types of scope in JavaScript. They are:

global scope

A variable with global scope can be accessed from anywhere in the program.

Example:

var x = 2
function add(){
  return x + 2
}

//we are able to access x from within our add function since it is a global variable.

local scope

a variable with local scope can be accessed only within the function it is defined.

Example:

function add(){
  var x = 2
  return x + 2
}
console.log(x)

//this will throw an error saying x is undefined.

block scope

A variable can only be accessed within the block it is defined.

Example:

function add(){
  var x = 2
  {
    let x = 4
  }
  return x + 2
}

//this will evaluate to 4 because the assignment within the block {} has block level scope and is only available within the {}.

Declaring Variables with var vs. let vs. const

In the above example, you probably noticed the use of let rather than var for declaring our block level variable. If we would have used var instead of let for the second declaration of x, it would overwrite the initial value of 2 and return 6 instead.

It turns out there are three keywords for defining variables:

var

var is the default declaration keyword for variables. Remember that var indicates function scope only.

let

let was introduced with ES6. The let keyword gives a variable block level scope. let is preferred over var because it prevents you from defining the same variable twice within the same block.

const

const is similar to let in terms of block level scope. The only difference between const and let is that const cannot be reassigned. You also can't declare a const without assigning it.

const x = 4
let y = 4
y = 5 // this is ok
x = 5 // this will throw an error

const y //this will throw error, you must assign y a value

Remember that the idea behind these declaration types is to control a variable's scope and outside access to that variable..

Conclusion

With ES6, there are few reasons to use var over let when defining variables. Remember that variables are ways to store values for later use in your program. You control a variable's scope with var, let, and const.

Next, we'll look at ES6 operators and supported data types.

Your thoughts?