Declaring Variables Guide

#javascript #beginners #webdev #tutorial

For those of you looking to start your journey into JavaScript and web development, you might find yourself defining a lot of variables. The more you learn and discover the more complex aspects of JavaScript syntax, the more you will start to run into people using different words and variables to declare variables. If you find yourself asking questions like: "what is the difference between let and var?" or "why did they declare a variable without assigning it a value?" Then, this post is for you.

JavaScript has three main methods to declare and assign variables. Those three methods are let, const, and var. Which one you will use depends on the context and the scope in which you are declaring the variable. For greater understanding of how the syntax works, try coding along with the examples with replit. Replit is a free code editing platform that is great for practice.

Declaring Variables With Const

const is by far the most common method for declaring variables. Const is best utilized for declaring variables that you know are not going to change as your code is executed. Variables declared with const cannot be redeclared or reassigned. That being the case, variables declared using this method must be defined right away. Unless you know your variable is going to change, const should be your go to. Especially when you start getting into more complex and longer code, it can be difficult to keep track of variables that have already been declared. Declaring variables with const give an added peace of mind.

const variable1 = 'constant variable'
console.log(variable1)
=> constant variable
const variable1 = 'redefine'
console.log(variable1)
=> SyntaxError: Identifier 'variable1' has already been declared

Declaring Variables With Let

The next one up is let. let is for when you anticipate that your variable is going to change. For example, if you are using a variable as a counter value and the value is going to increment/decrement, it is a good idea to have a flexible variable. Another example might be if you want to create an empty object or array and push data to it later on. Because of the ability to be redefined, let variables do not need to be defined right away. With the added flexibility that comes with using let, make sure you are being vigilant and not redefining a variable that is being used elsewhere in a code. Redefining a variable that was not meant to be can cause issues in your code and be potentially difficult to debug.

let color = 'green'
console.log(var1)
=> green
color = 'blue'
console.log(var1)
=> blue

Declaring Variables With Var

The last one up is var. In general, it is best to avoid using this one. var can be tricky because it can be redeclared and redefined, allowing you to accidentally reuse the same variable over and over again, reassigning and/or redeclaring it every time. This can be problematic and difficult to debug, depending on the scope that the variable is used in.

var number = 'one'
console.log(number)
=> one
number = 'two'
console.log(number)
=> two
var number = 'three'
console.log(number)
=> three

Scope

Another important thing to keep in mind is the scope in which a variable is declared. Variables declared in function scope do not follow the same rules as a variable declared in global scope. Global scope is when a variable is declared outside of any function and a global variable is accessible anywhere in the code. Global variables declared with const cannot be redeclared or reassigned in the global scope.

const xvar = "global scope"
console.log(xvar)
=> global scope

Variables declared inside the scope of a function play by a different set of rules. Functions seek the definition of a variable locally before seeking it globally. What that means is that if a variable is declared inside of a function, and that variable is called back inside of the context of that function, the function is going to recognize the declaration from inside the function.

const xvar = "global scope"

function x() {
  const xvar = "function scope"
  return console.log(xvar)
}
x()
=> function scope

Conversely, if you do not have the variable defined in the context of the function, it will seek the global definition.

const xvar = "global scope"

function x() {
  console.log(xvar)
}
x()
=> global scope

As you learn more and become more comfortable with JavaScript syntax, you will come to learn what method to declare variables with. The main takeaways should be to use const when feasible to avoid having the possibility of changing the variable, use let when you know your variable is going to change, and use var... never. Knowing when to use which method to declare your variable will help you level up and progress on your coding journey. Now you are ready to properly declare your variables!