Hoisting & Var

Question 1

What is var?

Answer 1

Var was the original way of declaring variables in JS

Question 2

What happens when you use var at the top level of a program?

Answer 2

Usingvarat the top level of a program creates a property on the global object, e.g.,globalin Node orwindowin a browser.

Question 3

var bar = 42;
console.log(global.bar);

Answer 3

// 42

Question 4

What happens when you use var inside a function?

Answer 4

When you usevarinside a function, the variable isnotstored as a property of the global object:

Question 5

function foo() {
var bar = 42;
console.log(global.bar);
}

foo();

Answer 5

// undefined

Question 6

How is let scoped, how is var scoped? What is the difference?

Answer 6

letisblock-scoped, whilevarisfunction-scoped.
A block-scoped variable is only visible within the block where it is declared; A function-scoped variable is visible within the function where it is declared.

Question 7

function foo() {
if (true) {
var a = 1;
let b = 2;
}

//what do these log?
console.log(a);
console.log(b);
}

foo();

Answer 7

// 1
// ReferenceError: b is not defined

Question 8

What are the types of scope?

Answer 8

Visibility Scope
Declared Scope
Lexical Scope

Question 9

What is visibility scope?

Answer 9

Visibility scope refers to where a particular identifier – a variable, function, or class name – is available for use by your code. If a variable is available throughout your code, then it has global scope. Otherwise, it has local scope.

Question 10

What are the two ways a variable can be scoped when talking about visibility scope?

Answer 10

If a variable is available throughout your code, then it has global scope. Otherwise, it has local scope.

Question 11

What is the visibility scope for the following variables?
let foo1 = 1;
var bar1 = 2;

if (true) {
let foo2 = 3;
var bar2 = 4;
}

Answer 11

let foo1 = 1; // visibility scope is global
var bar1 = 2; // visibility scope is global

if (true) {
let foo2 = 3; // visibility scope is local (local block)
var bar2 = 4; // visibility scope is global
}

Question 12

What is the visibility scope for the following variables?

function xyzzy() {
let foo3 = 5;
var bar3 = 6;

if (true) {
let foo4 = 7;
var bar4 = 8;
}
}

Answer 12

function xyzzy() { // visibility scope is global
let foo3 = 5; // visibility scope is local (local function)
var bar3 = 6; // visibility scope is local (local function)

if (true) {
let foo4 = 7; // visibility scope is local (local block)
var bar4 = 8; // visibility scope is local (local function)
}
}

Question 13

What is declared scope?

Answer 13

Declared scope refers to how a particular identifier is declared. For instance, we use theletkeyword to declare variables with block scope, and usevarto declare variables with function scope. Knowing the declared scope lets us determine where a variable is available.

Question 14

What are the two scope types when talking about declared scope?

Answer 14

we use theletkeyword to declare variables with block scope, and usevarto declare variables with function scope.

Question 15

ID the declared scopes

let foo1 = 1;
var bar1 = 2;

if (true) {
let foo2 = 3;
var bar2 = 4;
}

Answer 15

let foo1 = 1; // declared scope is block scope
var bar1 = 2; // declared scope is function scope

if (true) {
let foo2 = 3; // declared scope is block scope
var bar2 = 4; // declared scope is function scope
}

Question 16

ID the declared scopes
function xyzzy() {
let foo3 = 5;
var bar3 = 6;

if (true) {
let foo4 = 7;
var bar4 = 8;
}
}

Answer 16

function xyzzy() { // declared scope is function scope
let foo3 = 5; // declared scope is block scope
var bar3 = 6; // declared scope is function scope

if (true) {
let foo4 = 7; // declared scope is block scope
var bar4 = 8; // declared scope is function scope
}
}

Question 17

What is lexical scope?

Answer 17

Lexical scope can refers to the structure of your code. The lexical scope distinguishes between variables that are declared inside a function or block (inner scope) and the variables that are declared outside of that function or block (outer scope). Lexical scope is especially important with closure

Question 18

ID the lexical scope

let foo1 = 1;

if (true) {
let foo2 = 3;
}

function xyzzy() {
let foo3 = 5;

if (true) {
let foo4 = 7;
}
}

Answer 18

let foo1 = 1; // outer scope of xyzzy, outer scope of if block on line 3

if (true) {
let foo2 = 3; // inner scope of if block on line 3
}

function xyzzy() {
let foo3 = 5; // inner scope of xyzzy, outer scope of if block on line 10

if (true) {
let foo4 = 7; // inner scope of if block on line 10
}
}

Question 19

ID the lexical scopes

var bar1 = 1;

if (true) {
var bar2 = 3;
}

function xyzzy() {
var bar3 = 5;

if (true) {
var bar4 = 7;
}
}

Answer 19

var bar1 = 1; // outer scope of xyzzy, outer scope of if block on line 3

if (true) {
var bar2 = 3; // outer scope of xyzzy, outer scope of if block on line 3
}

function xyzzy() {
var bar3 = 5; // inner scope of xyzzy, outer scope of if block on line 10

if (true) {
var bar4 = 7; // inner scope of xyzzy, outer scope of if block on line 10
}
}

Question 20

What are the two main phases of JS engine operation? How does this relate to hoisting?

Answer 20

JavaScript engines operate in two main phases: acreation phaseand anexecution phase. The execution phase occurs when the program runs code line-by-line. before the execution phase begins, the creation phase does some preliminary work. One of those work items is to find all of the variable, function, and classdeclarations. When it encounters each of these identifiers, it records the name and designates its scope. When the execution phase begins, JavaScript knows what variables exist and where they are in scope. From the developer’s perspective, the code acts like the declarations were moved to the top of their respective scope. In particular, function-scoped declarations are moved to the function’s beginning, and block-scoped declarations are moved to the block’s start. We call this processhoisting.

Question 21

Are variables hoisted?

Answer 21

Variables declared with thelet,const, andvarstatements are also hoisted

Question 22

What happens when a var is hoisted?

Answer 22

when a varvariable is hoisted, JavaScript gives it an initial value ofundefined. Thus, you can access it and it will give you undefined.

Question 23

What happens when let/const variables are hoisted?

Answer 23

Whenletandconstvariables are hoisted, they are not given an initial value at all. Instead, they are left in an “unset” state; that is, they are “not defined.” Such unset variables are said to be in theTemporal Dead Zone, or theTDZ. Such variables remain in the TDZ until the initialization code runs during the execution phases.

If you try to access aletorconstvariable that is still in the TDZ, you’ll get an error:

Question 24

Are function declarations hoisted?

Answer 24

JavaScript also hoists function declarations to the top of the scope. In fact, it hoists the entire function declaration, including the function body

Question 25

How are function expressions hoisted?

Answer 25

Function expressions often involve assigning a function to a declared variable. Those variables obey the usual hoisting rules for variable declaration. IE, they remain unset until the function expression is hit.

Question 26

how does JS hoist class declarations?

Answer 26

When JavaScript encounters a class declaration, the class name gets hoisted, but the definition of the class does not. Thus you can’t use a class before definition. (Hoisting for class expressions is the same: the variable name gets hoisted, but the definition doesn't get assigned to the name until the expression is evaluated.)