Variables in Javascript

Variables in Javascript

The variable is a named space in memory that stores value. You can say that it is a container for data.

·

7 min read

Variables are like containers. Variables hold related data in memory. Javascript has three ways to define variables:

  1. By using Let

  2. By using Var

  3. By using Const

Let's discuss each of them quickly.

Using Let

let is the latest way of declaring variables in Javascript. let the keyword was added in 2015 in Javascript. All modern browser supports let and it is the recommended way by the community. While seeing its syntax we will also see its benefits and working style.

Syntax of Variable Declaration using Let

let variableName = value;

let is blocked scope

let is blocked scope variable. This means you can not use variables declared using let outside of its scope. Anything inside curly braces {} is a block. If you want to read more about the scope please refer to my below article.

let value = 5

if(value < 5) {
    let greet = "Hello"
    console.log(greet) // Will Print Hello
}

console.log(greet) // Will throw Uncaught Reference Error

let cannot be re-declared

You can update variables declared using let but you cannot re-declare them in the same scope. Which is good practice and prevents a lot of bugs.

let greet = "Hello"
let greet = "New Declaration" // will throw error. due to redeclaration
greet = "Hey" // Will Work because we are updating

Re-declaration in the same scope is not allowed. But Re-declaration in other scopes is totally valid. Because in other scopes Javascript will treat them as different variables.

let greet = "Hello"

if(true) {
    let greet = "Re-declation in different scope" // Allowed
    console.log(greet) // Will work fine
}

console.log(greet) // Will Print Hello

Hoisting of let

Hoisting in JavaScript is a behaviour in which a function or a variable can be used before declaration. Variables declared using let will be hoisted at the top. However let declaration will not be initialized during hoisting. So when you try to access that variable it will throw an error.

console.log(value); // throws error
let value

Using Const

To declare constant values in Javascript, we use const. Values declared using const will not change its values means you cannot update const variables. They are immutable.

Syntax of Variable Declaration using Let

const variableName = value;

const is blocked scope

Just like letconst is also blocked scope variable. This means you can not use variables declared using const outside of its scope.

const value = 5

if(value < 5) {
    const greet = "Hello"
    console.log(greet) // Will Print Hello
}

console.log(greet) // Will throw Uncaught Reference Error

const cannot be re-declared

You cannot re-declare const variables in the same scope, which is good practice and prevents a lot of bugs.

const greet = "Hello"
const greet = "New Declaration" // will throw error. due to redeclaration
greet = "Hey" // Will Work because we are updating

Re-declaration in the same scope is not allowed. But Re-declaration in other scopes is totally valid. Because in other scopes Javascript will treat them as different variables.

const greet = "Hello"

if(true) {
    const greet = "Re-declation in different scope" // Allowed
    console.log(greet) // Will work fine
}

console.log(greet) // Will Print Hello

Hoisting of const

Hoisting in JavaScript is a behaviour in which a function or a variable can be used before declaration. Variables declared using const will be hoisted at the top. However, const declaration will not be initialized during hoisting. So when you try to access that variable it will throw an error.

console.log(value); // Using before declaration. So throws error
const value = 4

Using var

var is the traditional way to declare variables in Javascript. So you will find a lot of old tutorials have used it. var causes a lot of issues like hoisting issues and redeclaration is possible. But After ES6, let is the recommended way to declare variables. So you should not use var. I want to make this tutorial up-to-date and future-proof. So I won't showcase var here. As it is not used anymore. But to understand the limitations of var let's discuss the difference between var and let

The difference between var and let

varlet
var is global scoped variables. This means you can access them anywhere in the code.let is blocked scope variable. This means you can only access them in the current block.
Redeclaration is allowed.Redeclaration is not allowed.
Hoisting is allowed. You can use var variables before the declaration.Technically Hoisting is not allowed. As you can not access let variables before the declaration.

Guidelines for naming Variables in Javascript

  • Variables cannot start with numbers. They must start with letters (A-Z or a-z), $ sign or underscores (_).

  • Avoid using reserved words while naming a variable like (let, var, const, if, for, etc)

  • Using Camel-Case is the preferred way of naming variables. Ex firstName, totalPrice.

  • Use descriptive names. Choose a variable name that describes the purpose.

  • Be consistent with the naming style. This will improve code readability and maintainability. Choose a convention like CamelCasing and follow it consistently.

  • Avoid using single-letter names. Unless they are common programming conventions. (Like i for index in for loop)

  • Be cautious while naming the variables that might conflict with higher-scope variables or external-library's variables.

Conclusion

So to summarize, there are three ways to define variables in JavaScript: let, var, and const.

  1. let is the recommended way to declare variables in modern JavaScript. It was introduced in 2015 and is supported by all modern browsers. Variables declared with let have block scope, meaning they are limited to the block (within curly braces {}) in which they are defined. They cannot be re-declared within the same scope, but they can be updated. Variables declared with let are hoisted to the top but not initialized during hoisting.

  2. const is used to declare constant values that cannot be updated. It also has a block scope, similar to let. Re-declaration of const variables within the same scope are not allowed, but it can be done in different scopes. Variables declared with const are hoisted to the top but not initialized during hoisting.

  3. var is the traditional way to declare variables in JavaScript but is not recommended after the introduction of let. It has hoisting and redeclaration issues and let is now the preferred option.

The blog focuses on explaining the usage, scope, re-declaration rules, and hoisting behaviour of let and const while omitting the discussion of var providing an up-to-date and future-proof tutorial.

So, guys, That’s all you need to know about Variables. Please let me know if I miss something. I’ll be happy to learn from you. Till Then Keep Loving, Keep Coding. I’ll surely catch you up in the next article. Jai Hind, Vande Mataram 🇮🇳

Remember no teacher, no book, no video tutorial, or no blog can teach you everything. As one said Learning is Journey and Journey never ends. Just collect some data from here and there, read it, learn it, practice it, and try to apply it. Don’t feel hesitant that you can’t do that or you don’t know this concept or that concept. Remember every programmer was passed from the path on which you are walking right now. Remember Every Master was Once a Beginner. Work hard and Give your best.

💡
Subscribe To My Newsletter For More Such Content.

Sounds too complicated? Read the Simplified Versions

Read more about React & JavaScript

Follow me for more such content

Did you find this article valuable?

Support Jay Tillu by becoming a sponsor. Any amount is appreciated!