Variable declarations

A variable declaration occurs via a var keyword followed by a valid identifier or an assignment of the form a = b:

var foo;
var baz = 123;
We call things declared via var keyword variable declarations, but it's important to note that, in popular terminology, declarations made by both let and const are also considered variables. 

Variables declared via var are scoped to the nearest function, module, or global environment—that is, they are not block-scoped. At parse time, variable declarations within a given scope will be collected and then, at the point of execution, those declared variables will be hoisted to the top of their execution context and initialized with the undefined value. This means that, within a given scope, technically you can access a variable prior to its assignment, but it'll be undefined:

foo; // => undefined
var foo = 123;
foo; // => 123

The execution context is a name given to the top of the call stack, meaning the currently running function, script, or module. It is a concept that is only seen when code is run, and will change as the program progresses. You can usually think of it as simply the currently-running function (or outer module or <script>). var declarations are always hoisted to the top of their execution context and initialized to undefined.

The hoisting behavior of var is in contrast to variables declared via let and const, which will produce an ReferenceError if you attempt to access them prior to their declaration:

thing; // ! ReferenceError: Cannot access 'thing' before initialization
let thing = 123;

If you're not careful, the hoisting behavior of var can lead to some unexpected results. For example, there may be a situation where you're attempting to refer to a variable that exists within the outer scope but you are unable to do so because of a variable declaration in your current scope being hoisted:

var config = {};

function setupUI() {
config; // => undefined
var config;
}

setupUI();

Here, the inner scope's variable declaration of config will be hoisted to the top of its scope, meaning that, from the very first line of setupUI, config is undefined.

Since variable declarations are hoisted to the very top of their execution context, even those within a block will be hoisted as if they were first initialized outside of it:

// This:
// (VariableDeclaration inside a Block)
if (true) {
var value = 123;
}

// ... Is equivalent to:
// (VariableDeclaration preceding a Block)
var value;
if (true) {
value = 123
};

In summary, variable declarations create a variable that is scoped to the nearest function, module, or global environment. In the browser, there are no module environments, so it'll either be scoped to its function or the global scope. A variable declaration will be hoisted, before execution, to the top of its respective execution context. This may be the function, the module (in Node.js), or the <script> (in the browser). Variable declarations have fallen out of favor because of the more recently introduced const and let declarations, which are both block-scoped and do not have any odd hoisting behavior. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.115.195