Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 171895b

Browse files
committed
Starting Variables
1 parent 436696e commit 171895b

File tree

3 files changed

+125
-129
lines changed

3 files changed

+125
-129
lines changed

‎01-Javascript-Engine.md

Lines changed: 0 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@
1717
- [Execution Stack](#execution-stack)
1818
- [Creation of Execution Stack](#creation-of-execution-stack)
1919
- [Lexical Environment](#lexical-environment)
20-
- [Hoisting](#hoisting)
21-
- [Hoisting in var](#hoisting-in-var)
22-
- [Hoisting with let/const](#hoisting-with-letconst)
23-
- [Temproal Dead Zone](#temproal-dead-zone)
2420

2521
# JavaScript Engine
2622

@@ -209,125 +205,3 @@ Each Lexical Environment has three component:
209205
- Environment Record
210206
- Reference to outer environment
211207
- _this_ binding
212-
213-
## Hoisting
214-
215-
Hoisting is the default behavior of JavaScript where it defines all the declarations at the top of scope before code execution. JavaScript only hoists declarations, not initialization.
216-
217-
JavaScript engine treats all variable declarations using _var_ as if they are declared at the top of global scope (if declared outside function) or at the top of functional scope (if declared inside function) regardless of where the actual declaration is made. This simply is **_Hoisting_**.
218-
219-
### Hoisting in var
220-
221-
```js
222-
console.log(name); //OUTPUT: undefined
223-
224-
var name = "Prabesh";
225-
226-
console.log(name); //OUTPUT: "Prabesh"
227-
```
228-
229-
Normally, we would expect to get an error (ReferenceError) in the first _console.log_ since the variable name wasn't already declared before. But JavaScript hoists all variable declarations at the top.
230-
231-
**Behind the Scene in interpreter**
232-
233-
```js
234-
//variable declaration gets hoisted at top
235-
var name;
236-
237-
console.log(name); //OUTPUT: undefined
238-
239-
name = "Prabesh";
240-
241-
console.log(name); //OUTPUT: "Prabesh"
242-
```
243-
244-
_In JavaScript, undeclared variable is assigned as type of undefined while ReferenceError is thrown when trying to access undeclared variable._
245-
246-
**Hoisting in Functional Scope**
247-
248-
Variables declared within function are in the local scope. variables in the local scope are only accessible within the function in which they are defined. Hence, we can use variable with same name and use it in different function.
249-
250-
If we declare local variable and a global variable with same name, the local variable will take precedence when we use it inside a function. In simple words, local variable shadows global variables.
251-
252-
```js
253-
function getName() {
254-
console.log(name);
255-
var name = "Prabesh";
256-
}
257-
258-
getName();
259-
260-
//OUTPUT: undefined
261-
```
262-
263-
**Behind the Scene in interpreter**
264-
265-
```js
266-
function getName() {
267-
var name;
268-
console.log(name); //OUTPUT: "Prabesh"
269-
name = "Prabesh";
270-
}
271-
272-
getName();
273-
```
274-
275-
To avoid such inconvinence, we need to declare and initialize the variable before we use it.
276-
277-
**_Note to Remember: JavaScript declares the variable first in the background, then initialize them._**
278-
279-
ALl of the undeclared variables are global varibles.
280-
281-
```js
282-
// Example of Hoisting
283-
function hoisting() {
284-
let name = "Prabesh";
285-
age = 23;
286-
}
287-
hoisting();
288-
289-
console.log(name); // Reference Error: name is not defined.
290-
console.log(age); // Output: 23
291-
```
292-
293-
**So what exactly happened here?**
294-
295-
In the above code, we have a function called hoisting() where we did not declare a variable using let/var/const and another variable declared with let. As mentioned above, _assigning the undeclared variable to the global scope is done by JavaScript_. Hence, age variable is availabe even outsode of scope(globally) but the scope of name variable is within the function, so we get the ReferenceError.
296-
297-
### Hoisting with let/const
298-
299-
In ES6, _let_ does not allow us to use undeclard variables and throws a ReferenceError. This makes sure that we always declare our variable first.
300-
301-
**Example 1:**
302-
303-
```js
304-
console.log(num);
305-
//OUTPUT: ReferenceError: Cannot access 'num' before initialization
306-
307-
let num = 20;
308-
309-
console.log(num); //OUTPUT: 20
310-
```
311-
312-
Let's have a look at another example:
313-
**Example 2:**
314-
315-
```js
316-
console.log(number2);
317-
//OUTPUT: ReferenceError: number2 is not defined.
318-
319-
let number = 20;
320-
```
321-
322-
**_Do you notice something different in example 1 and 2?_**
323-
324-
The error in example 1 says: _ReferenceError: Cannot access 'num' before initialization_ but the error in example 2 is _ReferenceError: number2 is not defined_
325-
326-
The error "is not defined" means our JavaScript engine has no idea what _number2_ variable is because we never defined it.
327-
But the error "cannot access before initialization" means our JS engine knows the "num" variable since "num" is hoisted to the top of global scope.
328-
329-
_To summarize, variables declared with **let** or **const** are hoisted **without** a default initialization but the variables declared with **var** are hoisted **with** default initialization of undefined._
330-
331-
### Temproal Dead Zone
332-
333-
This is a period during execution where _let/const_ variables are hoisted but not accessible.

‎02-All-About-Variables.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
**Table of Content**
2+
3+
# Variables in JavaScript
4+
5+
## Hoisting
6+
7+
Hoisting is the default behavior of JavaScript where it defines all the declarations at the top of scope before code execution. JavaScript only hoists declarations, not initialization.
8+
9+
JavaScript engine treats all variable declarations using _var_ as if they are declared at the top of global scope (if declared outside function) or at the top of functional scope (if declared inside function) regardless of where the actual declaration is made. This simply is **_Hoisting_**.
10+
11+
### Hoisting in var
12+
13+
```js
14+
console.log(name); //OUTPUT: undefined
15+
16+
var name = "Prabesh";
17+
18+
console.log(name); //OUTPUT: "Prabesh"
19+
```
20+
21+
Normally, we would expect to get an error (ReferenceError) in the first _console.log_ since the variable name wasn't already declared before. But JavaScript hoists all variable declarations at the top.
22+
23+
**Behind the Scene in interpreter**
24+
25+
```js
26+
//variable declaration gets hoisted at top
27+
var name;
28+
29+
console.log(name); //OUTPUT: undefined
30+
31+
name = "Prabesh";
32+
33+
console.log(name); //OUTPUT: "Prabesh"
34+
```
35+
36+
_In JavaScript, undeclared variable is assigned as type of undefined while ReferenceError is thrown when trying to access undeclared variable._
37+
38+
**Hoisting in Functional Scope**
39+
40+
Variables declared within function are in the local scope. variables in the local scope are only accessible within the function in which they are defined. Hence, we can use variable with same name and use it in different function.
41+
42+
If we declare local variable and a global variable with same name, the local variable will take precedence when we use it inside a function. In simple words, local variable shadows global variables.
43+
44+
```js
45+
function getName() {
46+
console.log(name);
47+
var name = "Prabesh";
48+
}
49+
50+
getName();
51+
52+
//OUTPUT: undefined
53+
```
54+
55+
**Behind the Scene in interpreter**
56+
57+
```js
58+
function getName() {
59+
var name;
60+
console.log(name); //OUTPUT: "Prabesh"
61+
name = "Prabesh";
62+
}
63+
64+
getName();
65+
```
66+
67+
To avoid such inconvinence, we need to declare and initialize the variable before we use it.
68+
69+
**_Note to Remember: JavaScript declares the variable first in the background, then initialize them._**
70+
71+
ALl of the undeclared variables are global varibles.
72+
73+
```js
74+
// Example of Hoisting
75+
function hoisting() {
76+
let name = "Prabesh";
77+
age = 23;
78+
}
79+
hoisting();
80+
81+
console.log(name); // Reference Error: name is not defined.
82+
console.log(age); // Output: 23
83+
```
84+
85+
**So what exactly happened here?**
86+
87+
In the above code, we have a function called hoisting() where we did not declare a variable using let/var/const and another variable declared with let. As mentioned above, _assigning the undeclared variable to the global scope is done by JavaScript_. Hence, age variable is availabe even outsode of scope(globally) but the scope of name variable is within the function, so we get the ReferenceError.
88+
89+
### Hoisting with let/const
90+
91+
In ES6, _let_ does not allow us to use undeclard variables and throws a ReferenceError. This makes sure that we always declare our variable first.
92+
93+
**Example 1:**
94+
95+
```js
96+
console.log(num);
97+
//OUTPUT: ReferenceError: Cannot access 'num' before initialization
98+
99+
let num = 20;
100+
101+
console.log(num); //OUTPUT: 20
102+
```
103+
104+
Let's have a look at another example:
105+
**Example 2:**
106+
107+
```js
108+
console.log(number2);
109+
//OUTPUT: ReferenceError: number2 is not defined.
110+
111+
let number = 20;
112+
```
113+
114+
**_Do you notice something different in example 1 and 2?_**
115+
116+
The error in example 1 says: _ReferenceError: Cannot access 'num' before initialization_ but the error in example 2 is _ReferenceError: number2 is not defined_
117+
118+
The error "is not defined" means our JavaScript engine has no idea what _number2_ variable is because we never defined it.
119+
But the error "cannot access before initialization" means our JS engine knows the "num" variable since "num" is hoisted to the top of global scope.
120+
121+
_To summarize, variables declared with **let** or **const** are hoisted **without** a default initialization but the variables declared with **var** are hoisted **with** default initialization of undefined._
122+
123+
### Temproal Dead Zone
124+
125+
This is a period during execution where _let/const_ variables are hoisted but not accessible.

‎README.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
# Table of Content
2-
3-
01 - JavaScript Engine

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /