/
var_let_const_difference.html
125 lines (106 loc) · 4 KB
/
var_let_const_difference.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- Based on video: https://www.youtube.com/watch?v=Yt9UbMmAKXc -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Difference between Var, Let and Const</title>
<script>
function testingLet(){
console.log('Testing "Let"');
let num = 1;
function printNum() {
num = 2;
if(true){
let num = 3;
console.log(num)
}
console.log(num)
}
printNum();
console.log(num);
console.log('Pay attention, you can\'t see "1" in results. This value of "num" was overwritten')
}
function testingVar(){
console.log('Testing "Var"');
var num = 1;
function printNum() {
var num = 2;
if(true){
var num = 3;
console.log(num)
}
console.log(num)
}
printNum();
console.log(num)
}
function testingLet2(){
if(true){
let num = 1;
}
console.log(num);
}
function createTwoVarsInTheSameScope() {
console.log("Creating two 'vars' with the SAME name in the SAME scope");
var num1 = 10;
console.log(num1);
var num1 = 17;
console.log(num1);
console.log("It worked. But you can't do this trick with a 'Let'");
}
function testConst(){
const num = 10;
console.log("const num: " + num);
//num = 11; //Uncommenting leads to error. Assignment to constant variable
function changeConstInAnotherScope(){
num = 12;
console.log("const num: " + num);
}
// changeConstInAnotherScope(); // Launching leads to error. Assignment to constant variable
function declareTheSameConstInAnotherScope(){
const num = 12;
console.log("const num: " + num);
}
declareTheSameConstInAnotherScope(); // This one works correctly. As "let". New scope - new variable
}
function testConstObj(){
console.log('Changing property of a const obj');
const myConstObj = {
id: 0,
name: "Stas"
};
myConstObj.name = "Evan You";
console.log("'Name' property of a const obj was successfully changed to " + myConstObj.name);
}
testingLet();
testingVar();
testConst();
testConstObj();
createTwoVarsInTheSameScope();
function testNoTypeVariable()
{
// I've googled it, to remind myself what 'no type variable' means
// JavaScript allows variable declaration without var keyword.
testVar = 100;
console.log(testVar);
}
console.log('Testing a variable without any type');
testNoTypeVariable();
console.log(testVar);
console.log('Wow! Variable was successfully printed outside of a scope where it was declared');
console.log('Scope of the variables declared without var keyword become global irrespective of ' +
'where it is declared. ');
testingLet2();
</script>
</head>
<body>
<p>==================================================================</p>
<p>* "Const" and "Let" were added in ES6 only</p>
<p>* 'Let' allows you to create a variable which is visible inside a code-block only. Within { }</p>
<p>* Please see log and code :p </p>
<p>************************************************************************** </p>
<p>* Conclusion: it is recommended not to use "var" anymore. Use const most of the time </p>
<p>* And let in those cases when your variables should be changed </p>
<p>==================================================================</p>
</body>
</html>