Today article we are going to discuss var and let and const feature. Most people worked on var but not sure about the let and const. Because var is more flexible than let and const.
First why var is more flexible than let and const.
var can easy to access between the function and files, can you declare var as global, re-declare the variable and update the values.
x declared
// x is Declared var x = 1 // Output is 1 document.write(x)
x re-declared
// x is Declared var x = 1 // x is Re-declared var x = 2 // Output is 2 document.write(x)
x re-declared and value updated
// x is Declared var x = 1 // x is Re-declared var x = 2 // x value is updated to 3 x = 3 // Output is 2 document.write(x)
The example described its positive, but the negative of var is totally different if you are including more than one file in your project. if you are using the same variable in the first and second JavaScript file it will overwrite the values without throwing the error message. This will happen in same JavaScript file also if the variable is able to overwrite and will return incorrect result-set.
// first.js // x declared var x = 1
// second.js // x declared var x = 2
Let’s include the first and second.js file into HTML.
<script src="first.js"></script>
<script src="second.js"></script>
<script>
// Output is 2
document.write(x)
</script>
The output is 2 because x is assigned in first.js and second.js x is re-declared with value 2.
let work same like var, but you cannot re-declare the variable again if its already declared inside or outside the function. The advantage of let is it will throw an error message if we try to re-declare the variable again. So it’s a safer side that variable will not be re-declare again, but if you want to overwrite the value you can update.
x declared
// x is Declared let x = 1 // Output is 1 document.write(x)
x Re-declared
// x is Declared let x = 1 // x is Re-declared let x = 2 // error document.write(x)
Above code will throw error message `Identifier ‘x’ has already been declared`
x Declared and value update
// x is Declared let x = 1 // value updated x = 2 // Output is 2 document.write(x)
x Re-declared and value update
// x is Declared
let x = 1
x = 2
function result()
{
// x is Re-declared
let x = 3
return x
}
// Output is 2 and 3
document.write(x+':'+result())
const work entirely different, it cannot re-declare and overwrite the values inside or outside the function. When we try to re-declare or overwrite values it will throw the error message.
x Declared
// x Declared const x = 1 // Output is 1 document.write(x)
x Re-declared
// x Declared const x = 1 // x Re-declared const x = 2 // Output is 1 document.write(x)
Above code will throw error message `Identifier ‘x’ has already been declared`
x Re-declared and value update
// x Declared
const x = 1
// x value update
x = 2
function result()
{
// x Re-declared
const x = 3
return x
}
// error
document.write(x+':'+result())
Above code will throw error message `Assignment to constant variable`
As I mentioned const cannot re-declare or overwrite the value, so its throwing error message.
x Re-declared inside the function
// x Declared
const x = 1
function result()
{
// x Re-declared
const x = 3
return x
}
// Output is 1:3
document.write(x+':'+result())
Above code will not throw error message because x is assigned inside and outside the function. Please share your valuable feedback and suggestion.