Tag: java var

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.