Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
/*
If you declare a variable within a certain scope (decision block, function, or inner class).It has the same name as a variable declared in an outer scope. This is called variable shadowing. How it works. let's start with demo.
*/
const flower="Red Rose"; // global variable.
// 1. decision block
	if(true){
	 const flower="Black Rose";
	console.log("Decision scope variable shadowing: "+flower);
}
console.log("Global scope variable:"+flower);
// 2. function scope
const foo = function(flower) {
	console.log("Function scope variable shadowing: "+flower);
}
foo("Pink Rose");
// 3. Inner Class block
class Garden {
	flower="Green Rose";
	constructor(flower){
		console.log("Default flower Name: "+flower);
	}
	getBlueRose (){
      const flower="Blue Rose";
	   console.log("Inner Class scope variable shadowing :"+flower);
	}
};
const garden = new Garden("White Rose");
garden.getBlueRose();
</script>


<script id="jsbin-source-javascript" type="text/javascript">/*
If you declare a variable within a certain scope (decision block, function, or inner class).It has the same name as a variable declared in an outer scope. This is called variable shadowing. How it works. let's start with demo.
*/
const flower="Red Rose"; // global variable.
// 1. decision block
	if(true){
	 const flower="Black Rose";
	console.log("Decision scope variable shadowing: "+flower);
}
console.log("Global scope variable:"+flower);
// 2. function scope
const foo = function(flower) {
	console.log("Function scope variable shadowing: "+flower);
}
foo("Pink Rose");
// 3. Inner Class block
class Garden {
	flower="Green Rose";
	constructor(flower){
		console.log("Default flower Name: "+flower);
	}
	getBlueRose (){
      const flower="Blue Rose";
	   console.log("Inner Class scope variable shadowing :"+flower);
	}
};
const garden = new Garden("White Rose");
garden.getBlueRose();

</script></body>
</html>