Categories
Featured Development Resources HTML/Javascript

Let vs Var Javascript Example

JavaScript was originally designed as a scripting language for widgets with a low level of complexity, over time JavaScript programs became more and more complex the language got a bad reputation due to annoying bugs that could arise from it’s original simplistic design. 

ES6 added a number of features improving JavaScript and two of those are the Let and Const keywords used when defining variables.

The Var Keyword

If you’re looking at older JavaScript you most likely have seen the var command, which is function scoped.

function showScope() {
  var hello = "hello"
  console.log(hello)
}

showScope() // hello
console.log(hello) // VM497:1 Uncaught ReferenceError: hello is not defined

This seems simple enough, but variables declared with var are hoisted to the top of their scope which allows for “strange” behavior like being able to use variables before they have been defined in the code.

function showScope() {
  console.log(hello)
  var hello = "hello"
}

showScope()
// results in undefined no error, the var hello has been
// hoisted to the top of the function

You can also redefine variables declared with the var keyword even when in ‘strict’ mode.

function variableRedefine() {
  "use strict"
  var hello = "hello"
  var hello = "goodbye"
  console.log(hello)
}

variableRedefine()
// displays goodbye, we have been able to redefine goodbye
// despite already declaring with var

These two behaviors of var can often be a source of bugs for those unfamiliar with this behavior and this is where the let keyword introduced in JavaScript ES6 comes in.

The Let Keyword

The let keyword allows you to define variables within the current scope, but without the hoisting behavior.

function showScope() {
  console.log(hello)
  let hello = "hello"
}

showScope()
// ReferenceError: Cannot access 'hello' before initialization
// Nice, we get a proper error with let!

Also, you can’t redefine a variable already declared with let, eliminating the possibility of some sometimes very difficult bugs that can occur with var.

function showScope() {
  let hello = "hello"
  let hello = "goodbye"
  console.log(hello)
}

showScope()
// SyntaxError: Identifier 'hello' has already been declared

The Const Keyword

The const variable allows you to define variables that follow the same rules as let with the difference being that the bindings are constant, meaning they can’t be redefined.

const amConstant = "yep"
amConstant = "nope"
// TypeError: Assignment to constant variable.

However just because the bindings are constant doesn’t mean that values can’t be changed, such as if you use const when defining an object which is definitely something to be remembered.

const amConstant = {}
amConstant.text = "I am?"

console.log(amConstant.text)
// I am?

Variables Defined Without Var, Let or Const

There’s another type of variable declaration that’s you’ll come across and that is no keyword definitions.  These variables are just like var variables.

Note that you can’t define variables like this with strict mode on.

"use strict"
hello = "hello"
// ReferenceError: hello is not defined

The best practice for any JavaScript projects with anything above a basic level of complexity is to enable use strict and never define variables without using let or const, and to always use const whenever a variable does not to be changed after definition. 

This will allow you to avoid annoying bugs, but it’s still good to understand the var keyword as you will run into it whenever looking at older JavaScript code. 

Conclusion

The addition of the let and const keywords in JavaScript ES6 are definitely a welcome addition, and there’s really no reason not to use them as they will make your code more understandable and allow you to avoid time-consuming bugs.