Variable Declarations

A variable declaration gives a name and optionally a data type to a variable. These declarations may also include an initial value. A variable cannot be used in a program before it is declared.

Keywords to declare variables in JavaScript are let, const, and var.

var keyword

It was the variable declaration before ES6 and is now mainly unused. However, you still may see older repositories using it, so it is important to understand what it is.

• Scope essentially means where variables can be used after declaring them.
• A variable can be function scope, local scope (within a block), or global scope.
• Variable declaration is global when it is declared outside a function (at top level).
• When var is declared inside a function it is locally scoped for use only in that function.

var hello = "hello"; // global
function helloFunction() {
  var hi = "hello"; // function local
  console.log(hi, hello); // this can be done because var "hello" is global
}
console.log(hi,hello); // error: "hi" is not defined

var can be re-declared and updated:

var hi = "hi";
var hi = "hello hi";
hi = "say hello";

The problem with var:

var hi = "hi";
var timesIveSaidHello = 5;
if (timesIveSaidHello > 3) {
  var hi = "I'm saying hello now";
}
console.log(hi); //"im saying hello now"

The problem is that var is function-scoped, not block-scoped. This can cause unexpected behavior when you redefine a variable inside an if block. This is why let and const are necessary.

let keyword

It is now the go-to variable declaration. It improves on var in many ways, including being block scoped.

let myItem = "banana";
let numberOfItems = 2;
if (numberOfItems > 1) {
  let myItem = "I have more than one item";
  console.log(myItem); // Output: "I have more than one item"
}
console.log(myItem); // Output: myItem is not defined

Here you can see that myItem is outside of its block and therefore is undefined. This shows that let is block scoped.

let can be updated within its scope but cannot be re-declared within the same scope:

// this will work
let banana = "banana";
banana = "new banana";

// this will not work
let banana = "banana";
let banana = "new banana";

However, if the same let variable is declared in different scopes, there will be no errors.

const keyword

Variables that are declared with const maintain constant values. Like let, const is block scoped. Unlike let, const cannot be re-declared or updated even within the same scope.

const hello = "hello";
hello = "now say hello"; // cannot assign new value to a constant variable
const hello = "say Hi"; // Error: variable hello has already been declared

This means that any const declaration must have an initialized value at the time of declaration.

However, when it comes to objects, const behaves differently. If we declare a const object, we can change the object’s properties but we cannot reassign the object itself.

Hoisting of let, const, and var

Hoisting is a JavaScript mechanism where variables and functions are moved to the top of their scope before code execution.

• let and const declarations are hoisted to the top but are not initialized.
• var is initialized as undefined.
• If you try to use a let variable before declaration, you’ll get a reference error.

console.log(greeter);
var greeter = "say hello";
// JavaScript interprets the above code as:
var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello";

In summary

• Understanding variable declarations is extremely important in programming.
• Understanding how and when to use these variables within the scope of your project will make designing an application much easier.
• Using const over let allows you to keep your code “DRY” (Don’t Repeat Yourself).
• The most important thing to remember is to keep your code simple.