Added to the scope JS 101 article #201

jackfranklin · 2012-11-24T21:35:27Z

Following on from #89 (comment), I finally found some time to quickly move over some of the content I wrote for my initial Scope and this in JS article and move it over into the Scopes article, reworking it slightly but not making any major changes.

Let me know what you think :)

rmurphey · 2012-11-24T22:01:36Z

page/javascript-101/scope.md


 When a variable is declared inside of a function using the `var` keyword, it is only available to code inside of that function &#8212; code outside of that function cannot access the variable. On the other hand, functions defined inside that function will have access to to the declared variable.

+There are two types of scopes in JavaScript: Global and local. Lets talk about each of them in turn.
+
+The first scope is __Global Scope__. This is very easy to define. If a variable or function is _global_, it can be got at from anywhere. In a browser, the global scope is the `window` object. So if in your code you simply have:


Two things:

suggest "it can be accessed from anywhere within a program" rather than "it can be got at from anywhere"

this paragraph ends as though the thought will be continued after the code example, but it is not continued

jackfranklin · 2012-11-24T22:24:37Z

@rmurphey thanks for your feedback, I guess that teaches me for doing the pull request in a bit of a rush! Based on your feedback I have reworded and reworked things.

As for if the attribution is out of date, I am unsure. I presumed the contents of the file before I edited were from jQF, and I've not removed it.

rmurphey · 2012-11-25T02:40:37Z

page/javascript-101/scope.md

+
+Once that variable is set, it exists on the global object. Once that variable had been defined, it could be referenced as `window.x`, but because it exists on the global object we can simply refer to it as `x`.
+
+The only other scope we can have is __Local Scope__. JavaScript scopes at a function level. For example:


Better:

JavaScript also creates a Local Scope inside each function body. For exampmle:

rmurphey · 2012-11-25T02:53:20Z

On reading this content in greater depth, I think it would be good to spend some more time integrating it into the existing content -- presently it seems like there's some duplication of content between the old and new content, and it seems like some of the examples at the end of the section are no longer necessary, or should have some prose explanation associated with them. I can try to take a look at this tomorrow, but I'm not sure how best to submit the changes -- as a pull request on @jackfranklin's repo, or as a pull request to this repo that simply builds upon what's here. @ajpiano?

I've added a couple more comments inline. I'd also suggest:

ensure consistent use of US English spellings per the style guide
avoid using an ampersand; use "and" instead
link to Ben Alman's IIFE explanation
get the PR into a merge-able state :) seems it can't be merged at the moment but I haven't explored why

jackfranklin · 2012-11-25T12:06:27Z

Thanks for your feedback @rmurphey :) I will have a crack at integrating the two bits more closely, and bring the file up to date with the style guide.

I've not got any immediate idea as to why it's not merge-able, unless the Original MD file has changed since I pulled. I'll have an explore as to why.

jackfranklin · 2012-11-25T12:26:40Z

Just did some more tweaking. I've no idea why Github says this isn't merge-able though!

I made a start on integrating the two "bits" of the article and adding some prose around the larger code examples. Not perfect by any means but a start.

gnarf · 2012-11-25T12:52:28Z

@jackfranklin Try pulling from upstream master and merging into the branch, or rebasing the branch on the current master. I know I did a lot of changes in the formatting/example code in this article.

jackfranklin · 2012-11-25T13:01:14Z

@gnarf37 thanks, I did a pull from upstream and indeed there was a conflict in scopes.md which I fixed. This does mean that this pull request is now awfully messy though with that latest commit that fixed the conflicts. Would it be best to delete this one, and I'll re-fork, apply my changes and do a new pull request so there's a lot less noise?

gnarf · 2012-11-25T22:32:00Z

page/javascript-101/scope.md

 };
+console.log(x); // ReferenceError: x is not defined


console.log( x );

gnarf · 2012-11-25T22:34:16Z

@jackfranklin the diff doesn't seem that noisy - You could start over if you think that will result in a better pull though, I won't stop you :)

jackfranklin · 2012-11-26T00:06:03Z

If you're happy I'll leave it :-) I will make those adjustments tomorrow.

rmurphey · 2012-11-26T00:13:52Z

page/javascript-101/scope.md

+
+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.
+
+Secondly, it's considered bad practise to clutter the global scope. You should add as fewer properties as you possibly can to the global object, and try to keep your program contained within its own scope. That's why you'll see libaries such as jQuery often do this:


This seems like a restatement of the first reason not to have global variables. I'm hesitant to just say a thing is a bad practice without saying why it's a bad practice, but in fact you've already said why it's a bad practice, so this paragraph seems redundant to me.

I'd simply point out that IIFEs provide a way to avoid polluting the global scope -- ensuring that variables can't be tampered with by other code -- and move on to the example below.

practise -> practice

@rmurphey do you mean to remove the entire jQuery IIFE example, or just reword the line that starts "Secondly..." to mention IIFEs, then show the jQuery example, and then move onto the next example (which starts on line 59) ?

jackfranklin · 2012-11-26T17:25:12Z

@rmurphey, with regards to this comment:

This seems like a restatement of the first reason not to have global variables. I'm hesitant to just say a thing is a bad practice without saying why it's a bad practice, but in fact you've already said why it's a bad practice, so this paragraph seems redundant to me.

I'd simply point out that IIFEs provide a way to avoid polluting the global scope -- ensuring that variables can't be tampered with by other code -- and move on to the example below.

Do you mean to remove the entire jQuery IIFE example, or just reword the line that starts "Secondly..." to mention IIFEs, then show the jQuery example, and then move onto the next example (which starts on line 59) ? I agree it could do with reworking a little but not entirely clear on what you mean.

Thanks for all your help so far :)

addyosmani · 2012-12-30T21:46:25Z

cc @rmurphey for some further comments on the above when you get a chance :)

rmurphey · 2012-12-30T22:11:09Z

@jackfranklin I'd change the paragraph that starts with "Secondly" to just explain that IIFEs provide a way to avoid global variables, and then show the example of the jQuery IIFE.

…e89-expandscope

… and less repetitive

jackfranklin · 2013-01-18T10:30:14Z

@rmurphey sorry for the delay on getting back to this! I've made the edits to shrink that sentence down and make it less repetitive.

gnarf · 2013-02-27T09:48:05Z

So, this merge went grey somewhere along the way, can you rebase/merge it?

jackfranklin · 2013-02-27T11:43:37Z

@gnarf37 just pulled in from upstream and fixed the conflict - hopefully it's green now?

gnarf · 2013-02-27T12:11:12Z

It is. I plan on pinging @ajpiano today about this, hopefully we can merge it before it gets stale again :)

* master: (21 commits) 0.2.7 Remove remaining trailing whitespace from all pages. Fixes jquery#313. Style and typography fixes, and code style adherence in the JavaScript 101 section. Fixes jquery#312. 0.2.6 Correct comment in :input selector in Selecting Elements article. Fixes jquery#306. Expand the JavaScript 101 'Scope' article with more useful information and explanations. Fixes jquery#201. Added 0 to the list of falsy values in JavaScript 101 Conditional Code article. Fixes jquery#300. Fixes jquery#271 Inserted missing word in the JavaScript 101 Arrays article. Fixes jquery#299. Fixed inconsistency in showLinkLocation example in Basic Plugin Creation article. Fixes jquery#307. Fix example and other style cleanup in Basic Plugin Creation article. Fixes jquery#310. Fixes jquery#311. Update list of reserved words in JavaScript. Fixes jquery#301. Style and typography fixes and code style adherence in the Events section. Fixes jquery#294. Style and typography fixes, and code style adherence in the Effects section. Fixes jquery#290. Style and typography fixes, and code style adherence in the Code Organization section. Fixes jquery#287. Remove double ampersands in README header. Fixes jquery#284. Code and prose style improvements to all articles in Ajax chapter. Fixes jquery#283. Style fixes on the About page. Fixes jquery#279. Style guide fixes for the index, contributing, and About jQuery articles. Fixes jquery#270 relabel queue/dequeue content as advanced Added a missing 'i' in the for loop. Fixes jquery#280. ... Conflicts: page/ajax/ajax-and-forms.md page/ajax/jquery-ajax-methods.md page/effects/custom-effects.md page/effects/intro-to-effects.md page/events/event-basics.md page/events/event-helpers.md page/events/introduction-to-custom-events.md page/events/triggering-event-handlers.md

…n and explanations. Fixes jquery#201.

Added to the scope JS 101 article

fb9ee66

rmurphey reviewed Nov 24, 2012
View reviewed changes

update article based on @rmurphey's feedback

b9ebfc6

rmurphey reviewed Nov 25, 2012
View reviewed changes

tweaks and comforming to the style guide

0ce4fb3

fix merge conflict in scope article

a029a3b

gnarf reviewed Nov 25, 2012
View reviewed changes

page/javascript-101/scope.md

};

console.log(x); // ReferenceError: x is not defined

Copy link

Member

gnarf Nov 25, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

console.log( x );

rmurphey reviewed Nov 26, 2012
View reviewed changes

update code to match style - spaces before / after parens

0ba297d

Grammar tweaks

ba32ebb

jackfranklin added 2 commits January 18, 2013 10:23

Merge branch 'master' of github.com:jquery/learn.jquery.com into issu…

1d28c53

…e89-expandscope

Rewrite the paragraph starting with Secondly to be a bit more concise…

ce975df

… and less repetitive

merge in from upstream and fix conflict

21900b5

ajpiano closed this in 6fc9783 Mar 14, 2013

arthurvr pushed a commit to arthurvr/learn.jquery.com that referenced this pull request Jan 4, 2015

Expand the JavaScript 101 'Scope' article with more useful informatio…

f0d091c

…n and explanations. Fixes jquery#201.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added to the scope JS 101 article #201

Added to the scope JS 101 article #201

jackfranklin commented Nov 24, 2012

rmurphey Nov 24, 2012

jackfranklin commented Nov 24, 2012

rmurphey Nov 25, 2012

rmurphey commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

gnarf commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

gnarf Nov 25, 2012

gnarf commented Nov 25, 2012

jackfranklin commented Nov 26, 2012

rmurphey Nov 26, 2012

rmurphey Nov 26, 2012

jackfranklin Nov 26, 2012

jackfranklin commented Nov 26, 2012

addyosmani commented Dec 30, 2012

rmurphey commented Dec 30, 2012

jackfranklin commented Jan 18, 2013

gnarf commented Feb 27, 2013

jackfranklin commented Feb 27, 2013

gnarf commented Feb 27, 2013


		Once that variable is set, it exists on the global object. Once that variable had been defined, it could be referenced as `window.x`, but because it exists on the global object we can simply refer to it as `x`.

		The only other scope we can have is __Local Scope__. JavaScript scopes at a function level. For example:


		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.

		Secondly, it's considered bad practise to clutter the global scope. You should add as fewer properties as you possibly can to the global object, and try to keep your program contained within its own scope. That's why you'll see libaries such as jQuery often do this:

Added to the scope JS 101 article #201

Added to the scope JS 101 article #201

Conversation

jackfranklin commented Nov 24, 2012

rmurphey Nov 24, 2012

Choose a reason for hiding this comment

jackfranklin commented Nov 24, 2012

rmurphey Nov 25, 2012

Choose a reason for hiding this comment

rmurphey commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

gnarf commented Nov 25, 2012

jackfranklin commented Nov 25, 2012

gnarf Nov 25, 2012

Choose a reason for hiding this comment

gnarf commented Nov 25, 2012

jackfranklin commented Nov 26, 2012

rmurphey Nov 26, 2012

Choose a reason for hiding this comment

rmurphey Nov 26, 2012

Choose a reason for hiding this comment

jackfranklin Nov 26, 2012

Choose a reason for hiding this comment

jackfranklin commented Nov 26, 2012

addyosmani commented Dec 30, 2012

rmurphey commented Dec 30, 2012

jackfranklin commented Jan 18, 2013

gnarf commented Feb 27, 2013

jackfranklin commented Feb 27, 2013

gnarf commented Feb 27, 2013