DEV Community

loading...
Cover image for Variables in JavaScript

Variables in JavaScript

saramccombs profile image Sara McCombs (she/her) ・3 min read
Photo by Tudor Baciu on Unsplash

Let's talk about variables in JavaScript.

There are four variable declaration options -- var, let, const, and an implicit global. Each of these has unique characteristics that make them suited for specific situations. Somewhat akin to using the right tool for the job.

Before we get further into those, let's review variable naming rules.

All variables must be identified with unique names, however, the general rules for constructing these unique names are:

  • Names can contain letters, digits, underscores, and dollar signs.
  • Names must begin with a letter
  • Names can also begin with $ and _
  • Names are case sensitive (y and Y are different variables)
  • Reserved words (like JavaScript keywords) cannot be used as names

Awesome!

Let's briefly talk hoisting. I plan to revisit this later with some greater detail but getting a quick definition will provide some clarity moving forward.

30-second Explanation of Hoisting

Hoisting is a behavior of JavaScript in which variable and function declarations are "moved to the top" of their scope.

Due to the two-phase nature of the JavaScript engine, variable declarations (and declarations in general) are processed before any code is executed.

Declaring a variable anywhere in the code is equivalent to declaring it at the top of their scope. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved, or hoisted, to the top of their scope.

var Variables

  • Pre-ES 2015

  • Variables declared using var are created before any code is executed in a process known as hoisting. Their initial value is undefined.

  • Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value, unless another assignment is performed.

  • Can be re-declared

  • Can be re-assigned

MDN Docs - var

let Variables

  • New with ES 2015

  • let allows you to declare variables that are limited to a scope of a block statement, or expression on which it is used, unlike the var, which defines a variable globally, or locally to an entire function regardless of block scope.

  • let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

  • Can be declared with no initializer.

  • CanNOT be re-declared (raises a SyntaxError)

  • Can be re-assigned

MDN Docs - let

const Variables

  • New with ES 2015

  • The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable — just that the variable identifier cannot be reassigned.

  • All the considerations about the "temporal dead zone" apply to both let and const.

  • A const cannot share its name with a function or a variable in the same scope.

  • The scope rules for const are the same as those for let block-scope variables.

  • An initializer for a constant is required. You must specify its value in the same statement in which it's declared. (This makes sense, given that it can't be changed later.)

  • CanNOT be re-assigned

  • CanNOT be redeclared

MDN Docs - const

Global Variables

If you assign a value to a variable that has not been declared using any of the above keywords, it will automatically become a global variable.

Global variables declared this way are said to have an implicit declaration.

Globals are usually bad, but they are well-suited for when you want to call a particular function from literally anywhere in your code.

However, if you really need/want to use a global variable, do so explicitly. This will help to explain other readers of your code that you did it intentionally.

W3Schools - "Automatically Global"

Discussion (0)

pic
Editor guide