Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve var scoping/hoisting description #28068

Merged
merged 4 commits into from
Jul 21, 2023
Merged

Improve var scoping/hoisting description #28068

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69ccc90
Update index.md
domleonard Jul 20, 2023
59780c5
Update files/en-us/web/javascript/reference/statements/var/index.md
domleonard Jul 20, 2023
6a056cb
Update files/en-us/web/javascript/reference/statements/var/index.md
Josh-Cena Jul 20, 2023
4f9ead5
Update files/en-us/web/javascript/reference/statements/var/index.md
Josh-Cena Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions files/en-us/web/javascript/reference/statements/var/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ The scope of a variable declared with `var` is one of the following curly-brace-
- Function body
- [Static initialization block](/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks)

Or the current module or script, if it's contained in neither of these.
Or if neither of these apply:

- [Module scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) - the scope for code running in module mode. Or
- [Global scope] - the default scope for all code running in script mode.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

```js
function foo() {
Expand Down Expand Up @@ -81,7 +84,7 @@ The list that follows the `var` keyword is called a _{{glossary("binding")}} lis

### Hoisting

`var` declarations, wherever they occur, are processed before any code is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function or global code.
`var` declarations, wherever they occur, are processed during JavaScript compilation before any code is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function or global code.
Copy link
Member

Choose a reason for hiding this comment

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

I try to avoid the concept of "JavaScript compilation" because it's very ambiguous. Is it JIT? Is it realm initialization? Is it source parsing? In fact, var declarations are processed as the first step of execution, just before user-visible evaluation. See for examle: https://tc39.es/ecma262/#sec-source-text-module-record-initialize-environment

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The latest changes to "Description" resolve that part of the issue I was concerned about.

For Hoisting I'm happy to leave out "JavaScript Compilation" altogether. The version below changes

  • the first sentence to imply "script" means lines of code within a single script source.
  • the last sentence to not say that hoisting may move declarations to the top of global code.
### Hoisting

var declarations, wherever they occur in a script, are processed before any code for the script is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called hoisting, as it appears that the variable declaration is moved to the top of the function, static initialization block or script source in which it occurs.

[Sorry about proposing the update here if it should have been done as an edit to the PR - this is my first experience of Git work flow.]

Copy link
Member

@Josh-Cena Josh-Cena Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
`var` declarations, wherever they occur, are processed during JavaScript compilation before any code is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function or global code.
`var` declarations, wherever they occur in a script, are processed before any code within the script is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function, static initialization block, or script source in which it occurs.

So you are proposing the change above? This is okay for me. You can click the Commit suggestion button.

Copy link
Member

Choose a reason for hiding this comment

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

In fact I suggest adding another note to specifically point out about multiple scripts:

Suggested change
`var` declarations, wherever they occur, are processed during JavaScript compilation before any code is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function or global code.
`var` declarations, wherever they occur in a script, are processed before any code within the script is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called [_hoisting_](/en-US/docs/Glossary/Hoisting), as it appears that the variable declaration is moved to the top of the function, static initialization block, or script source in which it occurs.
> **Note:** `var` declarations are only hoisted to the top of the current script. If you have two `<script>` elements within one HTML, the first script cannot access variables declared by the second one.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think I committed the last suggestion. And immediately noticed the note could be misconstrued to mean "ever". Here's my suggestion to clarify the note:

Note: var declarations are only hoisted to the top of the current script. If you have two <script> elements within one HTML, the first script cannot access variables declared by the second one when first executed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Or even better:

**Note: var declarations are only hoisted to the top of the current script. If you have two <script> elements within one HTML, the first script cannot access variables declared by the second before the second script has been processed and executed.


```js
bla = 2;
Expand Down