JavaScript 001: Variables

There’s more than one way to skin a cat.

This is the beginning of a mini series on JavaScript concepts. The expectation is that the readers have minimal experience in JavaScript, so if you’ve been around the block then some of this may be review. That’s not to say that the more experienced folks will walk away empty handed. My goal is to go sufficiently deep into a topic so as to enlighten those whose grasp may be wide but superficial.

Let’s dive right in to JavaScript variables: assignments and declarations.

What do the following 3 examples have in common?

const myVariable = 6;          //Example 1
let mySecondVariable;          //Example 2 
mySecondVariable = myVariable; 
var myThirdVariable = 'abc';   //Example 3

In each of the above three examples, a variable is declared and assigned. The declaration is how we tell the computer “this is a variable, and this is its name”. The assignment is how we give it an identity, beyond ‘undefined’, to which a newly declared variable defaults.

You may have be thinking “if the above examples effect the same result, why do they appear so different in form and structure?”

Good question. Let’s take a deeper look, this time by focusing on their differences.

Example 1:

const myVariable = 6;          //Example 1
console.log(myVariable) //-> 6

Here, we declare a new variable, called myVariable, with the const keyword. The “=” to the right of the variable name then assigns the newly created variable to the value 6. As you may have guessed, const stands for ‘constant’, and is used to declare and assign a variable which cannot later be re-declared nor reassigned. Variables declared with const also have to be assigned in the same line. One does not simply declare const without providing the variable with an assignment in the same line. That would throw an error.

let mySecondVariable;          //Example 2 
mySecondVariable = myVariable;
console.log(mySecondVariable); //-> 6

The let keyword, on the other hand, gives you the liberty to assign your variable when you please. If I used const instead of let in the above example, the code above would fail at line one.

The declaration occurs at line 1, while the assignment occurs at line 2. It is sometimes useful to declare a variable without assigning it a value. The code above can also be shortened to use the same syntax as example 1, as seen in the example below.

let mySecondVariable = myVariable; //Same result as Example 2
console.log(mySecondVariable); //-> 6

The example directly above affords the same result as Example 2. Unlike variables declared with const, variables declared with let can be reassigned. Neither variables can be re-declared, however. See:

const myVariable = 6;     
myVariable = 7; //-> Error!
const myVariable = 8; //-> Error 
let mySecondVariable = myVariable; 
let mySecondVariable; //-> Error, variable already declared!
mySecondVariable = "new assignment"; //-> no error :)
console.log(mySecondVariable); //-> "new assignment"

There is an additional way to declare and assign a variable, this time using the var keyword.

var myThirdVariable = 'abc';   //Example 3
var myFourthVariable; 
myFourthVariable = 56; 

Like variables declared with let, variables declared with var need not be assigned in the same line in which they are declared. Additionally, their values can too be reassigned.

Unlike variables declared with const and let, however, variables declared with var can be re-declared, too.

Huh? Yeah, it’s a thing. See:

var hippo; 
var hippo; 
var hippo; 
// ... no error 

The ability to re-declare a variable is generally considered a negative aspect of the var keyword. It’s generally advised to use let or const instead of var for this, and other, reasons.

At this point, it may be intuitive that variables must first be declared before being assigned a value. Unfortunately, JavaScript can give the appearance that this rule can be broken. See:

x=4; 
console.log(x) //-> 4

The above code will not return an error as presently written. Note that there is no explicit declaration of the variable named x. Yet, the assignment occurs successfully, proven by the fact that the value 4 is returned when x is logged to the console.

Oddly enough, the JavaScript engine will implicitly declare a variable x, and then assign it the value 4, at run-time.Thus giving us the appearance that x was assigned a value without being declared. Sneaky sneaky.

This, too, is considered a negative feature of JavaScript. You should always explicitly declare variables. Do not rely on the engine to do this for you implicitly at run-time. More on this in a later post.

If you’re concerned about accidentally forgetting to explicitly declare a variable, you can set your code to run in ‘strict mode’ by including the text ‘use strict’ at the top of your code. See:

'use strict'; 
x=4; //-> Error!!! X is not declared... (or something like that)

So far, we’ve discussed variable declaration and assignment using the keywords const, let, and var. We’ve also noted that with let and var, the declaration can occur without an inline assignment. Variables assigned with the const keyword cannot be re-declared nor reassigned. Variables declared with the let keyword can only be reassigned, not re-declared, and variables declared using var can be both re-declared and reassigned. Whew.

There are other differences between these keywords, but before finishing this article, I want to touch on one more point: variable declarations with var are hoisted.

Hoisting is when a variable (or function) declaration is moved to the top of the enclosing scope. In other words, its name can be accessed without error before it is explicitly declared.

Yeah, yeah, I know it’s trippy. Take a look:

console.log(a); //-> undefined
var a; 
a = 12; 
console.log(a); //-> 12
console.log(b); //-> ReferenceError: Cannot access 'b' before init..
console.log(c); //-> ReferenceError: Cannot access 'c' before init..
let b = 13; 
const c = 14;

We successfully accessed the variable declaration a before we explicitly declared a in our code. This was not true for variables b and c, declared with let and const, respectively.

Did you notice in the above example that the assignment remains un-hoisted? See how we returned ‘undefined’ when the value of a was logged before the explicit declaration and assignment. It can be easy to forget that the assignment itself is not hoisted.

We’ll call it a day for now. Next stop: scope.

Cheers!

TL; DR: You can declare and assign variables with const, let, and var. Try to use const or let.