JavaScript Variable Keywords (Var, Let, and Const)

Intro:
In JavaScript, a variable is something that acts as a container that can hold on to data (or a reference to data in the case of complex data types) that can be accessed by calling the name of the variable that said data is stored within. Variables are created from one of three different keywords: “var”, “let”, and “const”. Placing one of these keywords in front of a word will declare a variable using the word as the name of the variable. This variable name can then be assigned with “=” to any value you wish for the variable to hold or reference. Each keyword has a few specific properties that set them apart from one another. We will start with the “var” keyword.

Var:
The “var” keyword is the original variable keyword and has been present since 1995. If a “var” variable is declared within a function, then it is scoped to the inside of said function and the variable cannot be accessed outside of that function. “Var” variables are also hoisted, meaning that when the program runs, the “var” variables’ declarations (but not their value assignments) are invisibly brought to the top of the program and read before everything else. This allows var variables to be used and accessed before the point that they are declared at, though trying to do so will give you a value of undefined, which is the default value given to variables upon declaration. This type of variable can also be redeclared, meaning that having two “var” variables declared with the same name in the same scope will not result in any errors, with lines that declare and assign that variable at the same time simply being treated as just another value assignment.

Here are some code examples of what the “var” keyword can do:

Var variable declared, assigned, reassigned, and accessed/used by console log:

var someVariable;
someVariable = "hi";
console.log(someVariable); // logs: "hi"
someVariable = "greetings";
console.log(someVariable); // logs: "greetings"

Var variables can be function scoped:

function someFunction(){
  var someVariable;
  someVariable = "hi";
  console.log(someVariable); // logs: "hi"
};

someFunction();
console.log(someVariable); // logs: "ReferenceError: someVariable is not defined"

Var variables are hoisted:

console.log(someVariable); // logs: undefined
var someVariable = 21;
console.log(someVariable); // logs: 21

Var variables are redeclarable:

var someVariable = 21;
console.log(someVariable); // logs: 21
var someVariable = 37;
console.log(someVariable); // logs: 37

Now LET us continue on to the “let” keyword (very humorous, I know).

Let:
The “let” keyword was added to JavaScript in 2015 as a part of ES6. This keyword is not too different from the “var” keyword, but it does have a few key differences. The “let” keyword can be scoped to code blocks ( the “{}” that usually appears after things like “for” loops and conditional statements) in addition to functions. “Let” variables are not hoisted, and thus cannot be accessed or used before they are declared. “Let” variables cannot be redeclared, meaning two “let” variable declarations with the same name and scope create an error.

Here are some code examples for the “let” keyword this time:

Let variable declared, assigned, reassigned, and accessed/used by console log:

let someVariable;
someVariable = "hi";
console.log(someVariable); // logs: "hi"
someVariable = "greetings";
console.log(someVariable); // logs: "greetings"

Let variables can be function scoped or block scoped:

function someFunction(){
  let someVariable;
  someVariable = "hi";
  console.log(someVariable); // logs: "hi"
  if (1 === 1) {
    let someOtherVariable = "hello"
    console.log(someVariable); // logs: "hi"
    console.log(someOtherVariable); // logs: "hello"
  }
  console.log(someOtherVariable); // logs: "ReferenceError: someOtherVariable is not defined"
};

someFunction();
console.log(someVariable); // (doesn't run) would have logged: "ReferenceError: someVariable is not defined"
console.log(someOtherVariable); // (doesn't run) would have logged: "ReferenceError: someOtherVariable is not defined"

Let variables are not hoisted:

console.log(someVariable); // logs: "ReferenceError: Cannot access 'someVariable' before initialization"
let someVariable = 21;
console.log(someVariable); // (doesn't run)

Let variables are not redeclarable:

let someVariable = 21; // logs: "SyntaxError: Identifier 'someVariable' has already been declared"
console.log(someVariable); // (doesn't run)
let someVariable = 37;
console.log(someVariable); // (doesn't run)

The final variable keyword to discuss is the “const” keyword.

Const:
The “const” keyword was also a part of ES6 when it was added to JavaScript in 2015. This keyword has many of the properties of the “let” keyword (can be function-scoped or block-scoped, are not hoisted, and cannot be redeclared), but it has one big difference. “Const” variables must be assigned on the same line that they are declared on (initialization), and they cannot be reassigned. Trying to reassign a “const” variable will result in an error. Keep in mind that mutations done to complex data type attached to a variable are not reassignments, and thus do not create an error when done to a “const” variable.

Here are some examples displaying the properties of the “const” variable:

Trying to create Const variable without initialization:

const someVariable; // logs: "SyntaxError: Missing initializer in const declaration"
someVariable = "hi";
console.log(someVariable); // (doesn't run)

Const variable initialized and accessed/used by console log:

const someVariable = "hi";
console.log(someVariable); // logs: "hi"

Trying to reassign Const variable:

const someVariable = "hi";
someVariable = "hello"; // logs: "TypeError: Assignment to constant variable."
console.log(someVariable); // (doesn't run)

Const variables can be function scoped or block scoped:

function someFunction(){
  const someVariable = "hi";
  console.log(someVariable); // logs: "hi"
  if (1 === 1) {
    const someOtherVariable = "hello"
    console.log(someVariable); // logs: "hi"
    console.log(someOtherVariable); // logs: "hello"
  }
  console.log(someOtherVariable); // logs: "ReferenceError: someOtherVariable is not defined"
};

someFunction();
console.log(someVariable); // (doesn't run) would have logged: "ReferenceError: someVariable is not defined"
console.log(someOtherVariable); // (doesn't run) would have logged: "ReferenceError: someOtherVariable is not defined"

Const variables are not hoisted:

console.log(someVariable); // logs: "ReferenceError: Cannot access 'someVariable' before initialization"
const someVariable = 21;
console.log(someVariable); // (doesn't run)

Const variables are not redeclarable:

const someVariable = 21; // logs: "SyntaxError: Identifier 'someVariable' has already been declared"
console.log(someVariable); // (doesn't run)
const someVariable = 37;
console.log(someVariable); // (doesn't run)

Const variables still allow mutations of complex data types:

const someVariable = ["My", "car", "is", "blue."];
console.log(someVariable); // logs: ["My", "car", "is", "blue."]
someVariable[3] = "red.";
console.log(someVariable); // logs: ["My", "car", "is", "red."]

When to use each variable keyword:
Ok, so there are three different ways to declare a variable in order to store and reference data values. What makes one worth using over the other? “Var” variables are best used when working with older code, when you wish to make variables that aren’t affected by block scope or redeclaration errors, or when you simply want to hoist your variable declarations without writing them at the top of your code. Because block scope capability and redeclaration errors can easily be seen as good things that can better organize where variables should be usable in the code and can reveal accidental redeclaration of already-existing variables in the same scope respectively, “var” is usually ignored in favor of using “let” or “const”. The “let” keyword is used with any variable that is expected to be reassigned later on in the code. The “const” keyword is used with any variable that is expected to not be reassigned at all in the code, throwing an error in the case that it does somehow happen. Both the “let” and “const” keywords are used with variables that are desired to be limited to the confines of a code block.

Links to sources used:
-https://www.w3schools.com/js/js_variables.asp
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
-https://www.geeksforgeeks.org/javascript-variables/
-https://www.w3schools.com/JS/js_let.asp
-https://www.geeksforgeeks.org/javascript-let/
-https://www.w3schools.com/JS/js_const.asp
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
-https://www.w3schools.com/js/js_best_practices.asp
-https://www.freecodecamp.org/news/how-to-use-variables-and-data-types-in-javascript/
-https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
-https://stackoverflow.com/questions/76010295/when-should-you-use-var-let-or-const-in-javascript-code (the answer by nixanosize)