You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/javascript-101/scope.md
+10-8
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ attribution:
6
6
- jQuery Fundamentals
7
7
---
8
8
9
-
"Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. The idea of "scope" is that it's where certain functions or variables are accessible from in our code, and the context in which they exist and are executed in.
9
+
"Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. The idea of scope is that it's where certain functions or variables are accessible from in our code, and the context in which they exist and are executed in.
10
10
11
11
There are two types of scopes in JavaScript: global and local. Let's talk about each of them in turn.
12
12
@@ -28,6 +28,7 @@ JavaScript also creates a __Local Scope__ inside each function body. For example
28
28
function myFunc() {
29
29
var x = 5;
30
30
};
31
+
31
32
console.log( x ); // ReferenceError: x is not defined
32
33
```
33
34
@@ -40,22 +41,23 @@ If you declare a variable and forget to use the `var` keyword, that variable is
40
41
```
41
42
function myFunc() {
42
43
x = 5;
43
-
});
44
+
};
45
+
44
46
console.log( x ); // 5
45
47
```
46
48
47
49
This is a bad idea. Any variable that is global can have its value changed by any other parts of a program or any other script. This is undesirable, as it could lead to unforseen side effects.
48
50
49
-
Secondly, Immediately-Invoked Funcion Expressions provide a way to avoid global variables. You'll see many libraries such as jQuery often use these:
51
+
Secondly, Immediately-Invoked Function Expressions provide a way to avoid global variables. You'll see many libraries such as jQuery often use these:
50
52
51
53
```
52
54
(function() {
53
-
var jQuery = { /* all my methods go here */ };
54
-
window.jQuery = jQuery.
55
+
var jQuery = { /* All my methods go here. */ };
56
+
window.jQuery = jQuery;
55
57
})();
56
58
```
57
59
58
-
Wrapping everything in a function which is then immediately invoked means all the variables within that function are bound to the _local scope_. At the very end you can then expose all your methods by binding the `jQuery` object to the `window`, the _global object_. To read more about Immediatly-Invoked Functions, check out Ben Alman's [Immediately-Invoked Function Expression](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) article.
60
+
Wrapping everything in a function which is then immediately invoked means all the variables within that function are bound to the _local scope_. At the very end you can then expose all your methods by binding the `jQuery` object to the `window`, the _global object_. To read more about Immediately-Invoked Functions, check out Ben Alman's [Immediately-Invoked Function Expression](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) article.
59
61
60
62
Because local scope works through functions, any functions defined within another have access to variables defined in the outer function:
61
63
@@ -67,7 +69,7 @@ function outer() {
67
69
console.log( x );
68
70
}
69
71
70
-
inner(); // 5
72
+
inner(); // 5
71
73
}
72
74
```
73
75
@@ -82,7 +84,7 @@ function outer() {
82
84
var y = 10;
83
85
}
84
86
85
-
inner(); // 5
87
+
inner(); // 5
86
88
87
89
console.log( y ); // ReferenceError: y is not defined
0 commit comments