How do I declare variables in JS?

When do I use var, let, or const? Why use one over the other?

Variable Declaration: var versus let

We should always use let over var. var has a few pitfalls that we like to avoid when declaring variables.

Var Pitfalls

var has two big pitfalls: how it is hoisted and re-declaration / reassignment.

Hoisting

A variable declared with var will be defined and initialized as undefined before the variable is assigned with the value you gave. For instance:

var helloWorld = "foo bar";

JS will hoist the variable such that is interpreted as:

var helloWorld; // helloWorld => undefined
helloWorld = "foo bar" // helloWorld => "foo

Declaring the Same Global Variable You can declare the same variable with var and reassign the variable you defined globally without warning because of local scoping.

Ex:

var helloWorld = "foo";

function world() {
  console.log(helloWorld); // undefined
  var helloWorld = "tomorrow";
  console.log(helloWorld); // "tomorrow"
}
console.log(helloWorld); // "foo"
world();
console.log(helloWorld); // "foo"

var helloWorld = "fooLand";
console.log(helloWorld); // "fooLand"

We are able to re-declare and assign the variable helloWorld without an error. Beyond that we could have made helloWorld a different data type entirely the second time. If we were expecting a String for helloWorld somewhere in our program later but we re-declared it to a Number that would break all the things.

let: How it's different

let is used to prevent the var pitfalls. With hoisting for instance, let declares the variable but does not initialize it so it is not undefined.

Hoisting Here's the breakdown of how let is interpreted:

let helloWorld = "foo bar";

with JS Hoisting that is interpreted as:

let helloWorld; // helloWorld => Reference Error
helloWorld = "foo bar" // helloWorld => "foo bar"

Declaring the Same Variable The great benefit of let is that you cannot re-declare the same variable within a block. Taking the same example above but with let:

Ex:

let helloWorld = "foo";

function world() {
  console.log(helloWorld); // Reference Error: Cannot access 'helloWorld' before
  let helloWorld = "tomorrow";
  console.log(helloWorld); // "tomorrow"
}

console.log(helloWorld); // "foo"
world();
console.log(helloWorld); // "foo"

let helloWorld = "fooLand"; // SyntaxError: Identifier 'helloWorld' has already been declared
helloWorld = "fooLand";
console.log(helloWorld); // "fooLand"

Quick Note on const const is essentially the same as let except you cannot reassign the variable once it has been assigned. Using the above example:

const helloWorld = "fooLand"; // helloWorld => "fooLand"
helloWorld = "fooLand"; // TypeError: Assignment to constant variable

Here, you can't reassign the const like you were able to do with the let. The convention is that everything should be a const unless you will need to update the value.

React Tip Most things in react should be consts. If you are reassigning and updating a variable that needs to be accessed outside of it's block scope, most likely that should be stored in state.

Scope

The scope for var and let are a bit different.

var It is important to note that var is globally and functionally scoped. Meaning, if you declare a var outside of a function it becomes available throughout the entire window 😬. If a var is declared within a function it is only available and accessible within that function.

let Let is block-scoped meaning it only exists (or is available and accessible) within a code block or between { }. Once you exit the { } where the let was declared the variable dies and can be redclared in another block.

const has the same scope has a let variable

A Thing You Really Shouldn't Do™

Because of how JavaScript works, you can also declare a variable without any of var, let, or const, which will hoist the variable to the global scope. Don't do this, as it will make you sad. e.g.

function ohNo() {
  pleaseDont = "tomorrow";
  console.log(pleaseDont); // "tomorrow"
}

console.log(pleaseDont); // Uncaught ReferenceError: pleaseDont is not defined
ohNo();
console.log(pleaseDont); // "tomorrow" 🤡