A Beginner's Guide to JavaScript Variables
Are you one of those beginners who find variables to be a little confusing? A variable is the most basic concept a programmer learns when he starts his journey. It is easy and straightforward. However, there are many small things frequently missed when teaching or learning variables.
This article will only focus on JavaScript variables. Known as the language of the web, JavaScript is one of the finest programming languages. It is very popular, and its presence is also seen in popular communities such as LiveEdu, GitHub, StackOverflow, etc.
Definition: JavaScript variables are used to store information in containers. It can be used to store any type of value including string, number, array, etc. Every value that you store in JavaScript uses a name (known as variable name) for storing and referencing purposes.
To understand how a variable works, we need to understand three important terms: Declaration; Initialization; and Assignment. It doesn’t matter which programming language you are using, the concept of how variables are created and assigned will help you understand higher concepts more confidently.
Declaring the type
When you declare a variable, you register that variable with the name and also define its scope at the time of declaration.
Initializing a variable
Variable initialization automatically happens after you declare a variable. When initializing, memory is allocated by the JavaScript engine allowing you to assign value to it.
Assigning a value
The last step comprises of assignment and is done when a value is set.
How to declare variable type in JavaScript?
Declaring variable is very easy. There are already available constructs you need to use to declare a variable.
var
var is the most used way of declaring a variable. The below code explains how to do it.
var variable1; // declaring and initializing a variable.
variable1 = 5; // Assigning a variable.
Alternatively, you can use the below code to do the declaration, initialization, and assignment in a single line of code.
var variable1 = 5;
Note: When you declare a variable inside a function, its scope is related to the function itself. If you declare a variable outside the function, it has a global scope. We will cover it in the later part of the guide.
const
const is made available from ES6(ES2015) specification.
const is a used to assign a value to a variable once, and it always works at the block level. This means that its scope is bound to the block level. So, what are the use case of const?
const can be used when you are working with an iterator or when you want to declare a value once. However, const is not a solution to declare immutable variables. It works in a different way. It ensures that the reference is immutable, but doesn’t do the same for the value. This means that the value can be changed, but re-assignment cannot be done with const.
Let’s see an example.
function example() {
const x = "y"
if (true) {
const x // variable not assigned, SyntaxError
const x = "b"
foo = "z" // variable cannot be re-assigned, SyntaxError
console.log(x)
// b as const is available in this scope
}
console.log(x)
// y as const is available to the higher scope.
}
let
let is also available in the ES6 specification. It works similar to const, however it can be used more freely compared to const. If you are bored with var, you can use let in place of it. So, how does let differs from var? let enables you to have more scope-level control compared to var. This control can help you write more meaningful code which is easy to read and manage. With let, you can control variable to block. Let’s see an example.
let create;
create = 5;
//one line declaration, initialization and handling.
let create = 5;
Lessons Learned
Things to learn from the different ways of declaring variables are as follows:
- Use var if you are not sure which one fits best.
- const is great for local variable initialization, especially in iterators.
- let can be used in place to var if you know what you are doing.
- let is good for working with block level control. For example, you can use it while iterating a loop. This way you won’t have to worry about similarly named variables used previously.
Final Conclusion
I hope you liked the article. JavaScript is a vast language and it is advisable to visit some top JavaScript blogs regularly. If you have anything to add to the guide, don’t forget to add it in the comment section below.