JavaScript Let, Const, and Var Declarations

JavaScript Variables

I want to go over the basics of JavaScript and declaring variables. If you’ve been using JavaScript for a while you are probably most familiar with using the var keyword to declare a variable.

Declaring a Variable

var rubberChicken = "Mr. Gobbles";

Now, this is a funny variable for sure. I don’t like using foo. The var keyword in JavaScript is creating a new variable or a placeholder for a value. There are some interesting things that can happen with what we call scope on this newly created variable. In most programming languages that use brackets {}, an open and close of brackets signifies closure of a statement and helps to define the scope of our variables. When I encountered this initially it was somewhat confusing to understand (especially coming from a C# background). JavaScript has a feature called hoisting when using the var keyword. In JavaScript, variable declarations are processed before any code is executed. In other words, it hoists this declaration to the top of the stack at execution time.

An example of hoisting explained

Here is an example of how the variables declared with var get moved to the top of the stack at execution. In my opinion, it’s best to declare and initialize variables with a value if possible. It helps to avoid this type of code smell. var eggs = 2;

eggs = 2;
var eggs;
 
// is understood by browser as:
var eggs;
eggs = 2;

Here is another example, and one done in somewhat poor taste. You shouldn’t be able to change the gender of rubber chickens like this (rubber roosters?). You’d think that this is defining the variable local to this block inside our brackets {}, this is not what happens though. We are setting our global variable of the same name. This is one reason why variable names are important, especially with global variables.

//scope is global on our rubber chicken
var rubberChicken = "Mr. Gobbles"; 
if (rubberChicken === "Mr. Gobbles") {
  var rubberChicken = "Mrs. Fryer";
  console.log(rubberChicken );//output: Mrs. Fryer
  //our closure these brackets doesn't mean that the variable is only present within the brackets. 
}
console.log(rubberChicken); // output: Mrs. Fryer

Let to the Rescue

Starting with the ES6 implementation of JavaScript the let keyword was introduced. let is similar to the var keyword in that it is how we can define our variables, but it also was designed to help with the hoisting issues of variables that we discussed with var. The use of let does not promote hoisting of variables. Pretty sweet, right? Before this, it could be a struggle if you had global variables being defined and then later on a function modifying that global when that was not what was intended. let solves this, and promotes a more intuitive feel when using variables in JavaScript.

var neoPreneChicken = "Drumstick";
let rubberChicken = "Mr. GobblesWorth";
if (true) {
    var neoPreneChicken = "Drumstick and Waffles";//scope is global
    let rubberChicken = "Mrs. WhiteMeat"; //scope is (local) block-level
    console.log(neoPreneChicken);//Drumstick and Waffles
    console.log(rubberChicken);//Mrs. WhiteMeat
}
console.log(neoPreneChicken);//Drumstick and Waffles
console.log(rubberChicken);//Mr. GobblesWorth

As you can see the use of var enables hoisting on the variable neoPreneChicken as it is global in scope. Using let prevents this type of behavior and removes the hoisting behavior. By the way, I love chicken and waffles.

What About Const

We should discuss the definition of immutability. The definition of immutable in programming is that once a variable or object is created it cannot be changed. This is not what const represents in JavaScript. The only thing that’s immutable when using const is the binding of our variable. If you bind to an array, you can still push or pop. If you bind to an object you can modify the object. If it’s something like a string or number though you’ll not be able to reassign and get an Uncaught TypeError, this is because it’s a primitive type and cannot be reassigned to another type.

const bakersDozen = 13;
console.log(bakersDozen);
bakersDozen = 12; 
console.log(bakersDozen); //throws Uncaught TypeError: Assignment to constant variable.

However if use binding of our const bakersDozen to something like const bakersDozen = {eggs :13}; we will see that our binding is on an object, rather than a number. We can change the values of this object. The previous example our binding was on a number, which could not be altered.

const bakersDozen = {eggs :13};
bakersDozen.eggs = 12; 
console.log(bakersDozen['eggs']); //output: 12
//you can also add properties to the object
bakersDozen.chickenName = "Mrs. Eggs";
console.log(bakersDozen.chickenName);

If you’re really interested in making an object immutable you will want to use Object.freeze(bakersDozen) to stop the changing of it, but this still does not mean that it’s completely constant. If you have objects tied to object properties, those are still modifiable. What’s lesson in JavaScript? It’s hard to create a truly immutable object or variable, as attributes or properties of children can still be modified. By the way, I love Breakfast food, and think that eggs are absolutely delicious.

via Gfycat

Leave a Reply

Your email address will not be published. Required fields are marked *