DEV Community

loading...

Beginner JavaScript - 5 - Variables and Constants

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
・Updated on ・3 min read

Hey everyone πŸ‘‹πŸ»,

In this article, let us discuss about Variables and Constants in JavaScript. This is the fifth part of my Beginner JavaScript Series on Dev.

Variables - A Complete picture of var, let and const

Alt Text

What is a variable ?

Variable means anything that can vary or change. JavaScript includes variables which hold the data value and it can be changed anytime. JavaScript uses reserved keyword var to declare a variable.

Remember, A variable must have a unique name.

Let us see an example to understand more on variables. So in the below example, we declare two numbers - numberOne and numberTwo using the var keyword and then we define a sumTotal variable again using the var keyword and store the sum of the two numbers - numberOne and numberTwo.

Alt Text

Moving from var to let and const

let keyword

A variable defined using a let statement is only known in the block it is defined in, from the moment it is defined onward.
Variables declared using the let keyword are block-scoped, which means that they are available only in the block in which they were declare and NOT outside.

At the top level (outside of the function )
var rootVariable= 1242;
let blockScopedVariable = 2143;

console.log(rootVariable); // 1242
console.log(blockScopedVariable); // 2143

console.log(this.rootVariable); // 1242
console.log(this.blockScopedVariable); // undefined 
Enter fullscreen mode Exit fullscreen mode
Inside a function (but outside of a block)

In this case, let and var will have the same scope.

(() => {
  var a = 2142;
  let b = 4443;

  console.log(a); // 2142 (scoped to a function)
  console.log(b); // 4443 (scoped to a block)
})();

// Outside the function, you cannot access both the variables. 
console.log(a); // ReferenceError: a is not defined
console.log(); // ReferenceError: b is not defined
Enter fullscreen mode Exit fullscreen mode
Inside a block

Variables declared using let keyword inside a block can't be accessed from outside that block.

{
  var a= 42;
  let b= 43;
  console.log(a); // 42
  console.log(b); // 43
 // Both a and b are declared within the block, hence can be accessed within the block.
}
// a is declared using the var keyword inside a block, it can be accessed from outside 
console.log(a); // 42
// b is declared using the let keyword inside a block, it cannot be accessed from outside the block because it's scope is limited to the block in which it is defined in. 
console.log(b); // ReferenceError: b is not defined
Enter fullscreen mode Exit fullscreen mode
Temporal dead zone

Because of the temporal dead zone, variables declared using let can't be accessed before they are declared. Attempting to do so throws an error.

console.log(a); // undefined
var a= 43;
console.log(b); // ReferenceError: b is not defined
let b = 42;
Enter fullscreen mode Exit fullscreen mode

const keyword

const is quite similar to letβ€”it's block-scoped but we do have subtle differences between let and const as well. So let us discuss them first :

No reassignment

Variable declared using const can't be re-assigned.

const a = 23;
a = 33; // TypeError: Assignment to constant variable
Enter fullscreen mode Exit fullscreen mode

Note that it doesn't mean that the value is immutable. Its properties still can be changed.
So in essence this means that the variable will always have a reference to the same object or primitive value, because that reference can't change. Only the reference is immutable and not the value that is held by that variable.

Check my video on variables and constants to get more understanding on these:

So this is it for this one.

If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Spare 2 Hours ? If so, utilize them by creating these 10 JavaScript Projects in under 2 Hours

πŸ‘‰πŸ» Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

πŸ‘‰πŸ» Check out my YouTube Channel : https://youtube.com/thenerdydev

Discussion (0)